使用 Remix 安裝 Tailwind CSS - Tailwind CSS 框架

我們正在徵才設計工程師 + 軟體工程師

安裝
使用 Remix 安裝 Tailwind CSS

建立專案
如果您尚未設定新的 Remix 專案，請先建立一個。最常見的方法是使用建立 Remix。
終端機
```
npx create-remix@latest my-projectcd my-project
```
安裝 Tailwind CSS
透過 npm 安裝 tailwindcss，然後執行初始化指令以產生 tailwind.config.ts 檔案。
終端機
```
npm install -D tailwindcssnpx tailwindcss init --ts
```

設定範本路徑

在 tailwind.config.ts 檔案中新增所有範本檔案的路徑。

tailwind.config.ts

import type { Config } from 'tailwindcss'

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

將 Tailwind 指令新增至 CSS
建立一個 ./app/tailwind.css 檔案，並為 Tailwind 的每個圖層新增 @tailwind 指令。
tailwind.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

匯入 CSS 檔案

在 ./app/root.jsx 檔案中匯入新建立的 ./app/tailwind.css 檔案。

root.tsx

import stylesheet from "~/tailwind.css";

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

開始建置流程
使用 npm run dev 執行建置流程。
終端機
```
npm run dev
```

開始在專案中使用 Tailwind

開始使用 Tailwind 的公用程式類別為內容套用樣式。

index.tsx

export default function Index() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}