Tunio Cor Tailwind

Uma biblioteca de cores customizadas para Tailwind CSS que substitui as cores padrão mantendo a mesma nomenclatura e compatibilidade.

🎨 Características

• ✅ Mantém a nomenclatura padrão do Tailwind (red-500, blue-200, etc.)
• ✅ Compatível com Tailwind CSS 4.1+
• ✅ Paleta de cores customizada e moderna
• ✅ Fácil instalação via npm
• ✅ Múltiplas opções de configuração
• ✅ Escrito em TypeScript com tipagem completa
• ✅ Suporte nativo ao TypeScript e JavaScript
• ✅ Zero dependências além do Tailwind CSS

📦 Instalação

npm install tunio-cor-tailwind

ou

yarn add tunio-cor-tailwind

🚀 Uso Rápido

1. Configuração Automática (Recomendado)

Substitua seu tailwind.config.js por:

const { createTailwindConfig } = require('tunio-cor-tailwind');

module.exports = createTailwindConfig({ replaceDefault: true });

2. Configuração Manual

const { colors, plugin } = require('tunio-cor-tailwind');

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './pages/**/*.{html,js,jsx,ts,tsx}',
    './components/**/*.{html,js,jsx,ts,tsx}'
  ],
  theme: {
    colors: colors, // Substitui todas as cores
    // ou
    extend: {
      colors: colors // Estende as cores padrão
    }
  },
  plugins: [plugin]
};

🎯 Exemplos de Uso

Após a instalação, você pode usar as cores exatamente como no Tailwind padrão:

<!-- Cores de fundo -->
<div class="bg-red-500">Fundo vermelho</div>
<div class="bg-blue-200">Fundo azul claro</div>
<div class="bg-gray-900">Fundo cinza escuro</div>

<!-- Cores de texto -->
<p class="text-green-600">Texto verde</p>
<p class="text-purple-400">Texto roxo</p>

<!-- Bordas -->
<div class="border-2 border-cyan-300">Borda ciano</div>

<!-- Hover states -->
<button class="bg-blue-500 hover:bg-blue-600 text-white">
  Botão com hover
</button>

🛠️ API Avançada

Uso com TypeScript

A biblioteca oferece tipagem completa para TypeScript:

import { getColor, getColors, Colors, ColorShades, ColorName } from 'tunio-cor-tailwind';

// Tipagem automática para nomes de cores
const primaryBlue: string = getColor('blue', 500);
const dangerRed: string = getColor('red', 600);

// Tipos disponíveis
type MyColorName = ColorName; // 'red' | 'blue' | 'green' | ...
type MyColorShade = keyof ColorShades; // '50' | '100' | '200' | ...

// Obter cores com tipagem
const allColors: Colors = getColors();
const blueShades: ColorShades = getColors().blue;

Uso com JavaScript

const { getColor, getColors } = require('tunio-cor-tailwind');

// Obter uma cor específica
const primaryBlue = getColor('blue', 500); // #3b82f6
const dangerRed = getColor('red', 600);   // #dc2626

// Obter toda a paleta de uma cor
const allBlues = getColors().blue;
/*
{
  50: '#eff6ff',
  100: '#dbeafe',
  200: '#bfdbfe',
  ...
}
*/

// Obter todas as cores
const allColors = getColors();

Configuração personalizada

const { getColors } = require('tunio-cor-tailwind');

module.exports = {
  theme: {
    extend: {
      colors: {
        // Usar apenas cores específicas
        primary: getColors().blue,
        secondary: getColors().gray,
        accent: getColors().purple,
        
        // Criar aliases
        brand: getColors().blue[500],
        success: getColors().green[500],
        warning: getColors().yellow[500],
        danger: getColors().red[500]
      }
    }
  }
};

🎨 Paleta de Cores Disponíveis

A biblioteca inclui todas as cores padrão do Tailwind com tons de 50 a 950:

Cores Neutras

• slate - Cinza azulado
• gray - Cinza neutro
• zinc - Cinza metálico
• neutral - Cinza puro
• stone - Cinza quente

Cores Primárias

• red - Vermelho
• orange - Laranja
• amber - Âmbar
• yellow - Amarelo
• lime - Lima
• green - Verde
• emerald - Esmeralda
• teal - Verde-azulado
• cyan - Ciano
• sky - Azul céu
• blue - Azul
• indigo - Índigo
• violet - Violeta
• purple - Roxo
• fuchsia - Fúcsia
• pink - Rosa
• rose - Rosa suave

Cores Especiais

• black - Preto
• white - Branco
• transparent - Transparente
• current - Cor atual
• inherit - Herdar

🔧 Opções de Configuração

createTailwindConfig(options)

const config = createTailwindConfig({
  replaceDefault: true // ou false
});

Opções:

• replaceDefault (boolean):
  • true: Substitui completamente as cores padrão do Tailwind
  • false: Estende as cores padrão (mantém as originais + adiciona as customizadas)

🔧 Desenvolvimento

Scripts Disponíveis

# Compilar TypeScript para JavaScript
npm run build

# Modo de desenvolvimento (watch)
npm run dev

# Preparar para publicação
npm run prepublishOnly

Estrutura do Projeto

src/
├── colors.ts      # Definições das cores em TypeScript
├── index.ts       # API principal da biblioteca
dist/              # Arquivos compilados (gerados automaticamente)
├── colors.js
├── colors.d.ts
├── index.js
└── index.d.ts

📝 Personalização

Para personalizar as cores, edite o arquivo src/colors.ts:

// Exemplo de personalização
const customColors: Colors = {
  // Suas cores customizadas aqui
  brand: {
    50: '#f0f9ff',
    100: '#e0f2fe',
    // ... mais tons
    900: '#0c4a6e'
  },
  // ... outras cores
};

Após fazer alterações, execute npm run build para recompilar.

🤝 Contribuição

Contribuições são bem-vindas! Por favor:

1. Faça um fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

🐛 Reportar Bugs

Encontrou um bug? Abra uma issue no GitHub.

📞 Suporte

Para suporte, abra uma issue no GitHub ou entre em contato:

• GitHub: @tuniocavalcante
• Email: [[email protected]]

Feito com ❤️ por Tunio Cavalcante