如何在 Remix 中使用 tailwindcss ？

从 v1.16.0 版本开始 Remix 的对 css 支持开始稳定。本文单独详细的介绍 remix css 方案之使用 tailwindcss 方法。

一、安装 tailwindcss

npm create remix <your_app_name>

cd <your_app_name>

npm install -D tailwindcss

二、在 Remix 中启动 tailwindcss 的支持

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  tailwind: true,
  // ...
};

三、初始化 tailwindcss 配置文件

npx tailwindcss init --ts

四、配置 tailwindcss 配置问文件

import type { Config } from "tailwindcss";

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

五、在 app/tailwindcss.css 中初始化 tailwindcss 指定

• app/tailwind.css

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

六、在 root.tsx 中使用 links 函数

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

// ...

import styles from "./tailwind.css";

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

小结

• 使用 tailwindcss 与其他工程化工具类似。不同的是 Remix 内置支持了Tailwindcss。需要做的就是安装包和配置 tailwindcss 内容。
• tailwindcss 好处是，一次配置之后，不再需要的单独的引入 css link 标签(remix links 函数)。