内联 tailwind CSS 和多文件 tailwind CSS 有何不同？

Question

我们是否必须将其内联编写为：

• 索引.css 文件，其中包含所有 Tailwind 启动器

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

或者在单独的文件中，例如：

• 索引.css
  • 文件1.css
  • 文件2.css

Answer 1

您的 index.css 文件可以包含实用程序类。 您使用 tailwind 命令 tailwind -i index.css -o output.css 来构建并生成 css 文件。

在您的 html 文件中：您需要在 class 属性中使用 tailwind 内联：

    you rest of body

您需要的最后一个是 tailwind 配置文件，当您在工作目录中运行 tailwind init 时会自动创建该文件。这个配置文件看起来像这样：

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

此文件的目的是检查是否有任何 html 文件正在使用 tailwind 类，如果是，则在运行构建命令时基于渲染 output.css 。