Convertir CSS a clases de Tailwind CSS — Numio
Convierte declaraciones CSS en clases de utilidad de Tailwind CSS, mostradas como reglas @apply para cada selector. Úsalo para buscar las utilidades equivalentes al migrar estilos existentes. El conversor está orientado a Tailwind CSS v3.
Encontrar las utilidades de Tailwind que corresponden a reglas CSS existentes durante una migración.
Cuándo usarla
- Encontrar las utilidades de Tailwind que corresponden a reglas CSS existentes durante una migración.
- Aprender los nombres de clase de Tailwind convirtiendo CSS que ya conoces.
Cómo usarla
- Pega reglas CSS.
- Ajusta el valor base de rem o la configuración de Tailwind si tu proyecto usa ajustes personalizados.
- Copia las clases que siguen a @apply en tu marcado o tu hoja de estilos y comprueba el resultado en tu proyecto Tailwind.
Entrada CSS
.card { display: flex; padding: 1rem; }Salida Tailwind (escala predeterminada)
.card {
@apply flex p-4;
}Detalles y limitaciones
Los nombres de clase y las escalas siguen Tailwind CSS v3. No se garantiza la compatibilidad con la configuración y la sintaxis de Tailwind CSS v4.
Es posible que los valores personalizados, los selectores complejos y los pseudoelementos no se conviertan. No se garantiza que el resultado se vea idéntico, así que compruébalo en la página real.
El campo de configuración personalizada se evalúa como JavaScript en tu navegador. No pegues configuraciones en las que no confíes.
FAQ
¿Es compatible con Tailwind CSS v4?
Usa los nombres de clase y las escalas de Tailwind CSS v3. Muchas utilidades, como flex, p-4 y text-sm, mantienen su nombre en v4, pero v4 traslada la configuración a CSS y renombra algunas utilidades, así que revisa la salida en tu proyecto v4.
¿Cómo uso nombres de clase en lugar de @apply?
Copia la lista que sigue a @apply en el atributo class del elemento, por ejemplo class="flex p-4". La forma @apply agrupa las clases según el selector original.
¿Puede convertir clases de Bootstrap a Tailwind?
No. Convierte declaraciones CSS, no nombres de clase de otro framework. Pega las reglas CSS que hay detrás de un componente de Bootstrap para ver las utilidades equivalentes.
¿Por qué algunas declaraciones no se convierten?
Los valores fuera de la escala de Tailwind, los selectores complejos y los pseudoelementos pueden no tener una utilidad directa. Mantenlos como CSS o añádelos a tu configuración de Tailwind.