ToolHub
Abrir ferramenta

CSS para Tailwind

Converta propriedades CSS em classes utilitárias Tailwind CSS, com suporte a variantes responsivas e de estado

Ferramentas CSS
Iniciar ferramenta Todas as ferramentas

Sobre esta ferramenta

O conversor de CSS para Tailwind transforma propriedades CSS tradicionais em classes utilitárias equivalentes do Tailwind CSS. Ele lida com espaçamento, tipografia, cores, flexbox, posicionamento, bordas e muito mais, com suporte a sintaxe de valor arbitrário para valores não padrão. Ideal para desenvolvedores que estão migrando projetos existentes para o Tailwind ou aprendendo o framework utility-first.

Principais recursos

Pré-visualização rápida

Casos de uso

css tailwind converter

Perguntas frequentes

Quais propriedades CSS são suportadas?

O conversor suporta display, flexbox, posicionamento, espaçamento, tipografia, cores, bordas, overflow, cursor e muitas outras propriedades CSS. Ele lida tanto com propriedades abreviadas quanto completas.

Valores arbitrários são suportados?

Sim, quando um valor CSS não pode ser mapeado para uma classe Tailwind padrão, o conversor gera sintaxe de valor arbitrário usando colchetes, por exemplo, w-[200px] ou text-[#ff6600].

Posso converter um arquivo CSS inteiro de uma vez?

Sim, você pode colar várias regras CSS com seletores, e a ferramenta converterá cada propriedade para seu equivalente Tailwind. Propriedades não reconhecidas são exibidas como comentários para facilitar a revisão.

Como as cores são convertidas?

O conversor mapeia cores hexadecimais comuns para nomes de cores do Tailwind, por exemplo, #3b82f6 mapeia para blue-500. Cores que não correspondem à paleta padrão do Tailwind são exibidas com sintaxe de valor arbitrário, como bg-[#ff6600].

Meu código CSS é enviado para algum servidor?

Não. Todas as conversões ocorrem localmente no navegador. Seu código CSS não é enviado ou transmitido a nenhum servidor, garantindo que seu trabalho permaneça totalmente privado.

Ferramentas relacionadas

Simulador de DaltonismoConstrutor de Animações CSSCombinação de Fontes CSSTemplate de CSS Grid