Установите Tailwind CSS с помощью Rspack

Настройка Tailwind CSS в проекте Rspack.

Создайте свой проект

Начните с создания нового проекта Rspack, если у вас его еще нет. Наиболее распространенный подход — использовать Rspack CLI.

Terminal

npm create rspack@latest

Установите Tailwind CSS

Установите @tailwindcss/postcss и его одноранговые зависимости.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

Включите поддержку PostCSS

В файле rspack.config.js включите загрузчик PostCSS. Подробнее смотрите в документации.

rspack.config.ts

export default defineConfig({  // ...  module: {    rules: [      {        test: /\.css$/,        use: ["postcss-loader"],        type: "css",      },      // ...    ],  },}

Настройте плагины PostCSS

Создайте файл postcss.config.mjs в корне вашего проекта и добавьте плагин @tailwindcss/postcss в вашу конфигурацию PostCSS.

postcss.config.mjs

export default {  plugins: {    "@tailwindcss/postcss": {},  },};

Импортируйте Tailwind CSS

Добавьте @import в ./src/style.css, который импортирует Tailwind CSS.

style.css

@import "tailwindcss";

Начните процесс сборки

Запустите процесс сборки с помощью npm run dev.

Terminal

npm run dev

Начните использовать Tailwind в своем проекте

Начните использовать классы утилиты Tailwind для стилизации своего контента.

App.vue

<template>  <h1 class="text-3xl font-bold underline">    Hello world!  </h1></template>

Установите Tailwind CSS с помощью Rspack

Используя React

Используя Vue

Создайте свой проект

Установите Tailwind CSS

Включите поддержку PostCSS

Настройте плагины PostCSS

Импортируйте Tailwind CSS

Начните процесс сборки

Начните использовать Tailwind в своем проекте