tailwind

name	tailwind
description	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.
license	MIT
compatibility	opencode
metadata	{"author":"OpenCode Community","version":"2.0","source":"https://tailwindcss.com/docs"}

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

@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