Integrating Tailwind CSS v4

Brisa, offers versatile integration with third-party libraries like TailwindCSS to be automatically handled for the Brisa internals.

Tailwind lets you use utility classes instead of writing CSS. These utility classes are mostly one-to-one with a certain CSS property setting: for example, adding the text-lg to an element is equivalent to setting font-size: 1.125rem in CSS. You might find it easier to write and maintain your styles using these predefined utility classes!

Installation

Follow these steps to set up TailwindCSS in your Brisa project:

1. Install TailwindCSS

Run the following command to add TailwindCSS to your project:

bunx brisa add tailwindcss

2. Import TailwindCSS

After the installation, import TailwindCSS in your main CSS file:

@import "tailwindcss";

Then, import this CSS file in src/layout/index.tsx.

And that's it! You're all set to use TailwindCSS in your Brisa project.

Manual Installation

If you want to install TailwindCSS manually, you can do it by running:

bun install tailwindcss@next postcss brisa-tailwindcss

And then, you can add the integration in your brisa.config.ts file:

brisa.config.ts

import brisaTailwindCSS from "brisa-tailwindcss";

export default {
  integrations: [brisaTailwindCSS()],
} satisfies Configuration;

And you are ready to use TailwindCSS in your Brisa project.

Installing the dependencies manually, take care to use a TailwindCSS version v.4.x.

Configuration

You can configure TailwindCSS in your brisa.config.ts file:

import brisaTailwindCSS from "brisa-tailwindcss";

export default {
  integrations: [brisaTailwindCSS({ embedded: false })],
} satisfies Configuration;

The current configuration has only one option:

• embedded (optional): If you want to embed the TailwindCSS CSS in the build output. Default is true.

Tailwind needs a subdependency that cannot be compiled, which is lightningcss, so the default is to treat it as external and then embed it inside build.

Type

type Config = {
  embedded?: boolean;
};

Defaults

If you don't have any .css file with @tailwind directive or tailwindcss import, Brisa will automatically generate in build-time a default CSS file with TailwindCSS directives to be similar than TailwindCSS CDN:

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);

In the case you want to override the default CSS file, you can create a .css file in your src with @tailwind directives or @import 'tailwindcss/... and Brisa will use it instead of the default one. This .css file you need to import it in your src/layout.ts file.

Usage

You can use TailwindCSS classes in your Brisa project as you would in a regular TSX file:

export default function Home() {
  return (
    <div className="bg-gray-100">
      <h1 className="text-2xl font-bold text-gray-800">Hello, world!</h1>
    </div>
  );
}