Utility-first CSS framework for rapid UI development with responsive design, component patterns, and production optimization. Master core utilities, dark mode, customization, and modern component composition for building beautiful, performant user interfaces.
Master the utility-first CSS framework for rapidly building modern user interfaces.
# Create new project
npm create vite@latest my-project
cd my-project
# Install Tailwind CSS
npm install tailwindcss @tailwindcss/vite
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()],
})
/* src/style.css */
@import "tailwindcss";
<!-- index.html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/style.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello, Tailwind CSS!
</h1>
</body>
</html>
# Install Tailwind CLI
npm install -D @tailwindcss/cli
# Create your CSS file
echo '@import "tailwindcss";' > src/input.css
# Start build process with watch mode
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
<!-- Link compiled CSS in HTML -->
<link href="/src/output.css" rel="stylesheet">
# Install dependencies
npm install tailwindcss @tailwindcss/vite
/* app/globals.css */
@import "tailwindcss";
// next.config.js
import tailwindcss from '@tailwindcss/vite'
export default {
experimental: {
vite: {
plugins: [tailwindcss()],
},
},
}
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss(), react()],
})
// nuxt.config.ts
import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
vite: {
plugins: [tailwindcss()],
},
})
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
export default {
plugins: [tailwindcss(), sveltekit()],
};
// astro.config.mjs
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
vite: {
plugins: [tailwindcss()]
}
});
Instead of writing custom CSS, compose utilities in your HTML:
<!-- Traditional CSS approach -->
<style>
.button {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
}
.button:hover {
background-color: darkblue;
}
</style>
<button class="button">Click me</button>
<!-- Tailwind utility-first approach -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Click me
</button>
Mobile-first responsive design with breakpoint prefixes:
<!-- Stack on mobile, horizontal on tablet, 3 columns on desktop -->
<div class="flex flex-col md:flex-row lg:grid lg:grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Apply styles for different states:
<button class="
bg-blue-500 text-white
hover:bg-blue-600
focus:outline-2 focus:outline-blue-400
active:bg-blue-700
disabled:opacity-50
">
Interactive Button
</button>
Automatic or manual dark mode support:
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<p class="text-gray-600 dark:text-gray-400">
Content that adapts to dark mode
</p>
</div>
<!-- Flexbox -->
<div class="flex items-center justify-between">...</div>
<!-- Grid -->
<div class="grid grid-cols-3 gap-4">...</div>
<!-- Positioning -->
<div class="relative">
<div class="absolute top-0 right-0">...</div>
</div>
<!-- Padding and margin -->
<div class="p-4 m-2">All sides</div>
<div class="px-4 py-2">Horizontal and vertical</div>
<div class="pt-8 pb-4 pl-6 pr-2">Individual sides</div>
<!-- Negative margins -->
<div class="-mt-4">Negative margin top</div>
<!-- Space between -->
<div class="flex space-x-4">Horizontal spacing</div>
<!-- Font sizes -->
<p class="text-sm">Small text (0.875rem)</p>
<p class="text-base">Base text (1rem)</p>
<h1 class="text-4xl">Large heading (2.25rem)</h1>
<!-- Font weights -->
<p class="font-normal">Normal (400)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<!-- Text colors -->
<p class="text-gray-900 dark:text-white">Primary text</p>
<p class="text-gray-600 dark:text-gray-400">Secondary text</p>
<!-- Background -->
<div class="bg-blue-500">Solid background</div>
<div class="bg-blue-500/50">50% opacity</div>
<!-- Gradients -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
Gradient background
</div>
<!-- Borders -->
<div class="border border-gray-300">Default border</div>
<div class="border-2 border-blue-500">Thick blue border</div>
<!-- Shadows -->
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<!-- Rounded corners -->
<div class="rounded">0.25rem radius</div>
<div class="rounded-lg">0.5rem radius</div>
<div class="rounded-full">Full circle/pill</div>
<!-- Opacity -->
<div class="opacity-50">50% opacity</div>
<div class="opacity-0 hover:opacity-100">Fade in on hover</div>
/* app.css */
@import "tailwindcss";
@theme {
/* Custom colors */
--color-primary: #6366f1;
--color-secondary: #8b5cf6;
/* Custom spacing */
--spacing-18: 4.5rem;
/* Custom fonts */
--font-display: "Montserrat", sans-serif;
/* Custom breakpoints */
--breakpoint-xs: 30rem;
--breakpoint-3xl: 120rem;
}
/* app.css */
@import "tailwindcss";
@utility content-auto {
content-visibility: auto;
}
@utility scrollbar-hidden {
&::-webkit-scrollbar {
display: none;
}
}
Start with mobile styles, add breakpoints for larger screens:
<!-- Good: Mobile-first -->
<div class="w-full md:w-1/2 lg:w-1/3">
<!-- Avoid: Desktop-first -->
<div class="lg:w-1/3 md:w-1/2 w-full">
For repeated patterns, create reusable components:
// React component
function Button({ children, variant = 'primary' }) {
const variants = {
primary: 'bg-blue-500 hover:bg-blue-600',
secondary: 'bg-gray-200 hover:bg-gray-300'
}
return (
<button className={`px-4 py-2 rounded ${variants[variant]}`}>
{children}
</button>
)
}
Always use appropriate HTML elements:
<!-- Good -->
<article class="bg-white rounded-lg p-6">
<h2 class="text-2xl font-bold">Title</h2>
<p class="text-gray-600">Content</p>
</article>
<!-- Avoid -->
<div class="bg-white rounded-lg p-6">
<div class="text-2xl font-bold">Title</div>
<div class="text-gray-600">Content</div>
</div>
Always include focus states and ARIA attributes:
<button
class="focus:outline-2 focus:outline-offset-2 focus:outline-blue-500"
aria-label="Close dialog"
>
<span class="sr-only">Close</span>
<svg>...</svg>
</button>
See EXAMPLES.md for complete component examples including:
<html>For issues or questions:
Version: 1.0.0 Last Updated: October 2025 Maintained by: Tailwind Labs
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer