Tailwind CSS v4 + CDS 4

For Vite projects, install Tailwind CSS v4 by following the official Tailwind guide: Installing Tailwind CSS with Vite.

Below is the recommended way to integrate CDS 4 with Tailwind CSS v4.

• The Vite plugin goes into vite.config.ts
• Tailwind's CSS layer goes into main.ts

1. Install Tailwind CSS

npm

npm install -D tailwindcss @tailwindcss/vite

pnpm

pnpm add -D tailwindcss @tailwindcss/vite

yarn

yarn add -D tailwindcss @tailwindcss/vite

bun

bun add -d tailwindcss @tailwindcss/vite

2. Add the Vite plugin

Add @tailwindcss/vite to vite.config.ts:

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()]
});

3. Create a tailwind.css file

For example, src/tailwind.css:

@import "@central-design-system/components/styles/tailwind";
@import "tailwindcss/theme" layer(cds-utilities.tailwind);
@import "tailwindcss/utilities" layer(cds-utilities.tailwind);

This wires CDS tokens into Tailwind. You don't need preflight separately — the base reset styles already come from @central-design-system/components/styles.

4. Import the styles in your app entry point

import { createApp } from 'vue';

import '@central-design-system/components/styles';
import './tailwind.css';

import { createCds, components, directives } from '@central-design-system/components';

import App from './App.vue';

const cds = createCds({
  components,
  directives
});

createApp(App).use(cds).mount('#app');

5. Use Tailwind utilities and CDS tokens together

<template>
  <div class="flex flex-col gap-3 rounded-200 bg-surface-primary p-4 text-content-primary">
    <h1 class="text-900 font-bold text-brand-primary">Hello CDS + Tailwind</h1>
    <CdsButton>Click me</CdsButton>
  </div>
</template>

Once this is set up, you get both at the same time:

• standard Tailwind utilities: flex, font-bold, gap-3, p-4
• utility classes built from CDS tokens: bg-surface-primary, text-content-primary, rounded-200
• typography on the CDS scale: font-sans (the design system font), sizes text-50…text-1100, line heights leading-50…leading-1100, weights font-regular / font-bold, tracking tracking-500. Size and line height are separate utilities: text-* never touches line-height

Write spacing with the standard Tailwind numeric scale (gap-2, p-4, mt-2): the CDS spacing scale matches it, so there is no need for gap-200/p-400-style spacing classes. Token-based classes remain for color, radius, and typography.

The CDS configuration stays in sync with the active CDS theme automatically, so color utility classes switch along with the theme.