Tailwind CSS home page
  1. Getting Started
  2. Install Tailwind CSS using PostCSS

安装

Installing Tailwind CSS as a PostCSS plugin

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

  1. Install Tailwind CSS

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

    Terminal
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init

  2. Add Tailwind to your PostCSS configuration

    Add tailwindcss and autoprefixer to your postcss.config.js file, or wherever PostCSS is configured in your project.

    postcss.config.js
    module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

  3. Configure your template paths

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

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

  4. Add the Tailwind directives to your CSS

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

    main.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. Start your build process

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

    Terminal
    npm run dev

  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.

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/main.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Are 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 guides

接下来

熟悉一些让 Tailwind CSS 区别于 传统方式编写 CSS 的核心概念。

  • 工具类优先（Utility-First）的基本原理

    遵循工具类优先的流程（utility-first workflow）并基于一套具有约束性的基本工具类来构建 复杂的组件。

  • 响应式设计

    使用响应式布局标识符（responsive modifiers）构建完全支持响应式布局的用户界面，以适应任何大小的 屏幕。

  • 鼠标悬停、聚焦以及其他状态

    使用条件标识符（conditional modifiers）可以为处于交互状态（如鼠标悬停、聚焦等）中的元素设置 样式。

  • 夜间模式（Dark Mode）

    通过在 HTML 代码中添加夜间模式标识符（dark mode modifier）直接让你的网站支持夜间模式。

  • 重用样式

    通过创建可重用的抽象来管理冗余并保持项目的可维护性。

  • 自定义整个框架

    通过自定义整个框架使其匹配你的需求；使用你的自定义样式对其进行扩展。