# Tailwind

> Tailwind CSS v4 utility classes - @theme, @utility, @plugin, grid, container queries, flexbox, spacing, responsive design. Use for CSS-only styling with Tailwind utilities. For pre-built components use shadcn-svelte skill. For UX principles use frontend-design skill.

- Skill: `digi4care/tailwind` (Agent Skill, multi-file: 36 files)
- Install (CLI): `npx skillmds@latest add digi4care/tailwind`
- Raw SKILL.md: https://api.skillmd.com/api/skills/digi4care/tailwind/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: digi4care (https://skillmd.com/u/digi4care)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/digi4care/tailwind

---


# Tailwind CSS v4

Comprehensive Tailwind CSS skill covering v4's CSS-first configuration, utilities, grid layouts, container queries, and framework integration.

## Quick Summary

| Feature               | Syntax                         | Description                     |
| --------------------- | ------------------------------ | ------------------------------- |
| **v4 Import**         | `@import "tailwindcss"`        | Replaces `@tailwind` directives |
| **Theme**             | `@theme { --color-*: ... }`    | CSS variables for customization |
| **Custom Utilities**  | `@utility name { ... }`        | Define utilities in CSS         |
| **Plugins**           | `@plugin "@tailwindcss/forms"` | Load plugins in CSS             |
| **Container Queries** | `@container`, `@md:`, `@lg:`   | Responsive to parent container  |

## When to Use This Skill

Use this skill when:

- CSS-first configuration with `@import "tailwindcss"`, `@theme`, `@utility`
- Utility-first styling with utility classes
- Grid layouts with `grid-cols-*`, `col-span-*`
- Container queries with `@container`, `@min-*`, `@max-*`
- Custom utilities with `@utility` directive
- Custom plugins with `@plugin` directive
- Framework integration (React, Vue, Svelte, Next.js, Vite)

## Quick Reference

### Tailwind v4 Import

```css
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --font-sans: "Inter", sans-serif;
}
```

### Custom Utilities (@utility)

```css
@utility text-balance {
  text-wrap: balance;
}
```

### Custom Plugin (@plugin)

```css
@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
```

### Container Queries

```jsx
<div class="@container">
  <div class="@md:flex @lg:grid gap-4">Adapts to container size</div>
</div>
```

### Grid Layout

```jsx
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">Wide (2 cols)</div>
  <div class="row-span-2">Tall (2 rows)</div>
  <div>Item</div>
  <div>Item</div>
</div>
```

## Best Practices

1. Use `@import "tailwindcss"` instead of `@tailwind` directives
2. Configure theme with CSS variables in `@theme { }`
3. Use `@utility` for custom utilities in v4
4. Use `@plugin` for official plugins
5. Use container queries (`@container`) for component-responsive layouts
6. Migrate from v3: convert `tailwind.config.js` to CSS `@theme`

## Framework Integration

- **SvelteKit**: Use `@tailwindcss/vite` plugin
- **Next.js**: Use `@tailwindcss/postcss`
- **React/Vue**: Use `@tailwindcss/vite`

## References

- [Tailwind v4 Documentation](https://tailwindcss.com/docs)
- [Migration Guide](https://tailwindcss.com/docs/upgrade-guide)

See `references/` folder for detailed documentation:

- references/configuration.md - Complete v4 setup guide
- references/grid-layouts.md - All grid patterns
- references/container-queries.md - Container query usage
- references/custom-utilities.md - @utility directive
- references/plugins.md - @plugin system
- references/variants.md - All variants (hover, focus, dark, etc.)
- references/best-practices.md - Performance and organization tips
- references/common-patterns.md - Card, Form, Navigation patterns
- references/framework-integration.md - Per-framework setup
- references/troubleshooting.md - Common issues and fixes

_Last updated: 2026-01-03 for Tailwind CSS v4_