Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From fuse-tailwindcss
Extends Tailwind CSS with @utility for custom utilities, @variant for conditionals, @custom-variant for new variants, @apply for inline utilities, and @layer for organization.
npx claudepluginhub fusengine/agents --plugin fuse-tailwindcssHow this skill is triggered — by the user, by Claude, or both
Slash command
/fuse-tailwindcss:tailwindcss-custom-stylesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
```css
References Tailwind CSS utility classes for layout, spacing, typography, colors, backgrounds, borders, shadows, effects, and responsive design. Aids utility-first CSS composition.
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.
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.
Share bugs, ideas, or general feedback.
@utility glass-effect {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
}
/* Usage: class="glass-effect hover:glass-effect" */
.card {
background: white;
@variant dark { background: #1a1a2e; }
@variant hover { transform: scale(1.05); }
}
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
/* Usage: theme-midnight:bg-black */
.btn-primary {
@apply bg-blue-500 text-white px-4 py-2 rounded-lg;
}
@layer components {
.card { @apply bg-white shadow-md rounded-xl p-4; }
}