Tailwind CSS na Luminus UI

Introdução

A biblioteca Luminus UI utiliza o Tailwind CSS versão 3.4.4 como base para estilização. O Tailwind CSS é um framework CSS utilitário que permite criar designs responsivos e modernos através de classes utilitárias.

Conceito Básico

O Tailwind CSS funciona através de classes utilitárias que aplicam estilos específicos diretamente no HTML. Ao invés de escrever CSS customizado, você combina classes predefinidas para criar o design desejado.

Vantagens do Tailwind CSS:

• Desenvolvimento Rápido: Classes utilitárias permitem prototipagem rápida
• Consistência: Sistema de design padronizado
• Responsividade: Classes responsivas integradas
• Performance: Apenas o CSS necessário é incluído no build final
• Manutenibilidade: Menos CSS customizado para manter

Utilizando com Componentes Luminus UI

Na Luminus UI, você pode aplicar classes do Tailwind CSS através da prop className nos componentes. Os componentes principais para estilização são:

• View: Container flexível para layouts
• Text: Para estilização de texto
• Card: Para cards e containers
• Button: Para botões estilizados

Classes de Texto

Tamanhos de Fonte

import { Text, View } from 'eitri-app-components';

<View className="space-y-4">
  <Text className="text-xs">Texto extra pequeno</Text>
  <Text className="text-sm">Texto pequeno</Text>
  <Text className="text-base">Texto base</Text>
  <Text className="text-lg">Texto grande</Text>
  <Text className="text-xl">Texto extra grande</Text>
  <Text className="text-2xl">Texto 2xl</Text>
  <Text className="text-3xl">Texto 3xl</Text>
  <Text className="text-4xl">Texto 4xl</Text>
  <Text className="text-5xl">Texto 5xl</Text>
  <Text className="text-6xl">Texto 6xl</Text>
</View>

Peso da Fonte

<View className="space-y-2">
  <Text className="font-thin">Font Thin</Text>
  <Text className="font-light">Font Light</Text>
  <Text className="font-normal">Font Normal</Text>
  <Text className="font-medium">Font Medium</Text>
  <Text className="font-semibold">Font Semibold</Text>
  <Text className="font-bold">Font Bold</Text>
  <Text className="font-extrabold">Font Extrabold</Text>
  <Text className="font-black">Font Black</Text>
</View>

Alinhamento de Texto

<View className="space-y-4">
  <Text className="text-left">Texto alinhado à esquerda</Text>
  <Text className="text-center">Texto centralizado</Text>
  <Text className="text-right">Texto alinhado à direita</Text>
  <Text className="text-justify">Texto justificado com conteúdo longo para demonstrar o alinhamento justificado em múltiplas linhas</Text>
</View>

Decoração de Texto

<View className="space-y-2">
  <Text className="underline">Texto sublinhado</Text>
  <Text className="line-through">Texto riscado</Text>
  <Text className="no-underline">Texto sem sublinhado</Text>
  <Text className="uppercase">texto em maiúsculas</Text>
  <Text className="lowercase">TEXTO EM MINÚSCULAS</Text>
  <Text className="capitalize">texto capitalizado</Text>
</View>

Bordas

Espessura das Bordas

<View className="space-y-4">
  <View className="border border-solid p-4">
    <Text>Borda padrão (1px)</Text>
  </View>
  <View className="border-0 p-4">
    <Text>Sem borda</Text>
  </View>
  <View className="border-2 border-solid p-4">
    <Text>Borda 2px</Text>
  </View>
  <View className="border-4 border-solid p-4">
    <Text>Borda 4px</Text>
  </View>
  <View className="border-8 border-solid p-4">
    <Text>Borda 8px</Text>
  </View>
</View>

Cores das Bordas

<View className="space-y-4">
  <View className="border-2 border-red-500 p-4">
    <Text>Borda vermelha</Text>
  </View>
  <View className="border-2 border-blue-500 p-4">
    <Text>Borda azul</Text>
  </View>
  <View className="border-2 border-green-500 p-4">
    <Text>Borda verde</Text>
  </View>
  <View className="border-2 border-yellow-500 p-4">
    <Text>Borda amarela</Text>
  </View>
  <View className="border-2 border-purple-500 p-4">
    <Text>Borda roxa</Text>
  </View>
  <View className="border-2 border-gray-500 p-4">
    <Text>Borda cinza</Text>
  </View>
</View>

Arredondamento das Bordas

<View className="space-y-4">
  <View className="border-2 border-blue-500 p-4 rounded-none">
    <Text>Sem arredondamento</Text>
  </View>
  <View className="border-2 border-blue-500 p-4 rounded-sm">
    <Text>Arredondamento pequeno</Text>
  </View>
  <View className="border-2 border-blue-500 p-4 rounded">
    <Text>Arredondamento padrão</Text>
  </View>
  <View className="border-2 border-blue-500 p-4 rounded-md">
    <Text>Arredondamento médio</Text>
  </View>
  <View className="border-2 border-blue-500 p-4 rounded-lg">
    <Text>Arredondamento grande</Text>
  </View>
  <View className="border-2 border-blue-500 p-4 rounded-xl">
    <Text>Arredondamento extra grande</Text>
  </View>
  <View className="border-2 border-blue-500 p-4 rounded-2xl">
    <Text>Arredondamento 2xl</Text>
  </View>
  <View className="border-2 border-blue-500 p-4 rounded-full">
    <Text>Arredondamento completo</Text>
  </View>
</View>

Bordas em Lados Específicos

<View className="space-y-4">
  <View className="border-t-4 border-blue-500 p-4">
    <Text>Borda apenas no topo</Text>
  </View>
  <View className="border-r-4 border-blue-500 p-4">
    <Text>Borda apenas na direita</Text>
  </View>
  <View className="border-b-4 border-blue-500 p-4">
    <Text>Borda apenas na base</Text>
  </View>
  <View className="border-l-4 border-blue-500 p-4">
    <Text>Borda apenas na esquerda</Text>
  </View>
</View>

Margens

Margens Externas (Margin)

<View className="space-y-4">
  <View className="m-0 bg-blue-100 p-2">
    <Text>Sem margem (m-0)</Text>
  </View>
  <View className="m-1 bg-blue-100 p-2">
    <Text>Margem pequena (m-1)</Text>
  </View>
  <View className="m-2 bg-blue-100 p-2">
    <Text>Margem 2 (m-2)</Text>
  </View>
  <View className="m-4 bg-blue-100 p-2">
    <Text>Margem 4 (m-4)</Text>
  </View>
  <View className="m-8 bg-blue-100 p-2">
    <Text>Margem 8 (m-8)</Text>
  </View>
  <View className="m-16 bg-blue-100 p-2">
    <Text>Margem 16 (m-16)</Text>
  </View>
</View>

Margens em Lados Específicos

<View className="space-y-4">
  <View className="mt-4 bg-green-100 p-2">
    <Text>Margem apenas no topo (mt-4)</Text>
  </View>
  <View className="mr-4 bg-green-100 p-2">
    <Text>Margem apenas na direita (mr-4)</Text>
  </View>
  <View className="mb-4 bg-green-100 p-2">
    <Text>Margem apenas na base (mb-4)</Text>
  </View>
  <View className="ml-4 bg-green-100 p-2">
    <Text>Margem apenas na esquerda (ml-4)</Text>
  </View>
  <View className="mx-4 bg-green-100 p-2">
    <Text>Margem horizontal (mx-4)</Text>
  </View>
  <View className="my-4 bg-green-100 p-2">
    <Text>Margem vertical (my-4)</Text>
  </View>
</View>

Margens Internas (Padding)

<View className="space-y-4">
  <View className="p-0 bg-yellow-100 border">
    <Text>Sem padding (p-0)</Text>
  </View>
  <View className="p-1 bg-yellow-100 border">
    <Text>Padding pequeno (p-1)</Text>
  </View>
  <View className="p-2 bg-yellow-100 border">
    <Text>Padding 2 (p-2)</Text>
  </View>
  <View className="p-4 bg-yellow-100 border">
    <Text>Padding 4 (p-4)</Text>
  </View>
  <View className="p-8 bg-yellow-100 border">
    <Text>Padding 8 (p-8)</Text>
  </View>
  <View className="p-16 bg-yellow-100 border">
    <Text>Padding 16 (p-16)</Text>
  </View>
</View>

Padding em Lados Específicos

<View className="space-y-4">
  <View className="pt-4 bg-red-100 border">
    <Text>Padding apenas no topo (pt-4)</Text>
  </View>
  <View className="pr-4 bg-red-100 border">
    <Text>Padding apenas na direita (pr-4)</Text>
  </View>
  <View className="pb-4 bg-red-100 border">
    <Text>Padding apenas na base (pb-4)</Text>
  </View>
  <View className="pl-4 bg-red-100 border">
    <Text>Padding apenas na esquerda (pl-4)</Text>
  </View>
  <View className="px-4 bg-red-100 border">
    <Text>Padding horizontal (px-4)</Text>
  </View>
  <View className="py-4 bg-red-100 border">
    <Text>Padding vertical (py-4)</Text>
  </View>
</View>

Flexbox

Container Flex

<View className="flex bg-gray-100 p-4 space-x-2">
  <View className="bg-blue-500 p-2">
    <Text className="text-white">Item 1</Text>
  </View>
  <View className="bg-blue-500 p-2">
    <Text className="text-white">Item 2</Text>
  </View>
  <View className="bg-blue-500 p-2">
    <Text className="text-white">Item 3</Text>
  </View>
</View>

Direção do Flex

<View className="space-y-4">
  {/* Flex Row (padrão) */}
  <View className="flex flex-row bg-gray-100 p-4 space-x-2">
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Item 1</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Item 2</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Item 3</Text>
    </View>
  </View>

  {/* Flex Column */}
  <View className="flex flex-col bg-gray-100 p-4 space-y-2">
    <View className="bg-green-500 p-2">
      <Text className="text-white">Item 1</Text>
    </View>
    <View className="bg-green-500 p-2">
      <Text className="text-white">Item 2</Text>
    </View>
    <View className="bg-green-500 p-2">
      <Text className="text-white">Item 3</Text>
    </View>
  </View>
</View>

Alinhamento Horizontal (Justify Content)

<View className="space-y-4">
  <View className="flex justify-start bg-gray-100 p-4 space-x-2">
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Start</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Start</Text>
    </View>
  </View>

  <View className="flex justify-center bg-gray-100 p-4 space-x-2">
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Center</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Center</Text>
    </View>
  </View>

  <View className="flex justify-end bg-gray-100 p-4 space-x-2">
    <View className="bg-blue-500 p-2">
      <Text className="text-white">End</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">End</Text>
    </View>
  </View>

  <View className="flex justify-between bg-gray-100 p-4">
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Between</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Between</Text>
    </View>
  </View>

  <View className="flex justify-around bg-gray-100 p-4">
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Around</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Around</Text>
    </View>
  </View>

  <View className="flex justify-evenly bg-gray-100 p-4">
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Evenly</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Evenly</Text>
    </View>
  </View>
</View>

Alinhamento Vertical (Align Items)

<View className="space-y-4">
  <View className="flex items-start bg-gray-100 p-4 h-32 space-x-2">
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Start</Text>
    </View>
    <View className="bg-blue-500 p-2 h-16">
      <Text className="text-white">Start</Text>
    </View>
  </View>

  <View className="flex items-center bg-gray-100 p-4 h-32 space-x-2">
    <View className="bg-green-500 p-2">
      <Text className="text-white">Center</Text>
    </View>
    <View className="bg-green-500 p-2 h-16">
      <Text className="text-white">Center</Text>
    </View>
  </View>

  <View className="flex items-end bg-gray-100 p-4 h-32 space-x-2">
    <View className="bg-red-500 p-2">
      <Text className="text-white">End</Text>
    </View>
    <View className="bg-red-500 p-2 h-16">
      <Text className="text-white">End</Text>
    </View>
  </View>

  <View className="flex items-stretch bg-gray-100 p-4 h-32 space-x-2">
    <View className="bg-purple-500 p-2">
      <Text className="text-white">Stretch</Text>
    </View>
    <View className="bg-purple-500 p-2">
      <Text className="text-white">Stretch</Text>
    </View>
  </View>
</View>

Gap (Espaçamento entre itens)

<View className="space-y-4">
  <View className="flex gap-1 bg-gray-100 p-4">
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Gap 1</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Gap 1</Text>
    </View>
    <View className="bg-blue-500 p-2">
      <Text className="text-white">Gap 1</Text>
    </View>
  </View>

  <View className="flex gap-4 bg-gray-100 p-4">
    <View className="bg-green-500 p-2">
      <Text className="text-white">Gap 4</Text>
    </View>
    <View className="bg-green-500 p-2">
      <Text className="text-white">Gap 4</Text>
    </View>
    <View className="bg-green-500 p-2">
      <Text className="text-white">Gap 4</Text>
    </View>
  </View>

  <View className="flex gap-8 bg-gray-100 p-4">
    <View className="bg-red-500 p-2">
      <Text className="text-white">Gap 8</Text>
    </View>
    <View className="bg-red-500 p-2">
      <Text className="text-white">Gap 8</Text>
    </View>
    <View className="bg-red-500 p-2">
      <Text className="text-white">Gap 8</Text>
    </View>
  </View>
</View>

Grid

Grid Básico

<View className="grid grid-cols-3 gap-4 bg-gray-100 p-4">
  <View className="bg-blue-500 p-4">
    <Text className="text-white text-center">Col 1</Text>
  </View>
  <View className="bg-blue-500 p-4">
    <Text className="text-white text-center">Col 2</Text>
  </View>
  <View className="bg-blue-500 p-4">
    <Text className="text-white text-center">Col 3</Text>
  </View>
  <View className="bg-blue-500 p-4">
    <Text className="text-white text-center">Col 1</Text>
  </View>
  <View className="bg-blue-500 p-4">
    <Text className="text-white text-center">Col 2</Text>
  </View>
  <View className="bg-blue-500 p-4">
    <Text className="text-white text-center">Col 3</Text>
  </View>
</View>

Grid Responsivo

<View className="space-y-4">
  <View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 bg-gray-100 p-4">
    <View className="bg-blue-500 p-4">
      <Text className="text-white text-center">Responsivo</Text>
    </View>
    <View className="bg-blue-500 p-4">
      <Text className="text-white text-center">Responsivo</Text>
    </View>
    <View className="bg-blue-500 p-4">
      <Text className="text-white text-center">Responsivo</Text>
    </View>
  </View>
</View>

Grid com Span

<View className="grid grid-cols-4 gap-4 bg-gray-100 p-4">
  <View className="col-span-2 bg-blue-500 p-4">
    <Text className="text-white text-center">Span 2</Text>
  </View>
  <View className="bg-green-500 p-4">
    <Text className="text-white text-center">Normal</Text>
  </View>
  <View className="bg-green-500 p-4">
    <Text className="text-white text-center">Normal</Text>
  </View>
  <View className="bg-red-500 p-4">
    <Text className="text-white text-center">Normal</Text>
  </View>
  <View className="col-span-3 bg-red-500 p-4">
    <Text className="text-white text-center">Span 3</Text>
  </View>
</View>

Cores

Cores de Fundo

<View className="space-y-2">
  <View className="bg-red-500 p-4">
    <Text className="text-white">Fundo vermelho</Text>
  </View>
  <View className="bg-blue-500 p-4">
    <Text className="text-white">Fundo azul</Text>
  </View>
  <View className="bg-green-500 p-4">
    <Text className="text-white">Fundo verde</Text>
  </View>
  <View className="bg-yellow-500 p-4">
    <Text className="text-white">Fundo amarelo</Text>
  </View>
  <View className="bg-purple-500 p-4">
    <Text className="text-white">Fundo roxo</Text>
  </View>
  <View className="bg-gray-500 p-4">
    <Text className="text-white">Fundo cinza</Text>
  </View>
</View>

Intensidades de Cor

<View className="space-y-2">
  <View className="bg-blue-100 p-4">
    <Text>Azul 100 (muito claro)</Text>
  </View>
  <View className="bg-blue-300 p-4">
    <Text>Azul 300 (claro)</Text>
  </View>
  <View className="bg-blue-500 p-4">
    <Text className="text-white">Azul 500 (médio)</Text>
  </View>
  <View className="bg-blue-700 p-4">
    <Text className="text-white">Azul 700 (escuro)</Text>
  </View>
  <View className="bg-blue-900 p-4">
    <Text className="text-white">Azul 900 (muito escuro)</Text>
  </View>
</View>

Cores de Texto

<View className="space-y-2">
  <Text className="text-red-500">Texto vermelho</Text>
  <Text className="text-blue-500">Texto azul</Text>
  <Text className="text-green-500">Texto verde</Text>
  <Text className="text-yellow-500">Texto amarelo</Text>
  <Text className="text-purple-500">Texto roxo</Text>
  <Text className="text-gray-500">Texto cinza</Text>
  <Text className="text-black">Texto preto</Text>
  <Text className="text-white bg-gray-800 p-2">Texto branco</Text>
</View>

Cores de Borda

<View className="space-y-2">
  <View className="border-2 border-red-500 p-4">
    <Text>Borda vermelha</Text>
  </View>
  <View className="border-2 border-blue-500 p-4">
    <Text>Borda azul</Text>
  </View>
  <View className="border-2 border-green-500 p-4">
    <Text>Borda verde</Text>
  </View>
  <View className="border-2 border-yellow-500 p-4">
    <Text>Borda amarela</Text>
  </View>
  <View className="border-2 border-purple-500 p-4">
    <Text>Borda roxa</Text>
  </View>
</View>

Exemplo Prático Completo

Aqui está um exemplo completo combinando várias classes do Tailwind CSS:

import { View, Text, Card, Button } from 'eitri-app-components';

<View className="min-h-screen bg-gray-100 p-8">
  <View className="max-w-4xl mx-auto">
    {/* Header */}
    <View className="text-center mb-8">
      <Text className="text-4xl font-bold text-gray-800 mb-2">
        Exemplo Completo
      </Text>
      <Text className="text-lg text-gray-600">
        Demonstração das classes do Tailwind CSS
      </Text>
    </View>

    {/* Grid de Cards */}
    <View className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {/* Card 1 */}
      <Card className="bg-white rounded-lg shadow-md overflow-hidden">
        <View className="bg-blue-500 p-4">
          <Text className="text-white text-xl font-semibold">Card 1</Text>
        </View>
        <View className="p-6">
          <Text className="text-gray-700 mb-4">
            Este é um exemplo de card usando Tailwind CSS com a biblioteca Luminus UI.
          </Text>
          <Button className="w-full bg-blue-500 hover:bg-blue-600 text-white">
            Ação
          </Button>
        </View>
      </Card>

      {/* Card 2 */}
      <Card className="bg-white rounded-lg shadow-md overflow-hidden">
        <View className="bg-green-500 p-4">
          <Text className="text-white text-xl font-semibold">Card 2</Text>
        </View>
        <View className="p-6">
          <Text className="text-gray-700 mb-4">
            Outro exemplo de card com diferentes cores e estilos.
          </Text>
          <Button className="w-full bg-green-500 hover:bg-green-600 text-white">
            Ação
          </Button>
        </View>
      </Card>

      {/* Card 3 */}
      <Card className="bg-white rounded-lg shadow-md overflow-hidden">
        <View className="bg-purple-500 p-4">
          <Text className="text-white text-xl font-semibold">Card 3</Text>
        </View>
        <View className="p-6">
          <Text className="text-gray-700 mb-4">
            Terceiro card demonstrando flexibilidade do sistema.
          </Text>
          <Button className="w-full bg-purple-500 hover:bg-purple-600 text-white">
            Ação
          </Button>
        </View>
      </Card>
    </View>

    {/* Footer */}
    <View className="mt-12 text-center">
      <Text className="text-gray-500">
        Criado com Luminus UI e Tailwind CSS
      </Text>
    </View>
  </View>
</View>

Dicas Importantes

1. Hover e Focus: Use hover:, focus:, active: para estados interativos
2. Performance: Nosso compilador remove classes que não agregam estilos no build final.
3. Dimensões: Evite utilizar classes como w-4, h-8 e procure substituir por propriedades dos elementos como: <View width={4}> ou <View height={8}>

Recursos Adicionais

• Documentação oficial do Tailwind CSS
• Cheat Sheet do Tailwind
• Playground do Tailwind

A biblioteca Luminus UI integra perfeitamente com o Tailwind CSS, permitindo criar interfaces modernas de forma eficiente e consistente.