Agent-Skills.md

Agent Skills: Custom Styles

@utility, @variant, @apply, custom CSS

UncategorizedID: fusengine/agents/tailwindcss-custom-styles

Repository

fusengine/agents
fusengineLicense: MIT
7

Install this agent skill to your local

pnpm dlx add-skill https://github.com/fusengine/agents/tree/HEAD/plugins/tailwindcss/skills/tailwindcss-custom-styles

Skill Files

Browse the full folder contents for tailwindcss-custom-styles.

Download Skill

Loading file tree…

plugins/tailwindcss/skills/tailwindcss-custom-styles/SKILL.md

Skill Metadata

Name
tailwindcss-custom-styles
Description
@utility, @variant, @apply, custom CSS

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; }
}