Was ist der Unterschied zwischen Inline-Tailwind-CSS und Multi-File-Tailwind-CSS?

Question

Müssen wir es inline schreiben als:

• Index-.css-Datei mit allen Tailwind-Launchern

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

Oder in einer separaten Datei, zum Beispiel:

• index.css
  • Datei 1.css
  • Datei 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 。