tailwindcss
Utility-first CSS framework for rapidly building custom interfaces with composed utility classes.
- Covers layout (flexbox, grid, positioning, sizing, spacing), transforms, typography, visual effects, and interactivity through organized utility categories
- Supports responsive design with mobile-first breakpoints, container queries, and conditional variants for state, pseudo-classes, and media queries
- Tailwind v4 introduces CSS-first configuration using theme variables and directives (
@theme,@utility,@custom-variant) for easier design system customization - Includes dark mode support, custom style and utility creation, and content detection for automatic class scanning
Tailwind CSS
The skill is based on Tailwind CSS v4.1.18, generated at 2026-01-28.
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Instead of writing custom CSS, you compose designs using utility classes directly in your markup. Tailwind v4 introduces CSS-first configuration with theme variables, making it easier to customize your design system.
Core References
| Topic | Description | Reference |
|---|---|---|
| Installation | Vite, PostCSS, CLI, and CDN setup | core-installation |
| Utility Classes | Understanding Tailwind's utility-first approach and styling elements | core-utility-classes |
| Theme Variables | Design tokens, customizing theme, and theme variable namespaces | core-theme |
| Responsive Design | Mobile-first breakpoints, responsive variants, and container queries | core-responsive |
| Variants | Applying utilities conditionally with state, pseudo-class, and media query variants | core-variants |
| Preflight | Tailwind's base styles and how to extend or disable them | core-preflight |
Layout
More from hairyf/skills
hairy-utils
Comprehensive skills for working with @hairy/utils core utilities
891motion
Motion animation library for JavaScript, React and Vue. Use when creating animations, gestures, layout transitions, scroll-linked effects, or working with motion values and animation controls.
763next
Next.js framework for building React applications with App Router, Server Components, and optimized performance. Use when working with Next.js apps, routing, data fetching, caching, Server Actions, or building full-stack React applications.
714react-use
Collection of essential React Hooks for sensors, UI, animations, side-effects, lifecycles, and state management
692valtio
Valtio proxy state management for React and vanilla JavaScript. Use when creating reactive state, managing application state, or working with proxy-based state management.
636valtio-define
Comprehensive skills for working with valtio-define
615