Tailwind

This is a comprehensive rulebook for Tailwind CSS v4 with 44 rules organized by performance impact, from critical build configuration down to animation tweaks. You'd pull this in when setting up v4 projects, migrating from v3, or optimizing bundle sizes. It covers the CSS-first approach, the new @theme directive, OKLCH colors, and v4-specific syntax like parentheses for CSS variables. The priority system is genuinely useful because it tells you what actually matters for build performance versus what's just polish. Each rule links to detailed examples, though the real value is having someone distill v4's breaking changes and new patterns into actionable guidance instead of hunting through release notes.

skills.sh installs: 657
GitHub stars: 222
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add pproenca/dot-skills --skill tailwind --agent claude-code

Installs into .claude/skills of the current project.

Files

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-`
6	Theming & Design Tokens	MEDIUM	`theme-`
7	Responsive & Adaptive	MEDIUM	`resp-`
8	Animation & Transitions	LOW-MEDIUM	`anim-`