Tailwind CSS v4 + CDS 4

Для проектов на Vite подключайте Tailwind CSS v4 по официальной инструкции Tailwind: Installing Tailwind CSS with Vite.

Ниже показана рекомендуемая интеграция CDS 4 с Tailwind CSS v4.

• Vite-плагин подключается в vite.config.ts
• CSS-слой Tailwind подключается в main.ts

1. Установите 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. Подключите Vite-плагин

Добавьте @tailwindcss/vite в vite.config.ts:

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

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

3. Создайте файл tailwind.css

Например, src/tailwind.css:

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

Такой вариант подключает CDS-токены в Tailwind. preflight отдельно не нужен, потому что базовые reset-стили уже приходят из @central-design-system/components/styles.

4. Импортируйте стили в точке входа приложения

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. Используйте Tailwind-утилиты и CDS-токены вместе

<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>Нажми меня</CdsButton>
  </div>
</template>

После подключения доступны одновременно:

• стандартные Tailwind-утилиты: flex, font-bold, gap-3, p-4
• utility-классы на основе CDS-токенов: bg-surface-primary, text-content-primary, rounded-200
• типографика CDS-шкалой: font-sans (шрифт системы), размеры text-50…text-1100, межстрочные leading-50…leading-1100, начертания font-regular / font-bold, трекинг tracking-500. Размер и межстрочный интервал — отдельные классы: text-* не трогает line-height

Отступы пишите обычной числовой шкалой Tailwind (gap-2, p-4, mt-2): шкала отступов CDS с ней совпадает, отдельные spacing-классы вида gap-200/p-400 использовать не нужно. Токен-классы остаются для цвета, радиусов и типографики.

CDS-конфигурация автоматически синхронизируется с активной темой CDS, поэтому цветовые utility-классы будут переключаться вместе с темой.