Tailwindcss custom styles

Skill fusengine/agents/plugins/tailwindcss/skills/tailwindcss-custom-styles

Custom CSS authoring in Tailwind CSS v4.1 via @utility, @variant, @custom-variant, @apply, and @layer directives. Use when: creating a new named utility class, writing conditional/dark-mode variants, defining a custom variant selector, or applying utility classes inside custom CSS rules.From its SKILL.md

Install

npx -y skills add fusengine/agents --skill tailwindcss-custom-styles

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.1 KB, 225 tokens by cl100k_base, as published. Nobody here has run it

Custom Styles

@utility - Create a utility

@utility glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}
/* Usage: class="glass-effect hover:glass-effect" */

@variant - Conditional style

.card {
  background: white;
  @variant dark { background: #1a1a2e; }
  @variant hover { transform: scale(1.05); }
}

@custom-variant - New variant

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
/* Usage: theme-midnight:bg-black */

@apply - Inline utilities

.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded-lg;
}

@layer - CSS organization

@layer components {
  .card { @apply bg-white shadow-md rounded-xl p-4; }
}

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.