--- name: tailwindcss-framework-integration description: Tailwind CSS integration guide for React, Vue, Next.js, and other frameworks --- # Tailwind CSS Framework Integration ## React with Vite ### Setup ```bash # 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 ```javascript \/\/ vite.config.ts import { defineConfig } from 'vite' import react from '@vitejs\/plugin-react' import tailwindcss from '@tailwindcss\/vite' export default defineConfig({ plugins: [react(), tailwindcss()] }) ``` ```css \/* src\/index.css *\/ @import "tailwindcss"; ``` ```tsx \/\/ 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( <\/React.StrictMode> ) ``` ### Component Example ```tsx \/\/ 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 (