Tailwind
Master Tailwind CSS v4's CSS-first approach to rapid UI development with utility classes, design tokens, and modern CSS features. Learn theme configuration, dark mode implementation, container queries, component patterns, and shadcn/ui integration. Covers v3 migration and troubleshooting for build errors.
Tailwind helps you build responsive UIs quickly using utility-first CSS with v4's CSS-first configuration and design tokens.
AI-generated summary based on this skill's SKILL.md
Install
oakoss/agent-skills/tailwind · repository language: Python
git clone https://github.com/oakoss/agent-skills
cp -r agent-skills ~/.claude/skills/tailwindgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
npx skillfed install oakoss/agent-skills/tailwindFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use Tailwind utility classes to build responsive UIs quickly?
Tailwind enables rapid responsive UI development through utility-first CSS. Apply pre-built utility classes directly to HTML elements—like `flex`, `grid`, `p-4`, `text-lg`—to style components without writing custom CSS. Use responsive prefixes (`sm:`, `md:`, `lg:`) to adapt layouts across breakpoints. Tailwind's extensive utility library covers spacing, colors, typography, flexbox, grid, and animations, letting you compose complex designs by combining classes rather than switching between HTML and stylesheets.
What is Tailwind's class system and design approach?
Tailwind CSS uses a utility-first design approach, providing low-level utility classes that handle single CSS properties. Instead of semantic component classes, you compose utilities directly in markup. This methodology promotes consistency through design tokens (colors, spacing, typography scales) defined in your configuration. Tailwind's class system is systematic and predictable—spacing uses a consistent scale, colors follow a palette, and utilities map directly to CSS properties, making it faster to learn and apply than traditional CSS frameworks.
How do I configure and customize Tailwind for my specific project?
Tailwind's configuration file (`tailwind.config.js`) lets you customize the entire framework. Extend or override the default theme by modifying colors, spacing, typography, breakpoints, and more. Add custom utilities using the `@layer` directive or the plugin API. Configure content paths to tell Tailwind which files to scan for class names, enabling CSS purging. You can also set up dark mode, enable experimental features, and define custom variants—all without forking Tailwind's core.
How does Tailwind's responsive design work with breakpoints?
Tailwind provides responsive prefixes that apply styles at specific breakpoints: `sm`, `md`, `lg`, `xl`, and `2xl`. Prefix any utility with a breakpoint (e.g., `md:flex`, `lg:grid-cols-3`) to apply it only at that screen size and above. This mobile-first approach lets you build layouts that adapt fluidly. Tailwind also supports container queries with `@container` utilities, enabling components to respond to their parent's width rather than viewport size—ideal for reusable, context-aware UI patterns.
What are Tailwind's performance optimization and CSS bundle size strategies?
Tailwind optimizes bundle size through content-based purging: it scans your project files, generates only the utilities you use, and removes unused CSS. The JIT (Just-In-Time) compiler generates styles on-demand. Configure your `content` paths accurately to maximize purging effectiveness. Use Tailwind's built-in design tokens to avoid arbitrary values when possible. For further optimization, leverage CSS variables, minimize custom utilities, and consider lazy-loading component libraries. Modern Tailwind v4 uses CSS-first architecture for even leaner output.
Can I extend Tailwind with plugins and custom utilities?
Tailwind supports plugin development through its plugin API. Create plugins to add custom utilities, components, or variants. Use the `@layer` directive in your CSS to inject utilities into Tailwind's cascade at the appropriate level. Define custom utilities programmatically in `tailwind.config.js` using the `addUtilities` function. Plugins can also hook into theme values, generate responsive variants, and add pseudo-class utilities. This extensibility lets you build domain-specific utility sets while maintaining Tailwind's consistency and performance benefits.