Installation
Get started with Tailwind CSS
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
It's fast, flexible, and reliable — with zero-runtime.
Framework-specific guides that cover our recommended approach to installing Tailwind CSS in a number of popular environments.
Next.js
Full-featured React framework with great developer experience.
Laravel
PHP web application framework with expressive, elegant syntax.
Vite
Fast and modern development server and build tool.
Nuxt.js
Intuitive Vue framework for building universal applications.
Gatsby
Framework for building static sites with React and GraphQL.
Create React App
CLI tool for scaffolding a new single-page React application.
Don't see your framework of choice? Try using Tailwind CLI or installing Tailwind as a PostCSS plugin instead.
What to read next
Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.
Utility-First Fundamentals
Using a utility-first workflow to build complex components from a constrained set of primitive utilities.
Responsive Design
Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.
Hover, Focus & Other States
Style elements in interactive states like hover, focus, and more using conditional modifiers.
Dark Mode
Optimize your site for dark mode directly in your HTML using the dark mode modifier.
Reusing Styles
Manage duplication and keep your projects maintainable by creating reusable abstractions.
Customizing the Framework
Customize the framework to match your brand and extend it with your own custom styles.