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

Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.

Using PostCSS - 图1

  1. Install Tailwind CSS

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

    Using PostCSS - 图2

  2. Add Tailwind to your PostCSS configuration

    Add tailwindcss and autoprefixer to your postcss.config.js file.

    Using PostCSS - 图3

  3. Configure your template paths

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

    Using PostCSS - 图4

  4. Add the Tailwind directives to your CSS

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

    Using PostCSS - 图5

  5. Start your build process

    Run your build process with npm run dev or whatever command is configured in your package.json file.

    Using PostCSS - 图6

  6. Start using Tailwind in your HTML

    Make sure your compiled CSS is included in the <head> (your framework might handle this for you), then start using Tailwind’s utility classes to style your content.

    Using PostCSS - 图7

Using PostCSS - 图8Are you stuck? Setting up Tailwind with PostCSS can be a bit different across different build tools. Check our framework guides to see if we have more specific instructions for your particular setup.Explore our framework guidesUsing PostCSS - 图9

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

  • Using PostCSS - 图10

    Utility-First Fundamentals

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

  • Using PostCSS - 图11

    Responsive Design

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

  • Using PostCSS - 图12

    Hover, Focus & Other States

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

  • Using PostCSS - 图13

    Dark Mode

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

  • Using PostCSS - 图14

    Reusing Styles

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

  • Using PostCSS - 图15

    Customizing the Framework

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