Tailwind CSS

Para projetos com Tailwind CSS v4, o pacote @mobiis/mds-style traz um tema gerado dos mesmos tokens do CSS do MDS. Uma tela feita com utilitários do Tailwind fica com as mesmas cores, tipografia (Manrope), espaçamentos, raios, elevações e breakpoints de uma tela feita com as classes mds-*.

As cores e medidas do tema apontam para os tokens --mds-*, e não para valores fixos. Por isso o tema escuro (data-theme) e as variações de cor primária (data-primary) funcionam sem o prefixo dark: e sem gerar CSS de novo.

Instalação

Com build (recomendado)

Com Vite, Angular CLI, @tailwindcss/postcss ou @tailwindcss/cli, importe o tema no CSS global, logo depois do Tailwind:

@import "tailwindcss";
@import "@mobiis/mds-style/tailwind/mds.css";

O mds.css traz os tokens, a fonte Manrope, o tema, as classes padrão do Tailwind no visual MDS e os componentes. Veja as formas de uso para escolher outra combinação.

Sem build (CSS pronto)

Para uma página que não passa por build, como um HTML estático ou uma página que usava o CDN do Tailwind, use o CSS já compilado. Ele vem no pacote, em tailwind/mds-tailwind.min.css.

1. Copie tailwind/mds-tailwind.min.css e a pasta fonts/ do pacote, mantendo a estrutura (o CSS procura a fonte em ../fonts/):

   minha-pagina/
     index.html
     css/mds-tailwind.min.css
     fonts/Manrope-VariableFont_wght.ttf

2. Troque o <link> ou o <script> do Tailwind antigo:

   <link rel="stylesheet" href="css/mds-tailwind.min.css">

O arquivo tem 2,6 MB (cerca de 220 KB com gzip) e traz as classes de uso comum com as variantes mais usadas: sm: a 2xl:, hover:, focus:, active:, disabled: e group-hover:. Para conferir se a página usa alguma classe fora dele, veja Validar uma página.

Só funciona compilado

Os arquivos theme.css e mds.css têm @theme e @import, que só o compilador do Tailwind v4 entende. Colocar esses arquivos direto num <link> não faz nada. O Tailwind v3 e o CDN antigo (cdn.tailwindcss.com) também ignoram o tema. Sem build, use o CSS pronto.

Caminho da fonte

Com Vite, Angular CLI e @tailwindcss/postcss, o caminho da fonte é ajustado sozinho. O @tailwindcss/cli não ajusta: copie node_modules/@mobiis/mds-style/fonts/ para o lado do CSS gerado, numa pasta fonts/ irmã da pasta do CSS.

Tema escuro e cor primária

Como no CSS do MDS, os atributos ficam no <html>:

<html data-theme="dark" data-primary="green">

Formas de uso

Import	Traz	Indicado para
tailwind/mds.css	tokens + tema + classes padrão do Tailwind no visual MDS + estados + componentes	páginas já escritas em Tailwind e projetos novos
tailwind/mds-strict.css	tokens + tema + estados, só com as classes com nome do MDS	telas novas que devem usar apenas o vocabulário do MDS
css/mds-styles.css em layer(components) + tailwind/theme.css	os componentes mds-* + o tema	projetos que usam as classes mds-btn, mds-card… e o Tailwind para layout

Para usar junto com as classes mds-*:

@import "tailwindcss";
@import "@mobiis/mds-style/css/mds-styles.css" layer(components);
@import "@mobiis/mds-style/tailwind/theme.css";
@import "@mobiis/mds-style/tailwind/defaults.css"; /* opcional: classes padrão do Tailwind */

O layer(components) faz os utilitários do Tailwind vencerem as classes do MDS: class="mds-btn mds-btn--primary rounded-full" fica arredondado. Sem ele, o CSS do MDS fica fora das camadas e ganha de qualquer utilitário.

Classes com nome do MDS

Cores

Regra: tire o prefixo --mds- (e colors- ou colors-palettes-) do token.

Token	Classe
--mds-colors-primary-main	bg-primary-main ou bg-primary
--mds-colors-primary-on-main	text-primary-on-main
--mds-colors-foreground-dark	text-foreground-dark
--mds-colors-border-error	border-border-error
--mds-colors-palettes-blue-light	bg-blue-light
--mds-dimmed-2	bg-dimmed-2
--mds-control-error-border	border-control-error-border
--mds-highlight-success-background	bg-highlight-success-background

Atalhos:

Atalho	Token
primary, secondary, danger, warning, info, success, neutral	tom main do papel
background	fundo da página (background-light)
surface	card, modal, painel (dimmed-default)
foreground	texto de corpo (foreground-main)
border	borda padrão (border-main)
overlay	backdrop de modal e drawer
link, link-hover, link-disabled	links

Use sempre o par de fundo e texto: bg-primary text-primary-on-main. A opacidade funciona: bg-primary/40.

Tipografia, espaçamento e forma

Classe	Equivale a
text-headline-h1 … text-headline-h4	.mds-headline--h1 … (tamanho, peso e entrelinha)
text-title-lg, text-title-md, text-title-sm	.mds-title--*
text-body-lg, text-body-md, text-body-sm, text-body-xs	.mds-body--*
p-xs, p-sm, p-md, p-lg, p-xl, p-xxl, p-xxxl	espaçamento do MDS (4, 8, 16, 24, 32, 40, 48px), também em m-, gap-, w-…
p-1, p-4…	escala numérica do Tailwind na base de 4px do MDS (p-4 = 16px)
h-control-sm, h-control-md, h-control-lg	alturas de controle (32, 48, 56px)
rounded	8px, o raio de botão, campo e card
shadow-elevation-1 … shadow-elevation-5	.mds-elevation--1 … --5
backdrop-blur-xs … backdrop-blur-xl	.blur--*
sm:, md:, lg:, xl:	breakpoints do grid MDS: 576, 768, 992 e 1200px

Páginas já escritas em Tailwind

O mds.css aplica o visual do MDS às classes padrão do Tailwind. Uma página escrita com bg-blue-600, text-gray-700, rounded-lg ou shadow-md passa a usar os tokens do MDS sem mudar o HTML.

Classes padrão	Viram
slate, gray, zinc, neutral, stone	escala gray do MDS
blue, indigo	primary (brand-mobiis, acompanha o data-primary)
violet, purple	secondary
red · amber, yellow · green, lime · sky	danger · warning · success · info
bg-white	superfície (dimmed-default), que escurece no tema escuro
text-2xl … text-9xl, text-base	degrau de fonte do MDS mais próximo
rounded-md, rounded-lg, rounded-xl	8px
shadow-sm, shadow-md, shadow-lg, shadow-xl	elevações 2 a 5

Os passos de cor 50, 300, 500, 700 e 900 usam os tons lighter, light, main, dark e darker. Os intermediários misturam os dois tons vizinhos, para manter o hover visível em bg-blue-600 hover:bg-blue-700.

Componentes

Botões, campos, checkbox, radio e tabelas da página renderizam como os componentes do mds-styles.css, com a mesma forma, cores e estados. Cada peça é reconhecida pelo elemento e pelas classes que já usa:

Na página	Vira
<button> com fundo (bg-*) ou contorno (border, ring-1); <a> com fundo e text-white	.mds-btn: 48px, negrito, degrau de 1px
a cor do fundo (blue, red, bg-gray-900…)	a variante: primary, danger, secondary…
bg-white com borda ou anel	.mds-btn--outline
text-xs · text-base · p-2 só com ícone	--sm (32px) · --lg (56px) · --icon-only
<input> de texto, <select>, <textarea>	campo do .mds-input: 48px, borda de 2px, foco com halo
<input type="checkbox"> / radio	24px com raio de 6px / 20px redondo
<table>	.mds-table

Ficam como a página definiu:

• botões sem fundo nem contorno (fechar, item de menu, aba) e links de texto;
• elementos com role="switch", tab, menuitem ou option;
• elementos com classe mds-*.

Estados do MDS

Pressionado (escala + sombra interna), foco pelo teclado, desabilitado cinza, campo obrigatório vazio e campo inválido seguem o MDS mesmo quando a página define o próprio estado. Por exemplo, disabled:opacity-50 vira o cinza do MDS. Para escapar num elemento, use um utilitário com ! (disabled:bg-red-500!).

Validar uma página

No repositório mds-styles, o verificador compila a página só com as classes que ela usa e compara com o CSS pronto:

npm run tailwind:check-page -- caminho/da/pagina.html
npm run tailwind:check-page -- caminho/da/pagina.html --render

• Sem --render: lista as classes que faltam no CSS pronto e as que o Tailwind não reconhece, como CSS próprio da página ou erro de digitação.
• Com --render: abre a página no Chrome com os dois CSS e compara o estilo computado de cada elemento em 375px e 1280px.

Se faltar alguma classe, acrescente em scripts/tailwind/safelist.js e rode npm run tailwind:bundle.

Como o tema é feito

No repositório mds-styles, o tema fica em themes/tailwind/ e os geradores em scripts/tailwind/. Tudo é gerado do SCSS, com os mesmos leitores do DESIGN.md. A coluna “No pacote” é o caminho em @mobiis/mds-style:

No repositório	No pacote	Gerado por	Conteúdo
themes/tailwind/theme.css	tailwind/theme.css	npm run tailwind:build	tema com as classes do MDS
themes/tailwind/defaults.css	tailwind/defaults.css	npm run tailwind:build	classes padrão do Tailwind no visual MDS
themes/tailwind/states.css	tailwind/states.css	npm run tailwind:build	estados de botão e campo
src/scss/mds-tailwind-components.scss	css/mds-tailwind-components.css	npm run tailwind:build + npm run css	componentes: @extend das classes reais (.mds-btn, .mds-table…)
public/tailwind/mds-tailwind.min.css	tailwind/mds-tailwind.min.css	npm run tailwind:bundle	CSS pronto, sem build

npm run tailwind:verify falha se algum arquivo estiver desatualizado em relação ao SCSS. Quando os tokens mudam, rode npm run tokens e depois npm run tailwind:build.

Limitações conhecidas

• Tema escuro em páginas feitas para o claro: os tons se invertem no escuro. Fundos fortes com texto fixo, como bg-blue-600 text-white ou um gradiente, podem perder contraste. Teste com data-theme="dark" antes de oferecer o tema escuro.
• Nomes xs…xl no modo estrito: em w-, max-w- e size-, esses nomes são a escala de espaçamento do MDS (max-w-md = 16px). No mds.css, max-w-xs…xl voltam a ser as larguras do Tailwind.
• Layout dos componentes: botões e campos passam a ter 48px. O layout de uma página escrita em Tailwind pode mudar um pouco.
• Células de tabela: a cor do texto continua a da página.