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 Guides

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.

  

• SolidJS

  A tool for building simple, performant, and reactive user interfaces.

  

• SvelteKit

  The fastest way to build apps of all sizes with Svelte.js.

  

• Angular

  Platform for building mobile and desktop web applications.

  

• Ruby on Rails

  Full-stack framework with all the tools needed to build amazing web apps.

  

• Remix

  Full stack framework focused on web fundamentals and modern UX.

  

• Phoenix

  A framework to build rich, interactive applications with Elixir.

  

• Parcel

  The zero-configuration build tool for the web.

  

• Symfony

  A PHP framework to create websites and web applications.

  

• Meteor

  The full stack JavaScript framework for developing cross-platform apps.

  

• 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.