Tailwind

此文件僅在使用傳統 Remix 編譯器時適用。如果您使用的是 Remix Vite，則可以使用 Vite 的內建 PostCSS 支援來整合 Tailwind。

社群中或許最流行的 Remix 應用程式樣式設定方式是使用 Tailwind CSS。

如果您的專案根目錄中存在 tailwind.config.js，Remix 會自動支援 Tailwind。您可以在 Remix 配置中停用它。

Tailwind 的優點是開發人員可以輕鬆使用內嵌樣式共置，並且能夠產生一個 CSS 檔案供 Remix 匯入。即使對於大型應用程式，產生的 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 外掛程式，將會自動包含該外掛程式，但您也可以選擇在 PostCSS 設定中手動包含 Tailwind 外掛程式。

如果您使用的是 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` 語法