Installation
在 Rspack 项目中设置 Tailwind CSS。
如果你还没有设置好项目,请先创建一个新的 Rspack 项目。最常见的方法是使用 Rspack CLI。
npm create rspack@latest安装 @tailwindcss/postcss 和它的依赖。
npm install tailwindcss @tailwindcss/postcss postcss postcss-loader在你的 rspack.config.js 文件中,启用 PostCSS 加载器。 查看 文档 了解更多信息。
export default defineConfig({ // ... module: { rules: [ { test: /\.css$/, use: ["postcss-loader"], type: "css", }, // ... ], },}在项目根目录下创建一个 postcss.config.mjs 文件,并添加 @tailwindcss/postcss 插件到@tailwindcss/postcss plugin to your PostCSS configuration.
export default { plugins: { "@tailwindcss/postcss": {}, },};将 @import 添加到 ./src/index.css 中,导入 Tailwind CSS。
@import "tailwindcss";Run your build process with npm run dev.
npm run dev开始使用 Tailwind 的实用类来样式化你的内容。
export default function App() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> )}