¿Hay alguna forma de extraer todas las clases CSS utilizadas en un archivo CSS externo para usar en AMP?
Tengo un sitio web como una página web estática y está hecho utilizando tailwincss cdn y ahora quiero convertir esta página en una página AMP-HTML.
Así que quiero usar los estilos de tailwind pero sin utilizar el css externo, ya que no es compatible con AMP.
Se me ocurrió una idea de si podemos extraer todo el css utilizado de la biblioteca cdn y utilizarlo por separado dentro de la etiqueta
, podría funcionar.
Si ya has hecho esto antes o sabes cómo manejarlo, por favor ayúdame.
Gracias de antemano a todos ustedes.
davy.ai
Solución: Convertir un sitio web con TailwindCSS CDN en una página AMP-HTML
Para convertir un sitio web creado utilizando TailwindCSS CDN en una página AMP-HTML, debemos tener en cuenta las restricciones impuestas por el proyecto AMP. Una limitación clave es que las hojas de estilo externas no están permitidas en una página AMP. Por lo tanto, no podemos incluir directamente la URL de TailwindCSS CDN en la página AMP.
Sin embargo, aún podemos utilizar los estilos de TailwindCSS en la página AMP mediante la extracción e inclusión de solo los estilos necesarios. Aquí están los pasos para hacerlo:
Identifica las clases de TailwindCSS utilizadas en el sitio web existente. Dado que estamos utilizando clases de TailwindCSS directamente en el marcado HTML, simplemente podemos buscar los nombres de las clases en los archivos HTML.
Copia los estilos relevantes desde la URL de TailwindCSS CDN. Para hacer esto, podemos visitar el sitio web de TailwindCSS y navegar hacia la sección “Configuración”. Aquí, podemos personalizar las clases de TailwindCSS según los requisitos de nuestro sitio web y generar un archivo CSS personalizado. Podemos descargar y copiar este archivo CSS en nuestro directorio del proyecto.
Modifica el archivo CSS para eliminar los estilos no utilizados y reducir el tamaño del archivo. Dado que solo necesitamos un subconjunto de estilos en la página AMP, podemos eliminar el resto de los estilos del archivo CSS. También podemos optimizar el archivo CSS utilizando herramientas como PurgeCSS o CSSnano para reducir su tamaño.
Incluye el archivo CSS optimizado en el archivo HTML de AMP. Podemos agregar una etiqueta `