Installation Options

All four methods run the same engine, which scans your files for class names (Under the Hood) and emits only the CSS they need. They differ in which tool hosts it: Vite 25,978 , PostCSS 238,379 , a command-line program or the browser.

The Vite plugin. For Vite projects (Build Tools and Bundlers), Tailwind 5,202 recommends its Vite plugin as faster than PostCSS:

Creating a Vite project with Tailwind CSSShell

npm create vite@latest my-project -- --template vanilla
cd my-project
npm install tailwindcss @tailwindcss/vite

Register the plugin, replace the contents of src/style.css with @import "tailwindcss"; (the starter's src/main.js already imports it), add utility classes to index.html and run npm 2,036 run dev.

vite.config.jsJavaScript

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({ plugins: [tailwindcss()] })

Building for productionShell

npm run build

Output

vite v8.3.0 building client environment for production...
dist/index.html                 0.50 kB │ gzip: 0.34 kB
dist/assets/index-BG7v3Vfp.css  6.71 kB │ gzip: 2.04 kB
dist/assets/index-_eDNpXas.js   0.67 kB │ gzip: 0.38 kB
✓ built in 241ms

The 6.71 kB stylesheet holds the Preflight reset, the theme variables in use and the few utilities on the page; unused classes never reach the output, so there is no purge step.

The PostCSS plugin and the CLI. Frameworks with their own PostCSS pipeline, such as Next.js 10,514 and Angular 42,088 , install tailwindcss @tailwindcss/postcss postcss and put export default { plugins: { '@tailwindcss/postcss': {} } } in postcss.config.mjs. Drop postcss-import and autoprefixer: Tailwind bundles @import rules and adds vendor prefixes itself through Lightning CSS.

Without a bundler (a PHP, Django 7,143 or plain HTML site), install tailwindcss @tailwindcss/cli and run npx @tailwindcss/cli -i ./src/style.css -o ./dist/output.css --watch, swapping --watch for --minify in production. The one-off build replies ≈ tailwindcss v4.3.3 and Done in 56ms. Without Node.js 2,131 , use the standalone executable from GitHub 29 releases (https://github.com/tailwindlabs/tailwindcss/releases/latest 97,716 ).

The Play CDN. The @tailwindcss/browser script compiles classes inside the page, and <style type="text/tailwindcss"> accepts directives such as @theme (Theme Variables). The demos in this chapter use it.

Tailwind from the Play CDNHTMLLive

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">@theme { --color-brand: #0369a1; }</style>
<div class="m-4 rounded-xl bg-sky-50 p-5 shadow-md">
  <h1 class="text-2xl font-bold text-brand">Hello, Tailwind!</h1>
  <p class="mt-1 text-slate-600">Compiled in the browser.</p>
</div>

Browser output of 6

MENU