Help us improve
Share bugs, ideas, or general feedback.
From fuse-tailwindcss
Configures Tailwind CSS v4.1 using CSS-first directives like @theme, @import, @source, @utility, @variant, @apply, @config without tailwind.config.js. Covers themes, dark mode, layers, and plugins.
npx claudepluginhub fusengine/agents --plugin fuse-tailwindcssHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-tailwindcss:tailwindcss-coreThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Tailwind CSS v4.1 introduces a **CSS-first** approach that eliminates the need for a traditional `tailwind.config.js` file. All configuration is now done directly in your CSS files via specialized directives.
References Tailwind CSS v4.1 core features including @theme namespaces, directives (@utility, @variant), CSS-first config, custom styles, and v3 to v4 migration guide with breaking changes.
Tailwind CSS v4 utility-first discipline: CSS-first configuration, design tokens via @theme, and principled class composition. Invoke whenever task involves any interaction with Tailwind CSS — writing, reviewing, refactoring, debugging, or understanding utility classes, theme configuration, custom utilities, dark mode, or Tailwind integration with frameworks.
Configures Tailwind CSS v4 using CSS-first @theme directives, OKLCH colors, and design tokens. Covers Vite setup, @theme modes, and CSS variable naming.
Share bugs, ideas, or general feedback.
Tailwind CSS v4.1 introduces a CSS-first approach that eliminates the need for a traditional tailwind.config.js file. All configuration is now done directly in your CSS files via specialized directives.
Entry point to load Tailwind CSS. Place at the beginning of your main CSS file.
@import "tailwindcss";
This directive automatically loads:
Directive to define or customize theme values via CSS custom properties.
@theme {
--color-primary: #3b82f6;
--color-secondary: #ef4444;
--spacing-custom: 2.5rem;
--radius-lg: 1rem;
}
Variables are accessible in generated utilities:
--color-* → classes bg-primary, text-primary, etc.--spacing-* → classes p-custom, m-custom, etc.--radius-* → classes rounded-lg, etc.Directive to include additional source files with glob patterns.
@source "./routes/**/*.{ts,tsx}";
@source "./components/**/*.{tsx,jsx}";
@source "../packages/ui/src/**/*.{ts,tsx}";
Tailwind will scan these files to generate utilities used in your project.
Directives to create custom utilities and variants.
@utility truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@variant group-hover {
.group:hover &
}
Directive to apply Tailwind classes in your custom CSS rules.
.btn {
@apply px-4 py-2 rounded-lg font-semibold;
}
.btn-primary {
@apply bg-blue-500 text-white hover:bg-blue-600;
}
Directive to load external configuration if needed.
@config "./tailwind.config.js";
(Optional in v4.1, mainly used for backward compatibility)
Dark mode configuration in Tailwind v4.1:
@import "tailwindcss";
/* Use system preference */
@variant dark (&:is(.dark *));
Or via manual class:
@variant dark (&.dark);
Breakpoints are defined via @theme:
@theme {
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}
Responsive variants are used with utilities:
<div class="text-sm md:text-base lg:text-lg"></div>
@layer theme, base, components, utilities;
@import "tailwindcss";
/* Your customizations */
@layer components {
.btn { @apply px-4 py-2 rounded; }
}
@layer utilities {
.text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
}
Load Tailwind plugins:
@import "tailwindcss";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite";
In CSS-first, import and declaration order determines specificity:
@import "tailwindcss" - Base utilities@theme { ... } - Theme variables@layer components { ... } - Custom components@layer utilities { ... } - Custom utilitiesSee specific files for:
theme.md - Complete theme variable configurationdirectives.md - Syntax and examples of all directivesconfig.md - Advanced configuration and use cases