Install Tailwind CSS with Remix - Tailwind CSS 中文网

Installation
Install Tailwind CSS with Remix

Create your project
Start by creating a new Remix project if you don’t have one set up already. The most common approach is to use Create Remix.
Terminal
```
npx create-remix@latest my-projectcd my-project
```
Install Tailwind CSS
Install tailwindcss via npm, and then run the init command to generate a tailwind.config.ts and postcss.config.js file.
Terminal
```
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init --ts -p
```

Configure your template paths

Add the paths to all of your template files in your tailwind.config.ts file.

tailwind.config.ts

import type { Config } from 'tailwindcss'

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

Add the Tailwind directives to your CSS
Create a ./app/tailwind.css file and add the @tailwind directives for each of Tailwind’s layers.
tailwind.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Import the CSS file

Import the newly-created ./app/tailwind.css file in your ./app/root.tsx file.

root.tsx

import type { LinksFunction } from "@remix-run/node";
import stylesheet from "~/tailwind.css?url";

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

Start your build process
Run your build process with npm run dev.
Terminal
```
npm run dev
```

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

_index.tsx

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