# Tailwind CSS v4 — Utility-First CSS Framework

> The most popular utility-first CSS framework, now with v4 engine rewritten in Rust. 10x faster builds, automatic content detection, and zero-config setup. 90,000+ GitHub stars.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
# New project
npm install tailwindcss @tailwindcss/vite
```

```css
/* app.css */
@import "tailwindcss";
```

```html
<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-lg">
  <img class="w-12 h-12 rounded-full" src="avatar.jpg" alt="User">
  <div>
    <h3 class="text-lg font-semibold text-gray-900">Alice Johnson</h3>
    <p class="text-sm text-gray-500">Software Engineer</p>
  </div>
</div>
```

No config file needed — Tailwind v4 auto-detects your content files.

---

## Intro

Tailwind CSS is the most popular utility-first CSS framework with 90,000+ GitHub stars. Version 4 features a new engine rewritten in Rust delivering 10x faster builds, automatic content detection (no `tailwind.config.js` needed), and CSS-first configuration. Instead of writing custom CSS, compose designs with utility classes like `flex`, `p-4`, `text-lg`, and `bg-blue-500`. AI coding tools like Cursor, v0, and Claude Code generate Tailwind by default. Best for any web project that wants rapid, consistent styling. Works with: React, Vue, Svelte, Next.js, Astro, any HTML. Setup time: under 1 minute.

---

## What Changed in v4

| Feature | v3 | v4 |
|---------|----|----|
| Config | `tailwind.config.js` | CSS-first `@theme` |
| Content detection | Manual `content: [...]` | Automatic |
| Build speed | Fast | 10x faster (Rust) |
| Custom values | Config file | `text-[14px]` inline |
| Dark mode | `darkMode: 'class'` | Automatic |

### Zero-Config Setup

```css
/* Just import — no config file needed */
@import "tailwindcss";
```

Tailwind v4 automatically finds and scans your template files.

### CSS-First Configuration

```css
@import "tailwindcss";

@theme {
  --color-brand: #3b82f6;
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}
```

### Common Patterns

**Card:**
```html
<div class="rounded-2xl bg-white p-6 shadow-md dark:bg-gray-800">
  <h2 class="text-xl font-bold">Title</h2>
  <p class="mt-2 text-gray-600 dark:text-gray-300">Description</p>
</div>
```

**Responsive Grid:**
```html
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <!-- cards -->
</div>
```

**Flex Layout:**
```html
<div class="flex items-center justify-between">
  <span>Left</span>
  <span>Right</span>
</div>
```

### AI-Native
Tailwind is the default styling output for AI tools:
- **v0.dev** generates Tailwind + shadcn/ui
- **Cursor** writes Tailwind when asked for styling
- **Claude Code** uses Tailwind in web projects
- **Bolt.new** defaults to Tailwind

### Key Stats
- 90,000+ GitHub stars
- v4 engine rewritten in Rust
- 10x faster builds
- Zero-config automatic detection
- AI tools' default CSS framework

### FAQ

**Q: What is Tailwind CSS?**
A: A utility-first CSS framework where you style elements with classes like `flex`, `p-4`, `text-lg` instead of writing custom CSS. Version 4 is 10x faster with zero config.

**Q: Is Tailwind free?**
A: Yes, fully open-source under MIT license.

**Q: Do I still need tailwind.config.js in v4?**
A: No, v4 uses CSS-first configuration with `@theme` and automatic content detection. Config files are optional.

---

## Source & Thanks

> Created by [Adam Wathan](https://github.com/adamwathan) and [Tailwind Labs](https://github.com/tailwindlabs). Licensed under MIT.
>
> [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — ⭐ 90,000+

Thanks for making CSS productive and AI-friendly.

---

<!-- ZH -->


## Quick Use

```bash
npm install tailwindcss @tailwindcss/vite
```

```css
/* app.css */
@import "tailwindcss";
```

No config file needed — v4 auto-detects content files.

---

## Intro

Tailwind CSS is the most popular utility-first CSS framework, with 90,000+ GitHub stars. The v4 engine was rewritten in Rust, making builds 10x faster and enabling zero-config auto-detection. AI tools (v0, Cursor, Claude Code) output Tailwind by default.

---

## Source & Thanks

> Created by [Tailwind Labs](https://github.com/tailwindlabs). Licensed under MIT.
>
> [tailwindcss](https://github.com/tailwindlabs/tailwindcss) — ⭐ 90,000+


---
Source: https://tokrepo.com/en/workflows/tailwind-css-v4-utility-first-css-framework-46f11f5d
Author: AI Open Source