Tailwind CSS 主页
  1. 入门
  2. 使用 PostCSS 安装 Tailwind CSS

安装

将 Tailwind CSS 作为 PostCSS 插件安装

将 Tailwind CSS 作为 PostCSS 插件安装是将其与 webpack、Rollup、Vite 和 Parcel 等构建工具集成最无缝的方式。

  1. 安装 Tailwind CSS

    通过 npm 安装 tailwindcss 及其对等依赖项，并创建 tailwind.config.js 文件。

    终端
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init

  2. 将 Tailwind 添加到您的 PostCSS 配置中

    将 tailwindcss 和 autoprefixer 添加到您的 postcss.config.js 文件中，或者在您的项目中配置 PostCSS 的任何位置。

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

  3. 配置您的模板路径

    在 tailwind.config.js 文件中添加所有模板文件的路径。

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

  4. 将 Tailwind 指令添加到您的 CSS 中

    将 @tailwind 指令添加到您的主 CSS 文件中的每个 Tailwind 层。

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

  5. 启动您的构建过程

    使用 npm run dev 或 package.json 文件中配置的任何命令运行您的构建过程。

    终端
    npm run dev

  6. 开始在您的 HTML 中使用 Tailwind

    确保您的编译后的 CSS 包含在 <head> 中（您的框架可能会为您处理此操作），然后开始使用 Tailwind 的实用程序类来设置您的内容样式。

    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>

遇到问题了吗？ 在不同的构建工具中，使用 PostCSS 设置 Tailwind 可能会有所不同。查看我们的框架指南，看看我们是否针对您的特定设置提供了更详细的说明。探索我们的框架指南

接下来阅读什么

熟悉一些使 Tailwind CSS 与编写传统 CSS 不同的核心概念。

  • 实用优先基础

    使用实用优先的工作流程从一组受限的原始实用程序构建复杂的组件。

  • 响应式设计

    使用响应式修饰符构建完全响应的用户界面，以适应任何屏幕尺寸。

  • 悬停、焦点和其他状态

    使用条件修饰符在悬停、焦点等交互状态下设置元素的样式。

  • 暗黑模式

    使用暗模式修饰符直接在您的 HTML 中优化您的网站以适应暗模式。

  • 重复使用样式

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

  • 自定义框架

    自定义框架以匹配您的品牌并使用您自己的自定义样式进行扩展。