Tailwind

本文档仅在使用 Classic Remix 编译器时才相关。如果您使用 Remix Vite，则可以使用 Vite 的内置 PostCSS 支持集成 Tailwind。

在社区中，设计 Remix 应用程序最流行的方式可能是使用 Tailwind CSS。

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

Tailwind 具有内联样式共置的优势，有利于开发人员的人体工程学，并且能够生成 CSS 文件供 Remix 导入。即使对于大型应用程序，生成的 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 },
];

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

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

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

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

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

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

或者，你可以使用 PostCSS 和 postcss-import 插件来处理导入，然后再将它们传递给 esbuild。

Tailwind

Tailwind

避免使用 Tailwind 的 @import 语法

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