Probablemente, TailwindCSS es uno de los frameworks más populares en la comunidad de desarrollo web debido a su facilidad de uso y el ahorro de tiempo que proporciona. Es muy probable que estés buscando como utilizar Tailwind en tu sitio web con Astro, por lo que vamos a ver los pasos que deberías seguir para activarlo.
Instalación de Tailwind
En primer lugar, te recomiendo instalar una extensión en VSCode, que te mostrará un autocompletado cuando estés escribiendo las clases en tu HTML. Además de esto, debes instalar y configurar la integración de Astro, que puede hacerse directamente desde la terminal:
- 1️⃣ Instalar la extensión Tailwind Intellisense para VSCode.
- 2️⃣ Realizar la instalación automática, o manual si no funciona.
Veamos los pasos a seguir:
Para utilizar Tailwind en Astro, necesitamos instalar y configurar una integración. Astro tiene un asistente que lo hace todo de forma automática, simplemente ejecutando el siguiente comando:
$ npx astro add tailwind
El asistente nos irá confirmando paso a paso las acciones que realizará.
Si tienes alguna duda o el proceso falla, te recomiendo echar un vistazo a la Instalación manual donde tienes cada uno de los pasos que realiza la instalación automática.
El primer paso es instalar la integración de TailwindCSS con Vite (que es lo que usa Astro por debajo) y el propio núcleo del framework CSS:
$ npm install @tailwindcss/vite tailwindcss
Una vez instalados estos paquetes, debemos tener un fichero CSS donde se importe el framework. Por ejemplo, si no existe, lo habitual suele ser crear un fichero src/styles/global.css o src/css/global.css donde tenemos los estilos globales.
En este archivo debemos añadir la siguiente linea:
@import "tailwindcss";
Una vez hecho esto, nos dirigimos a la configuración de Astro, en el fichero astro.config.mjs y añadimos la integración con Vite:
// @ts-check
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
// https://astro.build/config
export default defineConfig({
vite: {
plugins: [tailwindcss()]
}
});
Esto hará que Vite cargue la integración con TailwindCSS para que funcione correctamente. Por último, sólo tenemos que asegurarnos de que el fichero global.css, mencionado anteriormente, sea importado en algún lugar como por ejemplo, en nuestro layout principal, por ejemplo, src/layouts/BaseLayout.astro:
---
import "./src/styles/global.css";
---
Con esto, lo tendremos todo listo para utilizar.
Si quieres aprender más, echa un vistazo a este artículo de TailwindCSS.
Probando TailwindCSS
Una vez realizada la instalación, comprobemos que todo funciona correctamente. Para ello, crearemos un nuevo componente, por ejemplo src/components/HelloWorld.astro y lo añadimos en nuestro src/pages/index.astro. En dicho componente, incluimos lo siguente:
---
const title = "Hello World!";
---
<div class="bg-blue-900 text-white p-5">
<h1 class="font-semibold text-amber-300">{title}</h1>
<p class="text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Pariatur, sed eius quaerat corporis est esse quibusdam dolorem nobis, tempora
quidem repudiandae? Illum maiores voluptatem aliquam eum, consequuntur
temporibus iste ipsam.</p>
</div>
Como se puede ver, hemos añadido algunas clases de TailwindCSS (que debería detectarlas la extensión y ofrecernos un listado si intentamos modificarlas), que deberían renderizarse y darnos un estilo en la página en la que estamos trabajando.
