Установка
Настройка 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": {}, },};Добавьте @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> )}