Tailwind

Tailwind CSS v4

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

Quick Summary

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

@import "tailwindcss";

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

Custom Utilities (@utility)

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

Custom Plugin (@plugin)

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

Container Queries

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

Grid Layout

<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
• Migration 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