tailwind

name

tailwind

description

Tailwind CSS v4 performance optimization and best practices guidelines (formerly tailwindcss-v4-style). This skill should be used when writing, reviewing, or refactoring Tailwind CSS v4 code to ensure optimal build performance, minimal CSS output, and correct usage of v4 features. Triggers on tasks involving Tailwind configuration, @theme directive, utility classes, responsive design, dark mode, container queries, or CSS generation optimization.

Community Tailwind CSS v4 Best Practices

Comprehensive performance optimization guide for Tailwind CSS v4 applications. Contains 44 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

• Configuring Tailwind CSS v4 build tooling (Vite plugin, PostCSS, CLI)
• Writing or migrating styles using v4's CSS-first approach
• Optimizing CSS bundle size and build performance
• Implementing responsive designs with breakpoints or container queries
• Setting up theming with @theme directive and design tokens

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Build Configuration	CRITICAL	build-
2	CSS Generation	CRITICAL	gen-
3	Bundle Optimization	HIGH	bundle-
4	Utility Patterns	HIGH	util-
5	Component Architecture	MEDIUM-HIGH	comp-