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.

Installation

• Tailwind CLI
• Using PostCSS
• Framework Guides
• Play CDN

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.