# Clases Tailwind a CSS Convierte clases Tailwind (p. ej. p-4 flex gap-2 hover:bg-blue-500/20 md:p-6) en CSS equivalente y copiable para proyectos sin Tailwind. Cubre spacing, flex, grid, colores, tipografía, bordes, efectos, transformaciones, transiciones y variantes responsive/estado. > Página canónica: https://elysiatools.com/es/tools/tailwind-class-to-css-converter - **Categoría:** Development - **Palabras clave:** tailwind, tailwind a css, snippet css, clases utilitarias, tailwind playground, convertidor css, design tokens, flex, grid, hover ## Descripción general Ve exactamente qué produce una clase Tailwind — luego copia el CSS plano a cualquier proyecto. **Por qué existe.** Tailwind es genial, pero a veces necesitas CSS crudo: un proyecto sin Tailwind, una plantilla de email, una auditoría de design tokens o una página única. Pega las clases y obtén CSS equivalente al instante. **Cobertura.** El motor de reglas maneja las utilidades más usadas: layout (flex/grid/gap/display/position/z-index/overflow), spacing (padding/margin/space-x-y), sizing, colores, tipografía, bordes, efectos, transformaciones, transiciones y variantes responsive/estado. **Modificador de opacidad.** La sintaxis `bg-blue-500/20` se expande a `rgba()` para que funcione en todas partes. **Limitaciones.** Es una tabla de reglas estática, no el motor JIT completo. Para valores arbitrarios y fidelidad 100% usa el compilador oficial de Tailwind. ## Entradas - **Clases Tailwind** (textarea): p-4 flex gap-2 hover:bg-blue-500/20 md:p-6 rounded-lg shadow-md - **Selector de ámbito** (select) ## Cuándo usarlo - Al migrar componentes diseñados con Tailwind CSS a proyectos de CSS puro o plantillas de correo electrónico HTML. - Para auditar o extraer tokens de diseño específicos a partir de clases utilitarias sin necesidad de instalar el compilador JIT. - Cuando necesitas aplicar estilos rápidos basados en Tailwind dentro de un entorno web tradicional o CMS limitado. ## Cómo funciona - Introduce las clases de Tailwind en el campo de texto, separadas por espacios (por ejemplo, `p-4 flex gap-2 md:p-6`). - Define el selector de ámbito deseado, como una clase personalizada (`.my-class`) o variables globales (`:root`). - El motor estático procesa las clases, expande los modificadores de opacidad a formato `rgba()` y genera las media queries correspondientes. - Copia el código CSS resultante estructurado con sus variantes de estado (como `:hover` o `:focus`) y adaptaciones responsive. ## Casos de uso - Creación de plantillas de email HTML que requieren estilos CSS en línea o embebidos sin soporte para frameworks modernos. - Extracción de estilos de componentes de UI de Tailwind para integrarlos en sistemas heredados (legacy) que solo admiten CSS tradicional. - Documentación y auditoría rápida de clases de diseño para equipos que definen hojas de estilos compartidas. ## Preguntas frecuentes ### ¿Soporta esta herramienta valores arbitrarios como `w-\[327px\]`? No de forma completa. Al ser un motor de reglas estático, los valores arbitrarios complejos tienen soporte limitado; para una fidelidad total se recomienda el compilador oficial. ### ¿Cómo maneja el modificador de opacidad como `bg-blue-500/20`? Convierte la sintaxis de barra inclinada directamente a una función `rgba()` compatible con cualquier navegador web. ### ¿Qué variantes de estado y responsive son compatibles? Soporta estados comunes como `hover`, `focus` y `active`, además de breakpoints responsive estándar como `sm`, `md`, `lg`, `xl` y `2xl`. ### ¿Puedo aplicar las reglas CSS a un selector específico? Sí, puedes configurar un selector de ámbito personalizado como `.mi-clase` para envolver todas las propiedades generadas. ### ¿Requiere conexión a internet o instalar Node.js? No, la conversión se realiza de forma local e instantánea en tu navegador sin necesidad de dependencias externas. ## Herramientas relacionadas - [Convertidor de Markdown a PDF](https://elysiatools.com/es/tools/markdown-to-pdf-converter): Convertir archivos Markdown a documentos PDF con formato, resaltado de sintaxis y estilo - [Convertidor Markdown a HTML](https://elysiatools.com/es/tools/markdown-to-html): Convierte texto Markdown a HTML con opciones de formato personalizables - [Convertidor HTML a Markdown](https://elysiatools.com/es/tools/html-to-markdown): Convierte contenido HTML a formato Markdown con opciones de conversión personalizables - [Explicador de Expresiones Cron](https://elysiatools.com/es/tools/cron-expression-explainer): Analiza una expresión cron de 5/6 campos o Quartz en una descripción en lenguaje natural, desglosa los campos y lista las próximas N ejecuciones en cualquier zona IANA, con una explicación natural generada por IA - [Tarjeta de especificación responsive Figma iOS Android pt dp sp](https://elysiatools.com/es/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Convierte valores px de Figma a las unidades correctas por plataforma y genera una spec card para desarrolladores: pt de iOS (@1x/@2x/@3x con px renderizado por escala), dp/sp de Android (tabla de renderizado mdpi…xxxhdpi y escala de fuente), rem/vw web con snippet clamp() fluido; audita objetivos táctiles mínimos (44pt iOS / 48dp Android / 44px y 24px WCAG) y anota clases de ventana de Material y breakpoints de Tailwind. - [Vista Previa de Markdown](https://elysiatools.com/es/tools/markdown-preview): Convierte Markdown a HTML con resaltado de sintaxis y temas personalizables - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Lista Indentada a Árbol ASCII](https://elysiatools.com/es/tools/ascii-tree-from-indented-list): Convierte una lista jerárquica indentada (2/4 espacios o tabulación; prefijos -, *, 1. opcionales) en un árbol de directorios ASCII copiable. Dos estilos: cuadro Unicode y ASCII clásico. Interruptores para líneas guía completas, espacios finales y hojas entre corchetes. ## Ejemplos - [Ejemplos de Tailwind CSS](https://elysiatools.com/es/samples/tailwind-css): Ejemplos de Tailwind CSS - Framework CSS utilitario primero con diseño receptivo, componentes y configuración personalizada - [Ejemplos del Framework CSS Bulma](https://elysiatools.com/es/samples/bulma): Ejemplos del framework CSS Bulma incluyendo columnas, componentes, controles de formulario, sistema de diseño y patrones de diseño modernos basados en CSS - [Ejemplos de Selectores CSS](https://elysiatools.com/es/samples/css-selectors): Colección de ejemplos de selectores CSS para pruebas de extracción y análisis - [Muestras CSS](https://elysiatools.com/es/samples/css-viewer-samples): Archivos de muestra para el visor CSS en el navegador