Setting Up Tailwind with Vite, Next.js and the Play CDN

In real projects Tailwind lives inside a build tool, and the wiring differs from one tool to the next. This lesson walks through the three setups you will meet most often — the official Vite plugin, the PostCSS plugin used by Next.js, and the zero-build Play CDN. After finishing it you will be able to pick the right integration for any project and get a styled page within minutes.

Which integration should you use?

Tailwind v4 ships several official entry points. They all produce the same CSS; the difference is how the compiler is attached to your tooling.

| Integration | Package | Best for | |---|---|---| | Vite plugin | @tailwindcss/vite | Vite, React, Vue, Svelte, Astro | | PostCSS plugin | @tailwindcss/postcss | Next.js, Angular, webpack pipelines | | Standalone CLI | @tailwindcss/cli | Static HTML, PHP, Django, no bundler | | Play CDN | @tailwindcss/browser | Demos and prototypes only |

Tailwind v4 targets modern browsers (Safari 16.4+, Chrome 111+, Firefox 128+) because it relies on cascade layers, @property and color-mix(). Older targets still need v3.

Vite (React, Vue, vanilla)

Vite is the fastest path. The plugin hooks straight into Vite's module graph, so no PostCSS configuration is needed.

bash

npm create vite@latest my-app -- --template react
cd my-app
npm install tailwindcss @tailwindcss/vite

javascript

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

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

Replace the contents of src/index.css with a single line, and confirm the file is imported from main.jsx:

css

@import "tailwindcss";

Run npm run dev and add class="text-3xl font-bold underline" to any element. It updates instantly because v4 scans your source files automatically — there is no content array to maintain.

Next.js (PostCSS)

Next.js runs a PostCSS pipeline, so it uses the PostCSS plugin. The simplest route is to let create-next-app do the work and answer "Yes" when it asks about Tailwind:

bash

npx create-next-app@latest my-site

The generator writes postcss.config.mjs:

javascript

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

It also writes app/globals.css, imported by the root layout, which starts with @import "tailwindcss";. Adding Tailwind to an existing Next.js app by hand means installing tailwindcss @tailwindcss/postcss postcss, creating that config file, and adding the import to your global stylesheet. @tailwindcss/vite is ignored by Next.js.

The Play CDN

For a quick prototype you can skip npm entirely. The Play CDN compiles utilities in the browser:

html

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @theme {
    --color-brand: #0f766e;
  }
</style>
<button class="rounded-md bg-brand px-4 py-2 text-white">Save</button>

The <style type="text/tailwindcss"> block accepts the same @theme, @utility and @apply syntax as a normal stylesheet. The CDN is for development only: it ships the whole compiler to every visitor, delays first paint, and produces no cacheable CSS file.

Common mistakes

Using the v3 directives @tailwind base; @tailwind components; @tailwind utilities; — v4 replaces them with the single @import "tailwindcss".
Creating tailwind.config.js and expecting it to be read. v4 ignores it unless you add @config "./tailwind.config.js"; to your CSS.
Running the Vite plugin and the PostCSS plugin together, which compiles every stylesheet twice.
Placing the @import in a component stylesheet instead of the global entry file, so utilities exist only on some pages.

If a class has no effect, open the served stylesheet in the network tab: it should begin with @layer theme, base, components, utilities. If it does not, the compiler is not running on that file.

Key Takeaways

Tailwind v4 offers a Vite plugin, a PostCSS plugin and a CLI for builds, plus the Play CDN for prototypes.
Vite projects need only @tailwindcss/vite in vite.config.js and @import "tailwindcss" in the entry CSS.
Next.js uses @tailwindcss/postcss through postcss.config.mjs; create-next-app sets it up for you.
The Play CDN accepts <style type="text/tailwindcss"> for customization but is development-only.
v4 needs no content array and no tailwind.config.js; source files are detected automatically.

Next lesson: Reading Tailwind Classes: Naming Conventions, Variants and Editor Tooling — learn how to decode any utility class and configure your editor for autocomplete and class sorting.