Eduzz UI: Tailwind Theme

Aplica os Tokens de UI da Eduzz no Tailwind.

Instalação

pnpm add @eduzz/ui-tailwind-theme

Importação

No arquivo css principal do seu projeto adicione o código abaixo na primeira linha:

@import "@eduzz/ui-tailwind-theme";

Note que não é necessário importar o tailwind via @import "tailwindcss"; pois já é feito através do import do @eduzz/ui-tailwind-theme.

Com isso é só sair utilizando as classes =]

Sem Preflight

Se o Preflight do Tailwind conflitar com estilos base existentes, use a entrada sem Preflight:

@import "@eduzz/ui-tailwind-theme/no-preflight.css";

Prefixos

Para utilizar os prefixos basta adicionar prefix(nome) após a importação do @eduzz/ui-tailwind-theme

@import '@eduzz/ui-tailwind-theme' prefix(name);

Customização

Todos os tokens são configuráveis através do @theme então caso queira substituir uma cor basta apenas sobrescrever:

@import "@eduzz/ui-tailwind-theme";

@theme {
  --color-primary-500: #ff0000;
}

Tokens

A maior parte das tokens seguem os padrões do tailwind, abaixo é listado as cores que foram adicionadas para seguir os padrões Eduzz. Onde o * pode ser trocado pelos utilities do tailwind como bg-*, text-*, etc

Cores que mudam de acordo com o tema (light e dark)

Utilidades

É recomendada a utilização *-primary-500 como cor primária no light mode

Belts