Installation
在 Rspack 项目中设置 Tailwind CSS。
如果你还没有设置 Rspack 项目,可以先创建一个新的 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 插件添加到你的 PostCSS 配置中。
export default { plugins: { "@tailwindcss/postcss": {}, },};在 ./src/style.css 中添加一个 @import 来导入 Tailwind CSS。
@import "tailwindcss";使用 npm run dev 运行你的构建流程。
npm run dev开始使用 Tailwind 的工具类来为你的内容添加样式。
<template> <h1 class="text-3xl font-bold underline"> Hello world! </h1></template>