Pular para o conteúdo
🛠️
Whiz Tools

Construtor de Componentes React Tailwind - Pré-visualização ao Vivo & Gerador de Código

Construtor de Componentes React Tailwind gratuito com pré-visualização ao vivo. Crie botões, inputs, textareas, selects e breadcrumbs com Tailwind CSS. Exporte código React pronto para produção instantaneamente.

Construtor de Componentes React com Tailwind CSS

Crie componentes React com Tailwind CSS e veja uma pré-visualização ao vivo

Tipo de Componente

Propriedades

Visualização Responsiva

Pré-visualização de Estado

Pré-visualização ao Vivo

Código Gerado

jsx
<button
  className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
>
  Button
</button>
Calculadora de carregamento...
📚

Documentação

O que é o React Tailwind Component Builder?

O React Tailwind Component Builder é uma ferramenta gratuita para navegador que gera um componente React estilizado com Tailwind CSS. A pessoa escolhe um tipo de componente, como um botão ou um campo de texto, ajusta algumas opções de estilo, e a ferramenta exibe uma visualização ao vivo ao lado do código JSX correspondente. Tudo é executado no navegador. Não é necessária uma conta nem uma chamada ao servidor.

Tipos de componentes

A ferramenta pode gerar cinco tipos de componentes:

  • Botão — um botão clicável com texto personalizado
  • Campo de texto — um campo de formulário de uma linha com texto de placeholder
  • Área de texto — um campo de formulário com várias linhas e um número definido de linhas
  • Seleção — uma lista suspensa criada a partir de uma lista de opções
  • Trilha de navegação — uma linha de links que mostra a localização de uma página em um site, como Início / Produtos / Categoria

Quais propriedades podem ser alteradas

Cinco propriedades de estilo se aplicam a todos os tipos de componentes:

  • Cor do texto — branco, preto, cinza, azul, vermelho ou verde
  • Cor de fundo — nenhuma, branca, cinza-claro, azul, vermelha ou verde
  • Preenchimento (espaçamento interno) — nenhum, pequeno, médio, grande ou o padrão do botão
  • Raio da borda (arredondamento dos cantos) — nenhum, pequeno, médio, grande ou totalmente arredondado
  • Largura — automática, total, metade, um terço ou um quarto

Algumas propriedades aparecem apenas para determinados tipos de componentes: o texto do botão, o texto de placeholder de um campo de texto ou área de texto, o número de linhas de uma área de texto, a lista de opções de um componente de seleção e a lista de itens de uma trilha de navegação. Campos de texto, áreas de texto e componentes de seleção também têm caixas de seleção "obrigatório" e "desabilitado"; os botões também têm uma caixa de seleção "desabilitado".

Quatro propriedades são fixas e não podem ser alteradas pela interface: margem (sempre m-0), estilo da borda (sempre border border-transparent), tamanho da fonte (sempre text-base) e espessura da fonte (sempre font-medium). Todo componente gerado contém essas mesmas quatro classes. Para usar outra margem, borda ou tamanho de fonte, edite manualmente o código copiado.

Como a lista de classes gerada é criada

A ferramenta cria a string de classes do Tailwind para cada componente em uma ordem fixa:

  1. Classe da cor do texto, se alguma estiver definida
  2. Classe da cor de fundo, se alguma estiver definida
  3. Classes de preenchimento, margem, borda e raio da borda
  4. Classe da largura, a menos que a largura esteja definida como "automática"
  5. As classes fixas de tamanho e espessura da fonte
  6. Classes dos estados interativos (hover, foco e ativo), que variam conforme o tipo de componente
  7. Classes do estado desabilitado, se "desabilitado" estiver marcado

Os botões recebem hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 e focus:ring-blue-500. Um botão que não está desabilitado também recebe cursor-pointer. Campos de texto, áreas de texto e componentes de seleção recebem, em vez disso, focus:outline-none, focus:ring-2, focus:ring-blue-500 e focus:border-blue-500. As trilhas de navegação não recebem nenhuma dessas classes interativas, e o estado desabilitado nunca se aplica a uma trilha de navegação, pois uma lista de navegação não pode ser desabilitada.

Exemplo: botão

Com as configurações padrão (texto branco, fundo azul-500, preenchimento médio e cantos arredondados), a ferramenta gera:

1<button
2  className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
3>
4  Button
5</button>
6

Exemplo: campo de texto

Com texto cinza, fundo branco, preenchimento pequeno, raio da borda grande, largura total e a opção "obrigatório" marcada:

1<input
2  type="text"
3  className="text-gray-700 bg-white p-2 m-0 border border-transparent rounded-lg w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
4  placeholder="Enter your name"
5  required
6/>
7

Exemplo: área de texto e seleção

Áreas de texto e componentes de seleção seguem a mesma regra de criação de classes dos campos de texto. Uma área de texto com texto preto, preenchimento médio, arredondamento médio, largura total e 4 linhas:

1<textarea
2  className="text-black p-4 m-0 border border-transparent rounded w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
3  placeholder="Enter your message"
4  rows={4}
5></textarea>
6

Um componente de seleção com as mesmas cores e o mesmo espaçamento do exemplo de campo de texto acima, e três opções:

1<select
2  className="text-gray-700 bg-white p-2 m-0 border border-transparent rounded w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
3  required
4>
5  <option value="option1">Option 1</option>
6  <option value="option2">Option 2</option>
7  <option value="option3">Option 3</option>
8</select>
9

Exemplo: trilha de navegação

Os links e separadores da trilha de navegação sempre usam classes fixas (hover:text-blue-600 nos links, mx-2 text-gray-400 no separador "/"). Somente a lista externa recebe as cinco propriedades de estilo compartilhadas. Com texto cinza e sem preenchimento ou arredondamento:

1<nav className="flex" aria-label="Breadcrumb">
2  <ol className="text-gray-700 p-0 m-0 border border-transparent text-base font-medium flex space-x-2">
3  <li className="flex items-center">
4    <a href="/" className="hover:text-blue-600">Home</a>
5  </li>
6  <li className="flex items-center">
7    <span className="mx-2 text-gray-400">/</span>
8    <a href="/components" className="hover:text-blue-600">Components</a>
9  </li>
10  </ol>
11</nav>
12

Visualização responsiva versus classes responsivas

A ferramenta tem um controle "Visualização responsiva" com três opções: celular, tablet e desktop. Alternar entre elas apenas altera a largura da caixa de visualização, para que a pessoa possa ver aproximadamente como um componente ficaria em uma tela mais estreita. Isso não adiciona nenhum prefixo de breakpoint do Tailwind, como sm:, md:, lg: ou xl:, ao código gerado. A saída JSX é a mesma independentemente da visualização responsiva selecionada. Quem precisar que um componente tenha aparência diferente em diferentes larguras de tela deve adicionar manualmente essas classes de breakpoint ao código copiado.

Como adicionar o Tailwind CSS a um projeto React

  1. Instale os pacotes: npm install -D tailwindcss postcss autoprefixer
  2. Configure os arquivos de configuração: npx tailwindcss init -p
  3. Liste os arquivos-fonte do projeto em tailwind.config.js, na propriedade content
  4. Adicione as três diretivas do Tailwind ao arquivo CSS principal: @tailwind base; @tailwind components; @tailwind utilities;
  5. Cole um componente gerado em um arquivo React

Dúvidas frequentes

O que o React Tailwind Component Builder faz? Ele gera um componente React estilizado e suas classes Tailwind CSS correspondentes, além de exibir uma visualização ao vivo enquanto a pessoa ajusta as configurações.

A ferramenta adiciona automaticamente classes de breakpoint responsivas, como sm: ou md:? Não. O controle celular/tablet/desktop apenas redimensiona a caixa de visualização. O código exportado não tem classes sm:, md:, lg: ou xl:; elas precisam ser adicionadas manualmente, se necessário.

Posso alterar a margem, o estilo da borda ou o tamanho da fonte? Não pela interface. Todo componente gerado usa a mesma margem fixa (m-0), borda (border border-transparent), tamanho da fonte (text-base) e espessura da fonte (font-medium). Altere esses valores editando diretamente o código copiado.

A ferramenta salva meus componentes? Não. Não há recurso de salvamento. Copie o código gerado e armazene-o nos próprios arquivos do projeto.

Ela gera TypeScript? A ferramenta gera JSX (sintaxe JavaScript). A saída é uma marcação JSX simples, portanto pode ser colada em um arquivo .tsx sem alterações, embora nenhuma definição de tipo seja gerada.

A ferramenta é gratuita? Sim. Ela é executada inteiramente no navegador, sem conta e sem enviar solicitações a um servidor.

Ela funciona com Next.js, Gatsby ou outros frameworks React? Sim. O código gerado é JSX simples com classes Tailwind, portanto funciona em qualquer framework baseado em React que tenha o Tailwind CSS configurado.