tailwindcss
Tailwind CSS is a utility-first framework that lets you compose custom designs by applying utility classes directly in your markup instead of writing traditional CSS. It includes responsive design utilities, theme customization via CSS variables, and support for dark mode and interactive states.
Tailwind CSS helps you style web applications by composing designs with utility classes directly in your markup.
AI-generated summary based on this skill's SKILL.md
Install
hairyf/skills/tailwindcss · repository language: MDX
git clone https://github.com/hairyf/skills
cp -r skills/skills/tailwindcss ~/.claude/skills/tailwindcssnpx skillfed install hairyf/skills/tailwindcssFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are tailwind css utility classes?
Tailwind CSS utility classes are small, single-purpose CSS classes that you apply directly in your HTML markup to style elements. Instead of writing custom CSS rules, Tailwind CSS provides pre-built utilities like `p-4` for padding, `text-lg` for font size, and `bg-blue-500` for background color. This utility-first approach lets you compose complex designs by combining multiple classes without leaving your markup.
How do I style with tailwind and use responsive design?
Tailwind CSS makes responsive styling easy through breakpoint prefixes. Use prefixes like `sm:`, `md:`, `lg:`, and `xl:` before utility classes to apply styles at specific screen sizes—for example, `md:text-lg` applies larger text on medium screens and up. Tailwind CSS also provides utilities for flexbox and grid layouts, letting you build responsive layouts by combining classes like `flex`, `grid`, `gap-4`, and responsive variants to adapt your design across all device sizes.
How can I customize Tailwind CSS with theme variables?
Tailwind CSS lets you customize your design system through theme configuration. Edit your `tailwind.config.js` file to define custom colors, spacing, typography, and other design tokens. You can also use CSS variables to create theme tokens that support features like dark mode. Tailwind CSS applies these custom values to generate utility classes, so your entire design system stays consistent and maintainable.
What is Tailwind CSS and how do I set it up?
Tailwind CSS is a utility-first framework that lets you compose custom designs by applying utility classes directly in your markup instead of writing traditional CSS. To get started, install Tailwind CSS via npm, create a configuration file, and add Tailwind's directives to your CSS. Tailwind CSS includes responsive design utilities, theme customization via CSS variables, and support for dark mode and interactive states out of the box.
What changed in tailwind css migration from v3 to v4?
Tailwind CSS v4 introduces breaking changes and new features compared to v3. Key updates include changes to how you import and configure Tailwind, improvements to the CSS engine, and refinements to utility class behavior. Review the official migration guide to understand which changes affect your project, update your configuration files, and test your styles thoroughly when upgrading from Tailwind CSS v3 to v4.
Does Tailwind CSS support dark mode and custom utilities?
Yes, Tailwind CSS includes built-in dark mode support through the `dark:` variant, letting you apply different styles when dark mode is active. You can also create custom utilities by extending your Tailwind CSS configuration with plugin functions or by using the `@layer` directive in your CSS. This flexibility lets you add project-specific utilities while maintaining consistency with Tailwind's design system.
SKILL.md
rendered from the published skill — quoted content, verbatim
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, |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 15 files
skills/tailwindcss/GENERATION.md
skills/tailwindcss/SKILL.md
skills/tailwindcss/references/best-practices-utility-patterns.md
skills/tailwindcss/references/core-installation.md
skills/tailwindcss/references/core-preflight.md
skills/tailwindcss/references/core-responsive.md
skills/tailwindcss/references/core-theme.md
skills/tailwindcss/references/core-utility-classes.md
skills/tailwindcss/references/core-variants.md
skills/tailwindcss/references/effects-form-controls.md
skills/tailwindcss/references/effects-scroll-snap.md
skills/tailwindcss/references/effects-transition-animation.md
skills/tailwindcss/references/effects-visibility-interactivity.md
skills/tailwindcss/references/features-content-detection.md
skills/tailwindcss/references/features-custom-styles.md