使用 Remix 安装 Tailwind CSS - Tailwind CSS 中文

我们正在招聘设计工程师 + 软件工程师

安装
使用 Remix 安装 Tailwind CSS

创建你的项目
如果你还没有设置，请先创建一个新的 Remix 项目。最常见的方法是使用 Create Remix.
终端
```
npx create-remix@latest my-projectcd my-project
```
安装 Tailwind CSS
通过 npm 安装 tailwindcss，然后运行 init 命令生成一个 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>
  )
}