Install Tailwind CSS with Rsbuild

Setting up Tailwind CSS in a Rsbuild project.

Create your project

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

Terminal

npm create rsbuild@latest

Install Tailwind CSS

Install @tailwindcss/postcss and its peer dependencies.

Terminal

npm add tailwindcss @tailwindcss/postcss -D

Enable PostCSS support

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

rsbuild.config.ts

import { defineConfig } from '@rsbuild/core'
import tailwindCssPostcss from '@tailwindcss/postcss'
export default defineConfig({
  tools: {
    postcss: {
      postcssOptions: {
        plugins: [tailwindCssPostcss()],
      },
    },
  }
})

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>

Install Tailwind CSS with Rsbuild

Using React

Using Vue

Create your project

Install Tailwind CSS

Enable PostCSS support

Import Tailwind CSS

Start your build process

Start using Tailwind in your project