Tailwind CSS Development

When to Apply

Activate this skill when:

• Adding styles to components or pages

• Working with responsive design

• Implementing dark mode

• Extracting repeated patterns into components

• Debugging spacing or layout issues

Documentation

Use search-docs for detailed Tailwind CSS v4 patterns and documentation.

Basic Usage

• Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.

• Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).

• Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.

Tailwind CSS v4 Specifics

• Always use Tailwind CSS v4 and avoid deprecated utilities.

• corePlugins is not supported in Tailwind v4.

CSS-First Configuration

In Tailwind v4, configuration is CSS-first using the @theme directive — no separate tailwind.config.js file is needed:

Import Syntax

In Tailwind v4, import Tailwind with a regular CSS @import statement instead of the @tailwind directives used in v3:

Replaced Utilities

Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.

Deprecated Replacement

bg-opacity-* bg-black/*

text-opacity-* text-black/*

border-opacity-* border-black/*

divide-opacity-* divide-black/*

ring-opacity-* ring-black/*

placeholder-opacity-* placeholder-black/*

flex-shrink-* shrink-*

flex-grow-* grow-*

overflow-ellipsis text-ellipsis

decoration-slice box-decoration-slice

decoration-clone box-decoration-clone

Spacing

Use gap utilities instead of margins for spacing between siblings:

Dark Mode

If existing pages and components support dark mode, new pages and components must support it the same way, typically using the dark: variant:

Common Patterns

Flexbox Layout

Grid Layout

Common Pitfalls

• Using deprecated v3 utilities (bg-opacity-, flex-shrink-, etc.)

• Using @tailwind directives instead of @import "tailwindcss"

• Trying to use tailwind.config.js instead of CSS @theme directive

• Using margins for spacing between siblings instead of gap utilities

• Forgetting to add dark mode variants when the project uses dark mode