Tailwind support

06 Oct 2025 by terrablue

We've just released @primate/tailwind, a package that adds Tailwind CSS to your app.

To get started, install the package and Tailwind itself.

npm pnpm Yarn Deno Bun

$ npm install @primate/tailwind tailwindcss

$ pnpm add @primate/tailwind tailwindcss

$ yarn add @primate/tailwind tailwindcss

$ deno add @primate/tailwind tailwindcss

$ bun add @primate/tailwind tailwindcss

Create a tailwind.config.js file.

JavaScripttailwind.config.js

export default {
  content: [
    "./lib/**/*.{tsx,jsx,ts,js}",
    "./components/**/*.{tsx,jsx,ts,js}",
    "./routes/**/*.{tsx,jsx,ts,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Activate the Tailwind Primate module.

TypeScript JavaScriptconfig/app.tsconfig/app.js

import tailwind from "@primate/tailwind";
import config from "primate/config";

export default config({
  modules: [tailwind()],
});

import tailwind from "@primate/tailwind";
import config from "primate/config";

export default config({
  modules: [tailwind()],
});

Create a CSS file and import Tailwind.

CSSstatic/master.css

@import "tailwindcss";

You can now start using Tailwind utility classes in your components.

Reactcomponents/Button.tsx

export default function Button() {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Click me
    </button>
  );
}