社区中设置 Remix 应用样式的最流行方法可能是使用 Tailwind CSS。
¥Perhaps the most popular way to style a Remix application in the community is to use Tailwind CSS.
如果 tailwind.config.js 存在于项目的根目录中，Remix 将自动支持 Tailwind。你可以在 Remix 配置 中禁用它
¥Remix supports Tailwind automatically if tailwind.config.js is present in the root of your project. You can disable it in Remix Config
Tailwind 具有内联样式共置的优势，这有利于开发者的人机工程学，并且能够生成一个供 Remix 导入的 CSS 文件。即使对于大型应用，生成的 CSS 文件通常也会达到合理的大小。将该文件加载到 app/root.tsx 链接中即可完成。
¥Tailwind has the benefits of inline-style co-location for developer ergonomics and is able to generate a CSS file for Remix to import. The generated CSS file generally caps out to a reasonable size, even for large applications. Load that file into the app/root.tsx links and be done with it.
如果你对 CSS 没有任何意见，这是一个很好的方法。
¥If you don't have any CSS opinions, this is a great approach.
要使用 Tailwind，首先将其安装为开发依赖：
¥To use Tailwind, first install it as a dev dependency:
npm install -D tailwindcss
然后初始化一个配置文件：
¥Then initialize a config file:
npx tailwindcss init --ts
现在我们可以告诉它从哪些文件生成类：
¥Now we can tell it which files to generate classes from:
import type { Config } from "tailwindcss";
export default {
content: [
"./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
} satisfies Config;
然后在 CSS 中包含 @tailwind 指令。例如，你可以在应用的根目录创建一个 tailwind.css 文件：
¥Then include the @tailwind directives in your CSS. For example, you could create a tailwind.css file at the root of your app:
@tailwind base;
@tailwind components;
@tailwind utilities;
然后将 tailwind.css 添加到根路由的 links 函数中：
¥Then add tailwind.css to your root route's links function:
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 会警告你源文件中未检测到该类。
¥With this setup in place, you can also use Tailwind's functions and directives anywhere in your CSS. Note that Tailwind will warn that no utility classes were detected in your source files if you never used it before.
Tailwind 默认不会为旧版浏览器编译 CSS，因此如果你想使用像 自动前缀 这样的基于 PostCSS 的工具来实现这一点，则需要利用 Remix 的 内置 PostCSS 支持。同时使用 PostCSS 和 Tailwind 时，如果缺少 Tailwind 插件，系统会自动包含它。但你也可以选择在 PostCSS 配置中手动包含 Tailwind 插件。
¥Tailwind doesn't compile CSS for older browsers by default, so if you'd like to achieve this using a PostCSS-based tool like Autoprefixer, you'll need to leverage Remix's built-in PostCSS support. When using both PostCSS and Tailwind, the Tailwind plugin will be automatically included if it's missing, but you can also choose to manually include the Tailwind plugin in your PostCSS config instead if you prefer.
如果你使用的是 VS Code，建议你安装 Tailwind IntelliSense 扩展 以获得最佳开发者体验。
¥If you're using VS Code, it's recommended you install the Tailwind IntelliSense extension for the best developer experience.
@import 语法¥Avoiding Tailwind's @import syntax
建议你避免使用 Tailwind 的 @import 语法（例如 @import 'tailwindcss/base'），而应使用 Tailwind 指令（例如 @tailwind base）。
¥It's recommended that you avoid Tailwind's @import syntax (e.g. @import 'tailwindcss/base') in favor of Tailwind directives (e.g. @tailwind base).
Tailwind 用内联 CSS 替换了其导入语句，但这可能会导致样式和导入语句交错。这与所有导入语句必须位于文件开头的限制相冲突。
¥Tailwind replaces its import statements with inlined CSS, but this can result in the interleaving of styles and import statements. This clashes with the restriction that all import statements must be at the start of the file.
或者，你可以将 PostCSS 与 postcss-import 插件一起使用，在将导入传递给 esbuild 之前处理导入。
¥Alternatively, you can use PostCSS with the postcss-import plugin to process imports before passing them to esbuild.
