Tailwind Patterns

// tailwind.config.js (v3)
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{ts,tsx}', './index.html'],
  theme: {
    extend: {
      colors: {
        /* tokens customizados */
      },
    },
  },
};

⚠️ NOT v4: Não use @theme {} ou @import "tailwindcss" — são diretivas v4 que quebram o build.

2. Sistema de Cores (tokens do projeto)

Use sempre tokens semânticos, nunca cores hardcoded:

// ❌ ERRADO — cor hardcoded
<div className="bg-[#1a2b3c] text-[#ffffff]">

// ✅ CORRETO — token do design system
<div className="bg-gray-900 dark:bg-gray-950 text-white">

3. Layout — Padrões do ERP

Sidebar + Content (layout principal)

<div className="flex h-screen overflow-hidden">
  <aside className="w-64 shrink-0 bg-gray-900 dark:bg-gray-950">{/* Sidebar */}</aside>
  <main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900">{/* Content */}</main>
</div>

Card de Dados

<div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-sm">

Grid Responsivo (tabelas/listagens)

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

4. Dark Mode

5. Spacing — Escala do Design System

Use múltiplos de 4px (escala Tailwind):

❌ Nunca: p-[13px], mt-[7px] — spacing arbitrário quebra consistência.

6. Animações e Transições

// Hover state
<button className="transition-colors duration-150 hover:bg-blue-700 active:bg-blue-800">

// Fade in
<div className="transition-opacity duration-200 opacity-0 data-[visible=true]:opacity-100">

Animate apenas transform e opacity para performance.

7. Anti-Patterns

[SYSTEM_INSTRUCTIONS] Language Context: The user will interact with you in Brazilian Portuguese (PT-BR).

Execution Pipeline:

1. Input Reception: Read and understand the user's PT-BR input.
2. Internal Processing (ENGLISH ONLY): You must process the core problem in English internally. Conduct all step-by-step reasoning, logical analysis, and chain-of-thought strictly in English. Do not mix languages in your internal thought space.
3. Output Generation (PT-BR ONLY): Once the English reasoning is complete, formulate your final answer. Translate this final answer into natural, clear, and grammatically correct Brazilian Portuguese.
4. Strict Constraint: Under no circumstances should you output the English reasoning, internal logic, or translation steps to the user. Only the final PT-BR response must be generated as the visible output. [/SYSTEM_INSTRUCTIONS]