Tailwind with Frameworks

Every framework integration takes three steps: register Tailwind 5,202 's Vite 25,978 or PostCSS 238,379 plugin, write @import "tailwindcss"; in one CSS file, and import that file once at the root of the app. Utilities are plain strings with no runtime, so they work unchanged with server rendering, static generation and islands (Rendering Strategies), unlike many CSS-in-JS libraries (CSS Modules and CSS-in-JS).

Where Tailwind plugs into each framework (install tailwindcss too)
Framework	Install	Tailwind CSS file	Imported from
React 7,897 (Vite)	@tailwindcss/vite	src/index.css	src/main.jsx
Next.js 10,514	@tailwindcss/postcss postcss	app/globals.css	app/layout.tsx
Vue 5,482 (Vite)	@tailwindcss/vite	src/style.css	src/main.js
SvelteKit 36,701	@tailwindcss/vite	src/app.css	src/routes/+layout.svelte
Astro 17,728	@tailwindcss/vite	src/styles/global.css	a layout's frontmatter
Laravel 2,157	@tailwindcss/vite	resources/css/app.css	@vite() in a Blade layout

Two need no setup: npx create-next-app@latest my-app --yes (Next.js 16) enables Tailwind by default, through the PostCSS plugin of Installation Options, and every new Laravel 13 application ships with Tailwind. Vite-based frameworks add tailwindcss() to the plugins array of vite.config.js; Astro nests it as vite: { plugins: [tailwindcss()] } in astro.config.mjs, and SvelteKit lists it before sveltekit(). Laravel's stylesheet also names Blade templates that sit outside default source detection (Class Detection (@source)):

resources/css/app.css in a Laravel projectCSS

@import "tailwindcss";
@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";
@source "../**/*.blade.php";
@source "../**/*.js";

Conditional classes in each template language

Each framework has a clsx-style syntax for toggling classes. Always write complete class names: the scanner reads source text, so a template literal such as bg-${tone}-100 generates nothing, while a lookup object containing 'bg-rose-100' works.

Conditional class syntax (Svelte 36,701 and Astro use clsx 9,844 internally)
Framework	Syntax
React	className={cn('px-3', active && 'bg-sky-600')} (Plugins and Ecosystem)
Vue	:class="['px-3', { 'bg-sky-600': active }]"
Svelte 5.16+	class={['px-3', active && 'bg-sky-600']}
Astro	class:list={['px-3', { 'bg-sky-600': active }]}
Laravel Blade	@class(['px-3', 'bg-sky-600' => $active])

MENU

Conditional classes in each template language