Install Tailwind CSS with Rspack

Setting up Tailwind CSS in a Rspack project.

Create your project

Start by creating a new Rspack project if you don’t have one set up already. The most common approach is to use Rspack CLI.

Terminal

npm create rspack@latest

Install Tailwind CSS

Install @tailwindcss/postcss and its peer dependencies.

Terminal

npm install tailwindcss @tailwindcss/postcss postcss postcss-loader

Enable PostCSS support

In your rspack.config.js file, enable the PostCSS loader. See the documentation for more information.

rspack.config.ts

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

Configure PostCSS Plugins

Create a postcss.config.mjs file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration.

postcss.config.mjs

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

Import Tailwind CSS

Add an @import to ./src/style.css that imports Tailwind CSS.

style.css

@import "tailwindcss";

Start your build process

Run your build process with npm run dev.

Terminal

npm run dev

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

App.vue

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

Tailwind CSS 中文网（本网站）的目标是为中文开发者提供准确、及时的 Tailwind CSS 中文文档

Tailwind CSS 中文文档由本网站维护人员共同翻译，采用 MIT 开源协议发布

本网站与 tailwindcss.com 及 Tailwind Labs Inc. 并无从属关系

Tailwind 商标由 Tailwind Labs Inc. 所有

Install Tailwind CSS with Rspack

Using React

Using Vue

Create your project

Install Tailwind CSS

Enable PostCSS support

Configure PostCSS Plugins

Import Tailwind CSS

Start your build process

Start using Tailwind in your project