Installation

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

Editor Setup

Plugins and configuration settings that can improve the developer experience when working with Tailwind CSS. We maintain an official Prettier plugin for Tailwind CSS that automatically sorts your classes following our recommended class order. It works seamlessly with custom Tailwind configurations, and because it's just a Prettier plugin, it works anywhere Prettier works — including every popular editor and IDE, and of course on the command line.

Using with Preprocessors

Since Tailwind is a PostCSS plugin, there's nothing stopping you from using it with Sass, Less, Stylus, or other preprocessors, just like you can with other PostCSS plugins like Autoprefixer. It's important to note that you don't need to use a preprocessor with Tailwind — you typically write very little CSS on a Tailwind project anyways so using a preprocessor just isn't as beneficial as it would be in a project where you write a lot of custom CSS.

Optimizing for Production

Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project. For the smallest possible production build, we recommend minifying your CSS with a tool like cssnano, and compressing your CSS with Brotli.

Responsive Design

Every utility class in Tailwind can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

Dark Mode

Now that dark mode is a first-class feature of many operating systems, it's becoming more and more common to design a dark version of your website to go along with the default design. To make this as easy as possible, Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled.

Reusing Styles

Tailwind encourages a utility-first workflow, where designs are implemented using only low-level utility classes. This is a powerful way to avoid premature abstraction and the pain points that come with it. But of course as a project grows, you'll inevitably find yourself repeating common utility combinations to recreate the same design in many different places.