React Tailwind Library

Uma biblioteca React com Tailwind CSS para reutilização em outros projetos.

🚀 Instalação

npm install

📦 Build

Para construir a biblioteca:

npm run build

🛠️ Desenvolvimento

Para desenvolvimento com hot reload:

npm run dev

📚 Storybook

Para visualizar os componentes:

npm run storybook

🎯 Como usar em outro projeto

1. Instalar a biblioteca

# Em seu projeto Vue/React/outro
npm install /caminho/para/esta/biblioteca

2. Importar os estilos

// Importar os estilos CSS da biblioteca
import 'react-tailwind-library/dist/index.css'

3. Usar os componentes

import { Button, Input, Card } from 'react-tailwind-library'

function App() {
  return (
    <div>
      <Button variant="primary" size="md">
        Meu Botão
      </Button>

      <Input
        type="text"
        placeholder="Digite algo..."
        onChange={(value) => console.log(value)}
      />

      <Card title="Meu Card" subtitle="Subtítulo">
        Conteúdo do card
      </Card>
    </div>
  )
}

🎨 Componentes Disponíveis

Button

• Variantes: primary, secondary, outline
• Tamanhos: sm, md, lg
• Props: variant, size, disabled, onClick, children

Input

• Tipos: text, email, password, number
• Props: type, placeholder, value, onChange, disabled, required

Card

• Props: title, subtitle, children

🎨 Customização

A biblioteca usa Tailwind CSS com cores customizadas:

• Primary: Tons de azul
• Secondary: Tons de cinza

Você pode sobrescrever as cores no seu projeto importando os estilos e customizando o tema.

📝 Scripts Disponíveis

• npm run build - Constrói a biblioteca
• npm run dev - Modo desenvolvimento
• npm run type-check - Verifica tipos TypeScript
• npm run lint - Executa ESLint
• npm run lint:fix - Corrige problemas do ESLint
• npm run storybook - Inicia Storybook
• npm run build-storybook - Constrói Storybook

🔧 Configuração

Tailwind CSS

O projeto está configurado para usar Tailwind CSS com preflight: false para evitar conflitos com estilos do projeto host.

TypeScript

Configuração otimizada para bibliotecas React com declarações de tipo.

Rollup

Configuração para build otimizado com suporte a CommonJS e ES Modules.