Tailwindcss custom styles

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

Redefining development through cognitive automation and collaborative agent systems.

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.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

1.1 KB, 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; }
}