Primeros Pasos, Instalar Tailwind CSS mediante el CDN

¿Cómo utilizar Tailwind CSS mediante el CDN?

Si no deseamos instalar paquetes utilizando Node, una opción adicional es utilizar Tailwind CSS directamente mediante el CDN. El CDN (Content Delivery Network) es una dirección url incluimos dentro de nuestro código HTML y desde donde se descargan todos los estilos de Tailwind CSS.

Pasos para usar Tailwind CSS desde el CDN

Creamos un nuevo proyecto en blanco y dentro de este un archivo index.html.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
    </head>

    <body>
        <h1>Hola Mundo</h1>
    </body>
</html>

Ejecutamos nuestro servidor utilizando live-server.
```
npx live-server .
```

En este momento solo tenemos una página que muestra un “Hola Mundo”. Vamos a agregar Tailwind CSS desde el cd y unas etiquetas a nuestro H1.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <script src="https://cdn.tailwindcss.com"></script>
    </head>

    <body>
        <h1 class="text-3xl font-bold underline">Hola Mundo</h1>
    </body>
</html>

En este punto podremos ver el Hola Mundo actualizado mostrando los estilos de las etiquetas de Tailwind CSS.

¿Cómo personalizar Tailwind CSS usando el CDN?

Para personalizar tailwind podemos invocar la configuración directamente desde JavaScript. Por ejemplo si deseamos agregar un nuevo color lo haríamos de la siguiente forma.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.tailwindcss.com"></script>
        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        colors: {
                            purpura: 'purple',
                        },
                    },
                },
            }
        </script>
    </head>

    <body>
        <h1 class="text-3xl font-bold underline text-purpura">Hola Mundo!</h1>
    </body>
</html>

En este ejemplo hemos hemos creado oun nuevo color llamado purpura que utilizamos directamente dentro de nuestra etiqueta H1 de html.

Ahora vamos a hacer lo mismo pero utilizando utilities, para ello utilizamos la etiqueta style.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.tailwindcss.com"></script>
        <style type="text/tailwindcss">
            @layer utilities {
                .purpura {
                    color: purple;
                }
            }
        </style>
    </head>

    <body>
        <h1 class="text-3xl font-bold underline purpura">Hola Mundo!</h1>
    </body>
</html>

Finalmente, es posible utilizar algunos plugins adicionales si lo indicamos en la url con la que invocamos Tailwind CSS mediante el CDN.

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

En esta lección hemos aprendido como utilizar Tailwind CSS mediante una dirección CDN, ademas hemos podido extender las opciones agregando nuevos colores mediante el objeto tailwind.config y nuevas utilities mediante la etiqueta style. Utilizar un CDN ofrece algunas ventajas como evitar tener que instalar paquetes y empezar directamente a utilizar Tailwind CSS.