Tailwind CSS Framework Integration React with Vite Setup

Create React + Vite project

npm create vite@latest my-app -- --template react-ts cd my-app

Install Tailwind CSS

npm install -D tailwindcss @tailwindcss/vite

Configuration // vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite'

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

/ src/index.css / @import "tailwindcss";

// src/main.tsx import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render( )

Component Example // src/components/Button.tsx interface ButtonProps { variant?: 'primary' | 'secondary' | 'outline' size?: 'sm' | 'md' | 'lg' children: React.ReactNode onClick?: () => void }

const variants = { primary: 'bg-blue-600 text-white hover:bg-blue-700', secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300', outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50' }

const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-base', lg: 'px-6 py-3 text-lg' }

export function Button({ variant = 'primary', size = 'md', children, onClick }: ButtonProps) { return ( inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed ${variants[variant]} ${sizes[size]}} > {children} ) }

Next.js Setup (App Router)

Create Next.js project (Tailwind included by default)

npx create-next-app@latest my-app cd my-app

If adding to existing project:

npm install -D tailwindcss @tailwindcss/postcss

Configuration // postcss.config.mjs export default { plugins: { '@tailwindcss/postcss': {} } }

/ app/globals.css / @import "tailwindcss";

@theme { --color-primary: oklch(0.6 0.2 250); }

// app/layout.tsx import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) }

Server Components

Tailwind works seamlessly with React Server Components:

// app/page.tsx (Server Component) export default function Home() { return (

Dark Mode with next-themes npm install next-themes

// app/providers.tsx 'use client'

import { ThemeProvider } from 'next-themes'

export function Providers({ children }: { children: React.ReactNode }) { return ( {children} ) }

// app/layout.tsx import { Providers } from './providers' import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) }

/ globals.css - Add dark mode variant / @import "tailwindcss"; @custom-variant dark (&:where(.dark, .dark *));

Vue 3 Setup with Vite npm create vue@latest my-app cd my-app

npm install -D tailwindcss @tailwindcss/vite

Configuration // vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import tailwindcss from '@tailwindcss/vite'

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

/ src/assets/main.css / @import "tailwindcss";

// src/main.ts import { createApp } from 'vue' import App from './App.vue' import './assets/main.css'

createApp(App).mount('#app')

Component Example

Scoped Styles with @reference

Alternative: CSS Variables

Nuxt 3 Setup npx nuxi init my-app cd my-app

npm install -D tailwindcss @tailwindcss/postcss

Configuration // postcss.config.mjs export default { plugins: { '@tailwindcss/postcss': {} } }

/ assets/css/main.css / @import "tailwindcss";

// nuxt.config.ts export default defineNuxtConfig({ css: ['~/assets/css/main.css'] })

Svelte / SvelteKit Setup npm create svelte@latest my-app cd my-app

npm install -D tailwindcss @tailwindcss/vite

Configuration // vite.config.js import { sveltekit } from '@sveltejs/kit/vite' import tailwindcss from '@tailwindcss/vite' import { defineConfig } from 'vite'

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

/ src/app.css / @import "tailwindcss";

Component Example

<button class="px-4 py-2 rounded-lg font-medium transition-colors {variant === 'primary' ? 'bg-blue-600 text-white hover:bg-blue-700' : ''} {variant === 'secondary' ? 'bg-gray-200 text-gray-900 hover:bg-gray-300' : ''}"

Astro Setup npm create astro@latest my-app cd my-app

npx astro add tailwind

Manual Setup npm install -D tailwindcss @tailwindcss/vite

// astro.config.mjs import { defineConfig } from 'astro/config' import tailwindcss from '@tailwindcss/vite'

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

/ src/styles/global.css / @import "tailwindcss";

import '../styles/global.css'