Estamos a pocos meses de lanzar AprendeStrapi.com

Inscríbete al curso

Como actualizar TailwindCSS v3 a TailwindCSS v4 con Astro.js

Como actualizar TailwindCSS v3 a TailwindCSS v4 con Astro.js

Así como escuchaste, TailwindCSS v4 ya está aquí y con él, muchas mejoras y cambios que debes tener en cuenta para migrarte a esta nueva versión. En este artículo, te compartiré algunos detalles sobre esta nueva versión y cómo puedes actualizar tu proyecto de Astro.js a TailwindCSS v4.

¿Qué es TailwindCSS?

TailwindCSS es un framework de CSS que se popularizó hace algunos años en la comunidad de desarrollo web, creada por Adam Wathan y Steve Schoger en 2017. Su principal objetivo es permitir la creación de interfaces de usuario de forma rápida utilizando clases de utilidad, es decir, clases ya definidas que puedes aplicar directamente en tu HTML.

Tailwind Connect 2023

Durante 2023, Adam Wathan anunciaron Oxide, un motor escrito en Rust que permitiera unificar las herramientas de TailwindCSS y que permitiría el procesado de los estilos de forma más rápida y eficiente, permitiendo así hacer cosas un poco diferentes.

Aquí te dejo el vídeo donde puedes indagar más sobre este anuncio: Conferencia Tailwind Connect 2023 en YouTube

En ese mismo momento, se lanzó la versión alpha de lo que sería hoy TailwindCSS v4 y que ahora ya está disponible para todos los desarrolladores.

Cambios importantes

  • Diseñado para la web moderna: Construido sobre las caracteristicas de CSS modernas como Capas de Cascada y propiedades personalizadas.
  • Instalación más simple: Si anteriormente, con el tailwind.config.js era sencillo de configurar, ahora es aún más sencillo.
  • Detección de contenido automático: Ahora, TailwindCSS puede detectar automáticamente las clases que estás utilizando en tu proyecto y solo compilará las que realmente estás utilizando, sin necesidad de registrar cada uno de los paths donde podría encontrar clases de TailwindCSS.
  • CSS-first: Ahora, te sentirás como si estuvieras escribiendo CSS, esto es de gran valor para nosotros disfrutar de la mejor experiencia en el desarrollo.
  • Nueva paleta de colores: Ahora TailwindCSS v4 trae una nueva paleta de colores que se ajusta a las tendencias actuales de diseño, y además, utilizando oklch en lugar de rgb para una mejor experiencia de color.

Si quieres consultar todos los cambios de forma más detallada puedes hacerlo en el anuncio de TailwindCSS v4.

Y ahora que ya te he contado un poco más sobre TailwindCSS v4, vamos a ver cómo puedes actualizar tu proyecto de Astro.js a esta nueva versión.

Actualizando TailwindCSS v3 a TailwindCSS v4

Anteriormente para la versión 3, utilizabamos @astrojs/tailwind como integración en Astro.js para poder utilizar TailwindCSS en nuestros proyectos. Sin embargo, esta herramienta no es compatible con la nueva versión por lo que debemos hacer algunos cambios en nuestro proyecto.

  1. Primero, debemos desinstalar @astrojs/tailwind de nuestro proyecto:
# npm
npm uninstall @astrojs/tailwind
# yarn
yarn remove @astrojs/tailwind
# bun
bun remove @astrojs/tailwind
  1. Instalaremos la dependencias necesarias para trabajar con TailwindCSS v4.
# npm
npm install tailwindcss@latest @tailwindcss/vite@latest
# yarn
yarn add tailwindcss@latest @tailwindcss/vite@latest
# bun
bun add tailwindcss@latest @tailwindcss/vite@latest
  1. Ahora, vamos a modificar nuestro archivo astro.config.mjs. En este archivo debemos quitar la integración con @astrojs/tailwind y agregar la integración con @tailwindcss/vite. Si cuentas, con más integraciones solo elimina la correspondiente a TailwindCSS.
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind'; 
import tailwindcss from '@tailwindcss/vite'; 

export default defineConfig({
  vite: { 
    plugins: [tailwindcss()], 
  }, 
  integrations: [tailwind(), react()], 
  integrations: [react()], 
})
  1. Por último, vamos a modificar nuestro archivo de CSS donde cargamos TailwindCSS. Para esta nueva versión, debemos importar TailwindCSS de forma diferente.
/* Antes */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Ahora */
@import "tailwindcss";

De esta manera, ya habremos actualizado nuestro proyecto a TailwindCSS v4 y podremos seguir trabajando con esta nueva versión.

¿Qué pasa si tengo colores personalizados?

Ahora, con esta nueva versión tendrás dos opciones, utilizar tu configuración actual en tailwind.config.js o migrarlo a la nueva forma de registrar variables en el tema de TailwindCSS.

Usando mi configuración actual

Si de momento es muy complejo mover todo a la nueva versión, podrás hacer uso de la propiedad @config e indicarle el path de tu archivo de configuración. Esto lo ha hecho el equipo de TailwindCSS para mantener la compatibilidad con las versiones anteriores y que puedas ir migrando de forma gradual.

@import "tailwindcss";
/* Cargando archivo de configuración */
@config "tailwind.config.js";

De esta forma, el motor de TailwindCSS seguirá utilizando tu configuración actual y podrás seguir trabajando con ella.

Migrando a la nueva forma

Sin embargo, si decides actualizarte a la nueva versión, deberás migrar cada uno de los valores definidos en tu archivo de configuración a la nueva forma de registrar variables en el tema de TailwindCSS.

@import "tailwindcss";
@config "tailwind.config.js";

/* Registrando nuevas variables */
@theme {
  --color-primary: #ff0000;
  --font-sans: 'Inter', sans-serif;
  --text-big: 2rem;
}

Esto generará clases como bg-primary o text-primary que podrás utilizar en tu proyecto, ¿muy fácil no?.

Ahora, ¿y si tengo plugins?

No te preocupes, sabría que lo preguntarías, para ello tenemos una nueva propiedad @plugin que te permitirá registrar tus plugins de forma sencilla.

Sin embargo, está funcionalidad se mantiene como compatibilidad. Por lo que por ejemplo, si utilizas @tailwindcss/typography podrás seguir utilizandola sin problemas.

@import "tailwindcss";
@config "tailwind.config.js";

@theme {
  --color-primary: #ff0000;
  --font-sans: 'Inter', sans-serif;
  --text-big: 2rem;
}

/* Cargando un plugin */
@plugin "tailwindcss/typography";

Pero eso si, no podrás personalizar los valores de los plugins desde la nueva versión. Por ejemplo, en este plugin anteriormente lo haciamos de la siguiente forma:

export default {
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {...},
        },
      }),
    },
  },
};

Por lo que si necesitas modificar tus plugins, puedes utilizar una forma híbrida, migrando todo lo que ya es compatible a la nueva versión y solo cargar tu archivo de configuración con estas modificaciones.

Espero que te sea de utilidad esta guía, y puedas actualizar tu proyecto de Astro.js a TailwindCSS v4 sin problemas. Si tienes alguna duda, puedes escribirme a través de mi X (antes Twitter) o algun otro medio de tu preferencia.

Espero que disfrutes de esta nueva versión de TailwindCSS y puedas sacarle el máximo provecho en tus proyectos.

Más desde Coderdiaz Studio
Adios, 2024