Ele pode converter CSS em Tailwind?

Sim. Cole um bloco de declaração CSS e Tailfind o aplica a um elemento de amostra antes de exportar a lista de classes Tailwind mais próxima.

Os valores personalizados são preservados?

Tailfind mapeia valores para classes Tailwind padrão quando possível e mantém valores não padrão visíveis como classes arbitrárias em vez de ocultá-los.

Devo colar uma folha de estilo completa?

O conversor CSS foi projetado para blocos de declaração. Use o conversor HTML/CSS quando seletores, classes, marcação aninhada ou uma folha de estilo mais completa forem necessários.

Conversor CSS para Tailwind

Cole um bloco de declaração CSS e converta a amostra renderizada em classes Tailwind que você pode copiar em componentes.

CSS

Tailwind v4

Nenhuma saída ainda

A saída Tailwind gerada aparece aqui automaticamente.

Conversor Tailwind com pixels perfeitos

Converta CSS em classes Tailwind limpas

Primeira conversão da declaração: Cole um bloco de declaração CSS e Tailfind o aplica a um elemento de amostra antes de converter o resultado renderizado em classes Tailwind reutilizáveis.
Preferência de utilitário padrão: Os padrões Tailwind portáteis são preservados quando os valores da declaração correspondem à escala da estrutura.
Fallback de valor arbitrário: Valores não padrão tornam-se classes arbitrárias explícitas, para que pixels, cores, sombras e tempos personalizados sejam fáceis de inspecionar.
Saída segura para layout: Espaçamento, dimensionamento, exibição, grade, flexão, bordas, sombras e tipografia são mapeados a partir da amostra renderizada.
Extração rápida de classes: A saída é uma lista de classes Tailwind focada que está pronta para ser copiada em um componente, pico de token ou passagem de limpeza.
Bom para auditorias: Use-o para substituir blocos CSS únicos, experimentos de estilo inline e protótipos de sistemas de design por classes Tailwind mais claras.

Guia do conversor CSS

Transforme declarações CSS em classes Tailwind

O conversor CSS para Tailwind transforma um bloco de declaração nas classes de utilitário Tailwind portáteis mais próximas. É útil para tokens de design únicos, limpeza de estilo inline e movimentação de pequenos trechos CSS para marcação de componente.

Tailfind aplica as declarações a um elemento de amostra antes da conversão, de forma que os valores de layout, espaçamento, cor, borda, sombra, tipografia e dimensionamento sejam interpretados por meio do mesmo caminho de renderização do navegador usado pela extensão.

Use-o para converter propriedades CSS em classes Tailwind, verificar quais valores correspondem à escala padrão do Tailwind e manter valores não padrão explícitos como classes arbitrárias.

Ele pode converter CSS em Tailwind?: Sim. Cole um bloco de declaração CSS e Tailfind o aplica a um elemento de amostra antes de exportar a lista de classes Tailwind mais próxima.
Os valores personalizados são preservados?: Tailfind mapeia valores para classes Tailwind padrão quando possível e mantém valores não padrão visíveis como classes arbitrárias em vez de ocultá-los.
Devo colar uma folha de estilo completa?: O conversor CSS foi projetado para blocos de declaração. Use o conversor HTML/CSS quando seletores, classes, marcação aninhada ou uma folha de estilo mais completa forem necessários.

Ignorar conversão manual

Converter qualquer página ativa em Tailwind CSS limpo

Tailfind traz o conversor para o seu navegador, para que você possa capturar a UI de produção diretamente da página que está visualizando.

Mais informações

Baixar