# Tailwind

> Use when writing Tailwind CSS utility classes, compiling Tailwind bundles, or configuring Tailwind CSS v4 CSS-first themes and variables.

- Skill: `mahdtech/tailwind` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add mahdtech/tailwind`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mahdtech/tailwind/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: MAHDTech (https://skillmd.com/u/mahdtech)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mahdtech/tailwind

---


# Tailwind CSS v4

Guidelines for compiling stylesheet bundles and styling components using Tailwind CSS (utility-first styling framework). Consult the local [Tailwind CSS v4 Docs](resources/auto/docs.md) for full reference.

## Tailwind CSS v4 Key Rules

Tailwind CSS v4 introduces a completely redesigned compilation engine and configuration syntax:

1. **CSS-First Configuration:** Tailwind v4 abandons `tailwind.config.js` in favor of standard CSS syntax. Configure custom theme variables (colors, fonts, screens) inside `@theme` directive blocks directly in your CSS:

   ```css
   @import "tailwindcss";

   @theme {
     --color-primary: #1e3a8a;
     --color-surface: #f3f4f6;
     --font-sans: "Inter", sans-serif;
   }
   ```

2. **Standard Imports:** Use `@import "tailwindcss";` at the top of your stylesheet instead of old directives like `@tailwind base; @tailwind components; @tailwind utilities;`.

## Build & Compilation Commands

Use the Tailwind v4 CLI to compile utility classes:

- **Build once:** `tailwindcss -i <input.css> -o <output.css>`
- **Watch mode:** `tailwindcss -i <input.css> -o <output.css> --watch`
- **Minify output:** `tailwindcss -i <input.css> -o <output.css> --minify`

## Completion Criteria

The styling task is complete when:

1. The output CSS stylesheet compiles successfully without CLI error logs.
2. Custom theme variables are correctly defined under `@theme` and reflect properly on elements.
3. Utility styles are purged correctly and yield a responsive, optimized output bundle.