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

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

安装
使用 Rspack 安装 Tailwind CSS

创建您的项目
如果您还没有设置，请先创建一个新的 Rspack 项目。最常见的方法是使用 Rspack CLI。
终端
```
npm create rspack@latest
```
安装 Tailwind CSS
安装 tailwindcss 及其对等依赖项，然后生成您的 tailwind.config.js 和 postcss.config.js 文件。
终端
```
npm install -D tailwindcss postcss postcss-loader autoprefixernpx tailwindcss init -p
```

启用 PostCSS 支持

在您的 rspack.config.js 文件中，启用 PostCSS 加载器。有关更多信息，请参阅文档。

rspack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["postcss-loader"],
        type: "css",
      },
  // ...

配置您的模板路径

在您的 tailwind.config.js 文件中添加所有模板文件的路径。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到您的 CSS
将 @tailwind 指令添加到您的 ./src/index.css 文件中，以用于 Tailwind 的每个层。
index.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
启动您的构建过程
使用 npm run dev 运行您的构建过程。
终端
```
npm run dev
```

开始在您的项目中使用 Tailwind

开始使用 Tailwind 的实用程序类来设置您的内容样式。

App.jsx

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