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

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

Tailwind CLI - 图1

  1. Install Tailwind CSS

    Install tailwindcss via npm, and create your tailwind.config.js file.

    Tailwind CLI - 图2

  2. Configure your template paths

    Add the paths to all of your template files in your tailwind.config.js file.

    Tailwind CLI - 图3

  3. Add the Tailwind directives to your CSS

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

    Tailwind CLI - 图4

  4. Start the Tailwind CLI build process

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

    Tailwind CLI - 图5

  5. Start using Tailwind in your HTML

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

    Tailwind CLI - 图6

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

  • Tailwind CLI - 图7

    Utility-First Fundamentals

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

  • Tailwind CLI - 图8

    Responsive Design

    Build fully responsive user interfaces that adapt to any screen size using responsive modifiers.

  • Tailwind CLI - 图9

    Hover, Focus & Other States

    Style elements in interactive states like hover, focus, and more using conditional modifiers.

  • Tailwind CLI - 图10

    Dark Mode

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

  • Tailwind CLI - 图11

    Reusing Styles

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

  • Tailwind CLI - 图12

    Customizing the Framework

    Customize the framework to match your brand and extend it with your own custom styles.