安装
在 Rspack 项目中设置 Tailwind CSS。
如果你还没有设置项目,首先创建一个新的 Rspack 项目。最常见的方法是使用 Rspack CLI.
npm create rspack@latest
安装 @tailwindcss/postcss
及其对等依赖。
npm install tailwindcss @tailwindcss/postcss postcss postcss-loader
在你的 rspack.config.js
文件中,启用 PostCSS loader。请参阅 文档 以获取更多信息。
export default defineConfig({ // ... module: { rules: [ { test: /\.css$/, use: ["postcss-loader"], type: "css", }, // ... ], },}
在你的项目根目录创建一个 postcss.config.mjs
文件,并添加 @tailwindcss/postcss
插件到你的 PostCSS 配置中。
export default { plugins: { "@tailwindcss/postcss": {}, },};
添加一个 @import
到 ./src/index.css
中,以导入 Tailwind CSS。
@import "tailwindcss";
使用 npm run dev
运行你的构建过程。
npm run dev
开始使用 Tailwind 的实用类来设置你的内容样式。
export default function App() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> )}