Skip to main content

Tailwind CSS

Как работает Tailwind в платформе, зачем он нужен и как он встроен в builder-web и ui-kit

🎯 Зачем эта страница​

Цель — объяснить, как используется Tailwind CSS в lowcode‑платформе:

  • почему выбран Tailwind и какую проблему он решает;
  • как Tailwind интегрирован в builder-web;
  • как UI‑kit использует Tailwind без собственной сборки;
  • как устроен процесс генерации CSS;
  • что должен знать разработчик, который пишет новые UI‑компоненты.

1. Что такое Tailwind CSS​

Tailwind — это utility‑first CSS‑фреймворк, который позволяет описывать внешний вид прямо в JSX через классы вида:

<div class="p-4 bg-white rounded shadow"></div>

Преимущества Tailwind для lowcode‑платформы:

  • единый визуальный стиль без кастомных CSS‑файлов;
  • тёмная/светлая тема через dark:‑классы;
  • полная декомпозиция компонентов: каждый элемент самодостаточен;
  • высокая скорость разработки UI‑компонентов;
  • минимальный итоговый CSS, который генерируется только для используемых классов.

2. Где используется Tailwind в платформе​

Tailwind участвует на двух уровнях:

✔ В приложении builder-web (host)​

builder-web содержит:

  • tailwind.config.cjs
  • postcss.config.cjs
  • зависимости tailwindcss, postcss, autoprefixer
  • импорт базового слоя стилей:
import '@lowcode/ui-kit/styles/base.css';

Tailwind генерирует итоговый CSS только на стороне приложения.

✔ В @lowcode/ui-kit​

UI‑kit не выполняет сборку Tailwind, но использует его классы. В библиотеке присутствует только:

  • src/styles/base.css с директивами

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  • React‑компоненты с Tailwind‑классами.

Сборку этих стилей выполняет builder-web.

3. Как устроена Tailwind‑интеграция в builder-web​

3.1. Tailwind конфигурация​

Файл: apps/builder-web/tailwind.config.cjs.

Главное — включить пути ui‑кита:

module.exports = {
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{ts,tsx}', '../../packages/ui-kit/src/**/*.{ts,tsx}'],
  theme: { extend: {} },
  plugins: [],
};

Это сообщает Tailwind, что он должен анализировать оба дерева исходников.

3.2. PostCSS конфигурация​

Файл: apps/builder-web/postcss.config.cjs:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3.3. Импорт CSS слоя ui‑кита​

import '@lowcode/ui-kit/styles/base.css';

Директивы @tailwind в base.css активируют генерацию Tailwind при сборке.

4. Как UI‑kit использует Tailwind​

В @lowcode/ui-kit Tailwind используется только в виде классов в JSX, например:

<button className="px-3 py-1 rounded bg-indigo-600 text-white hover:bg-indigo-700">

UI‑kit:

  • не содержит своего Tailwind конфига;
  • не подключает PostCSS;
  • не генерирует CSS самостоятельно;
  • полностью полагается на конечное приложение.

Преимущества такого подхода:

  • UI‑kit остаётся headless и переиспользуемым;
  • host‑приложение контролирует стиль, доступные утилиты и темы;
  • минимизация дублирующейся конфигурации.

5. Тёмная тема (dark:) и Tailwind​

Tailwind поддерживает тёмную тему на уровне классов:

<div class="bg-white dark:bg-slate-900"></div>

В связке с компонентом ThemeProvider, который добавляет класс dark на корневой элемент, это позволяет:

  • переключать тему без перерендера CSS;
  • использовать один набор компонентов для двух цветовых схем.

Подробнее о теме: см. документацию theme.

6. Где расположены основные файлы​

Компонент / файлПутьНазначение
Tailwind configapps/builder-web/tailwind.config.cjsНастройка Tailwind и указание путей файлов
PostCSS configapps/builder-web/postcss.config.cjsПодключение Tailwind → PostCSS → Vite
Глобальный слой стилейpackages/ui-kit/src/styles/base.cssВключение base/components/utilities
Примитивы UI-китаpackages/ui-kit/src/components/primitives/*Tailwind-классы для контролов
Layout-компоненты UI-китаpackages/ui-kit/src/components/layout/*Tailwind-классы для каркаса редактора
Тема UI-китаpackages/ui-kit/src/theme/ThemeProvider.tsxПоддержка dark: классов

7. Что должен знать разработчик​

Если ты добавляешь новый UI‑компонент:

✔ Используй только Tailwind‑классы в JSX​

Не нужно писать отдельные CSS‑файлы.

✔ Помни, что тёмная тема работает через dark:​

<div className="bg-slate-50 dark:bg-slate-900">

✔ Добавляй новые файлы только в ui‑kit​

Tailwind найдёт их автоматически через content в конфиге.

✔ Нельзя использовать Tailwind плагины в ui‑ките​

Их нужно регистрировать в builder-web.

✔ Не создавай Tailwind конфиг внутри ui‑кита​

Конфигурация должна быть только на стороне host‑приложения.

8. Минимальный пример использования​

Пример: кастомный компонент кнопки в ui‑ките.

export function DangerButton(props) {
  return (
    <button
      {...props}
      className="px-3 py-1 rounded bg-red-600 text-white hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800"
    />
  );
}

Host‑приложение автоматически подключит все классы.

9. Резюме​

Tailwind — ключевая часть визуальной архитектуры, обеспечивающая:

  • единый стиль;
  • высокую скорость разработки;
  • поддержку темизации;
  • полноценную интеграцию UI‑кита и editor‑приложения.

Tailwind живёт в builder-web, а ui‑kit остаётся полностью декларативной библиотекой компонентов.