Tailwind

此文档仅在使用经典 Remix 编译器时适用。如果您使用的是Remix Vite，则可以使用Vite 内置的 PostCSS 支持集成 Tailwind。

也许社区中最流行的为 Remix 应用程序添加样式的方法是使用Tailwind CSS。

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

Tailwind 具有将内联样式与代码共同放置的优点，以提高开发人员的效率，并且能够为 Remix 生成要导入的 CSS 文件。即使对于大型应用程序，生成的 CSS 文件的大小通常也会控制在一个合理的范围内。将该文件加载到 app/root.tsx 的链接中，然后就可以使用了。

如果您对 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 },
];

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

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

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

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

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

Tailwind 将其导入语句替换为内联 CSS，但这会导致样式和导入语句交织在一起。这与所有导入语句必须位于文件开头的限制冲突。

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

Tailwind

避免使用 Tailwind 的 @import 语法

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