# Setting Up Tailwind CSS v4 — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/b-setup

> One import, automatic detection.

## CSS-first configuration

Tailwind v4 is configured in CSS. Add `@import "tailwindcss";` to your main stylesheet and use an integration: the **Vite plugin** (`@tailwindcss/vite`), the **PostCSS plugin** (`@tailwindcss/postcss`) or the standalone **CLI** (`@tailwindcss/cli`). Tailwind scans your project files automatically for class names (respecting .gitignore) and generates only the CSS you use. A `tailwind.config.js` file is no longer required; design tokens live in an `@theme` block in CSS.

## A minimal Vite setup

Based on the official installation steps; check the docs for your framework.

```javascript
// npm install tailwindcss @tailwindcss/vite

// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

/* src/style.css */
@import "tailwindcss";
```

## Use @source for files outside detection

If classes live in a package or folder that is ignored, add @source "../path"; so Tailwind scans it.

**Quiz:** How do you include Tailwind in a v4 stylesheet?

- [x] @import "tailwindcss";
- [ ] @tailwind everything;
- [ ] <script src="tailwind.css">
- [ ] require("tailwind")

*Answer:* @import "tailwindcss";. v4 uses a single CSS import.