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.

    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 if you want to use it without installing Node.js.

    1. Install Tailwind CSS

      Install via npm, and create your file.

      Terminal

    2. Configure your template paths

      tailwind.config.js

    3. Add the Tailwind directives to your CSS

      Add the directives for each of Tailwind’s layers to your main CSS file.

      src/input.css

    4. Start the Tailwind CLI build process

      Run the CLI tool to scan your template files for classes and build your CSS.

      Terminal

    5. Start using Tailwind in your HTML

      Add your compiled CSS file to the and start using Tailwind’s utility classes to style your content.

    Get familiar with some of the core concepts that make Tailwind CSS different from writing traditional CSS.

    • Using a utility-first workflow to build complex components from a constrained set of primitive utilities.

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

    • Optimize your site for dark mode directly in your HTML using the dark mode modifier.

    • Manage duplication and keep your projects maintainable by creating reusable abstractions.