Desminificar CSS en línea
Introduce una hoja de estilos compactada y vuelve a leerla con facilidad. Selectores en líneas propias, una declaración por línea y bloques y consultas de medios con la sangría que escribirías a mano.
Por qué el CSS de producción ocupa una sola línea
Las hojas de estilos de producción suelen minificarse para reducir el texto enviado al navegador. Las herramientas de compilación pueden eliminar espacios y comentarios, acortar valores o combinar reglas compatibles. El resultado depende del optimizador elegido y de sus ajustes; no se garantiza una reducción concreta del tamaño ni una carga más rápida. Una hoja compilada de clases utilitarias puede contener muchas reglas pequeñas que dificultan leer el archivo compacto. El formato aplica una presentación uniforme para leerlas, pero no puede recrear los componentes fuente, archivos de preprocesador o ajustes de compilación que las generaron.
Volver a entender la cascada
El principal motivo para formatear una hoja de estilos es entender por qué una regla se aplica o no. Cuando cada selector ocupa su propia línea y sus declaraciones tienen sangría, puedes seguir la cascada: localizar todas las reglas dirigidas a un elemento, comparar su especificidad, ver cuál aparece al final y detectar ese important que anula tus cambios. Las consultas de medios y su contenido aparecen como bloques, lo que facilita seguir el comportamiento adaptable frente a un archivo compacto. Para investigar un caso concreto, copia la regla completa y la consulta de medios que la contiene antes de modificar nada. La hoja visible solo explica parte de la cascada: también cuentan los estilos en línea, otras hojas, la herencia y el DOM actual. Las herramientas de desarrollo del navegador muestran qué declaraciones se aplican realmente a un elemento. Utiliza el archivo formateado para comprenderlas en su contexto y confirma después el comportamiento con el tamaño de ventana que estás investigando. Si la detección automática identifica el CSS como JavaScript, comprueba la etiqueta mostrada antes de confiar en el resultado.
Compatibilidad con CSS moderno
El formateador entiende CSS actual, no solo un subconjunto antiguo. Puede formatear propiedades personalizadas, expresiones calc y clamp, propiedades abreviadas de grid y flexbox, consultas de contenedor, reglas anidadas, capas, bloques supports y keyframes. Las listas largas de selectores se distribuyen en varias líneas para facilitar la lectura y se conservan los comentarios que sobrevivieron a la compilación. Si el archivo combina CSS estándar con propiedades que llevan prefijos de proveedor, el resultado mantiene esas declaraciones y aplica el estilo del formateador.
Un consejo práctico para hojas compiladas
Al formatear una hoja compilada de Tailwind o Bootstrap, el archivo crece enseguida: decenas de miles de líneas son habituales. Activa los números de línea y usa la búsqueda del navegador para encontrar la clase o propiedad que te interesa en lugar de desplazarte por todo el archivo. Si tu objetivo es reducir el tamaño y no leerlo, recuerda que el trabajo relevante está en la configuración de compilación, porque las reglas sin uso se generaron antes de la minificación.
Preguntas frecuentes
¿Puedo desminificar una hoja compilada de Tailwind?
Sí, es uno de los usos más habituales de esta página. El resultado será muy largo porque el sistema genera una regla por clase utilitaria. Por eso, activar los números de línea y utilizar la búsqueda del navegador es la forma práctica de recorrerlo.
¿Se recuperan los comentarios?
Los comentarios que permanecen en el CSS proporcionado pueden aparecer en la salida formateada. Los que eliminó el minificador no pueden recuperarse de ese archivo, incluidas las explicaciones de por qué existe una regla. Consulta el repositorio fuente original si necesitas notas de diseño, indicaciones del autor o el historial de un selector.
¿Funciona con SCSS o Less?
Esta página está pensada para CSS estándar, incluida la salida compilada de Sass o Less. No admite como entrada las variables, mixins y directivas específicos de los preprocesadores. Compila primero esos archivos con las herramientas apropiadas del proyecto y usa este editor para inspeccionar la hoja resultante.