# Fusengine Agents Tailwindcss Custom Styles

> Custom Styles

- Skill: `tomevault-io/fusengine-agents-tailwindcss-custom-styles` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/fusengine-agents-tailwindcss-custom-styles`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/fusengine-agents-tailwindcss-custom-styles/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/fusengine-agents-tailwindcss-custom-styles

---


# Custom Styles

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

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

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

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

## @layer - CSS organization
```css
@layer components {
  .card { @apply bg-white shadow-md rounded-xl p-4; }
}
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/fusengine) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->