Как кастомизировать Tailwind под дизайн-систему бренда?

Question

Accepted Answer

## В чём суть

Через **theme extension** в конфиге: цвета, шрифты, радиусы, spacing = токены бренда.

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: { DEFAULT: "#0B6E4F", soft: "#E7F5EF" },
      },
      fontFamily: { sans: ["Manrope", "system-ui", "sans-serif"] },
      borderRadius: { card: "1rem" },
      spacing: { 18: "4.5rem" },
    },
  },
};
```

Дальше: `bg-brand`, `rounded-card`. Для семантики можно маппить CSS-переменные (`colors: { brand: "rgb(var(--brand) / <alpha-value>)" }`) — удобно для тем. Плагины — под сложные компоненты; не копируйте весь дизайн в `@apply` без нужды.

## Итог

Конфиг = single source of truth токенов. Классы отражают бренд, а не дефолтную палитру Tailwind.