Tailwind

此文档仅在使用经典 Remix 编译器时相关。如果你正在使用 Remix Vite，则可以使用 Vite 内置的 PostCSS 支持来集成 Tailwind。

在社区中，或许最流行的样式化 Remix 应用程序的方法是使用 Tailwind CSS。

如果你的项目根目录存在 tailwind.config.js，Remix 会自动支持 Tailwind。你可以在 Remix 配置中禁用它。

Tailwind 的优点是内联样式的协同定位，提高了开发人员的人机工程学体验，并且能够为 Remix 生成一个 CSS 文件以进行导入。即使对于大型应用程序，生成的 CSS 文件的大小通常也能控制在合理范围内。将该文件加载到 app/root.tsx 的 links 中，即可完成设置。

如果你对 CSS 没有自己的意见，这是一种很好的方法。

要使用 Tailwind，首先将其作为开发依赖项安装

npm install -D tailwindcss

然后初始化一个配置文件

npx tailwindcss init --ts

现在我们可以告诉它要从哪些文件生成类

import type { Config } from "tailwindcss";

export default {
  content: [
    "./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

然后在你的 CSS 中包含 @tailwind 指令。例如，你可以在应用程序的根目录创建一个 tailwind.css 文件

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

然后将 tailwind.css 添加到根路由的 links 函数中

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

// ...

import styles from "./tailwind.css?url";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
];

完成此设置后，你还可以在 CSS 中的任何位置使用 Tailwind 的函数和指令。请注意，如果你之前从未使用过 Tailwind，它会警告说在你的源文件中没有检测到任何实用程序类。

Tailwind 默认情况下不会为旧版浏览器编译 CSS，因此，如果你想使用基于 PostCSS 的工具（如 Autoprefixer）来实现这一点，则需要利用 Remix 的内置 PostCSS 支持。当同时使用 PostCSS 和 Tailwind 时，如果缺少 Tailwind 插件，它将自动包含在内，但如果你愿意，也可以选择手动将 Tailwind 插件包含在你的 PostCSS 配置中。

如果你正在使用 VS Code，建议你安装 Tailwind IntelliSense 扩展，以获得最佳的开发体验。

避免使用 Tailwind 的 `@import` 语法

建议你避免使用 Tailwind 的 @import 语法（例如，@import 'tailwindcss/base'），而使用 Tailwind 指令（例如，@tailwind base）。

Tailwind 会将其 import 语句替换为内联 CSS，但这可能会导致样式和 import 语句的交错。这与所有 import 语句必须位于文件开头的限制相冲突。

或者，你可以将 PostCSS 与 postcss-import 插件一起使用，以便在将导入传递给 esbuild 之前处理它们。

Tailwind

避免使用 Tailwind 的 @import 语法

避免使用 Tailwind 的 `@import` 语法