Tailwind CSS - 与预处理器一起使用

预处理器是一种扩展 CSS 并编译成常规 CSS 语法的脚本语言，以便 Web 浏览器可以读取。

由于 Tailwind 是 PostCSS 插件，因此您可以使用 SASS、LESS 和 Stylus 等预处理器，但是使用它们有一些技巧。如果您已经了解这些预处理器的几种语法，那么它们可能无法像在常规 CSS 中那样与 Tailwind 一起使用。有关指南，请阅读本文。

为了获得最佳的开发体验，我们强烈建议您使用 PostCSS 插件，并且不要使用 Sass 或 Less 预处理器。

使用 PostCSS 作为预处理器

如果您正在一个新项目上工作，并且不需要将其与任何现有的 Sass/Less/Stylus 样式表集成，那么PostCSS 是推荐与 Tailwind CSS 一起使用的预处理器，您应该认真考虑依赖其他 PostCSS 插件来添加您使用的预处理器功能，而不是使用单独的预处理器。

构建速度更快：由于您的 CSS 不必由多个工具进行解析和处理，因此仅使用 PostCSS 即可更快地编译您的 CSS。
没有怪癖或变通方法：因为 Tailwind 向 CSS 添加了一些新的非标准关键字（例如 @tailwind、@apply、theme() 等），所以您经常必须以烦人且不直观的方式编写 CSS，才能使预处理器获得预期的输出。专门使用 PostCSS 可以避免这种情况。

构建时导入

预处理器提供的最有用功能之一是能够将 CSS 组织成多个文件，并通过预先处理 @import 语句而不是在浏览器中将其组合在构建时。要安装 PostCSS，请运行以下命令。

npm install -D postcss-import

然后将其作为第一个插件添加到您的 PostCSS 配置中

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

'postcss-import' 非常严格，不允许在文件顶端以外的任何地方使用'@import' 语句。

不起作用，@import 语句必须放在最前面

/* components.css */

.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* Will not work */
@import "./components/card";

为导入和实际 CSS 使用单独的文件

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* components/card.css */
.card {
  padding: theme('spacing.4');
  /* ... */
}

嵌套

我们建议使用我们捆绑的tailwindcss/nesting插件，这是一个PostCSS插件，它封装了postcss-nested或postcss-nesting，并作为兼容性层，以确保您首选的嵌套插件能够正确理解Tailwind的独特语法，从而提供对嵌套声明的支持。

tailwindcss包已经包含了它，因此您只需将其添加到您的PostCSS设置中，放在Tailwind之前即可使用。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

在底层，它默认使用postcss-nested插件，该插件为Tailwind CSS插件API中的嵌套支持提供支持，并且语法类似于SASS。

如果您更愿意使用postcss-nesting，请先安装该插件。

npm install -D postcss-nesting

然后在您的PostCSS配置中将插件本身作为参数传递给tailwindcss/nesting。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  }
}

如果您想使用特定版本的postcss-nested并想覆盖我们与tailwindcss/nesting本身捆绑在一起的版本。

如果您正在使用postcss-preset-env，则应禁用嵌套功能，并让tailwindcss/nesting为您处理。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
  }
}

变量

由于CSS支持变量，因此根本不需要使用预处理器来使用变量。要了解更多关于CSS变量的信息。

:root {
  --theme-color: #52b3d0;
}

/* ... */

.btn {
  background-color: var(--theme-color);
  /* ... */
}

使用的变量可以用Tailwind的'theme()'函数替换。这使您可以直接在CSS中访问来自tailwind.config.js文件的全部设计令牌。

.btn {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.2') theme('spacing.4');
  /* ... */
}

厂商前缀

Autoprefixer将帮助您管理CSS中的厂商前缀。

/* install it via npm */
npm install -D autoprefixer

/*  Add it to the very end of your plugin
    list in your PostCSS configuration */

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

安装Tailwind作为PostCSS插件

在安装PostCSS插件之前，您应该安装Tailwind CSS。

先决条件

安装Tailwind CSS

要安装PostCSS，请按照以下步骤操作。

步骤1：将Tailwind添加到您的PostCSS配置中

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

步骤2：配置您的模板路径

步骤3：将Tailwind指令添加到您的CSS中

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

步骤4：启动您的构建过程

@tailwind base;
@tailwind components;
@tailwind utilities;

步骤5：开始在您的HTML中使用Tailwind

npm run dev

打印页面