Forem: ulysses316

Migrando a Tailwind 4 en Next.js 15

ulysses316 — Fri, 24 Jan 2025 05:35:36 +0000

Lanzamiento de TailwindCSS 4.0

El día de ayer (22 de enero del 2025) salió oficialmente la versión 4.0 de TailwindCSS. Esta versión trae consigo varias mejoras, una de ellas es que ya no será necesario tener un archivo de configuración tailwind.config.js. Si bien este puede seguir existiendo, lo mejor es aprovechar la nueva integración directamente en el archivo CSS principal.

Contexto de la migración

Este artículo no hablará de todos los cambios en Tailwind, sino que se centrará en algunos problemas que encontré al migrar un proyecto que había iniciado recientemente. Pensé que sería una buena idea probar la nueva versión de Tailwind, así que decidí actualizar directamente.

La página oficial ya ofrece una guía bastante completa para realizar la migración. Incluye un script para hacer el upgrade automáticamente, y en mi caso funcionó bastante bien, salvo algunos pequeños inconvenientes.

Configuración del proyecto

En mi proyecto utilizo las siguientes herramientas:

Tailwind Typography
Next Themes
Fuentes de Google directamente con next/font/google

Problemas encontrados tras la migración

Una vez que ejecuté el script de migración y corrí el proyecto, casi todo funcionó correctamente, excepto dos aspectos:

Mis colores personalizados definidos en el archivo de configuración de Tailwind.
Las fuentes definidas en el layout de Next.js.

En los componentes donde definía los colores y las propiedades de manera explícita, todo funcionaba bien. Sin embargo, suelo agregar clases generales en el body para el color de fondo y las letras del tema claro y oscuro, y esto era lo que fallaba.

El script de migración trasladó toda mi configuración de Tailwind al archivo CSS y actualizó los nombres de las clases que debían cambiar, incluyendo el plugin de Tailwind Typography. Incluso las clases personalizadas que creé para expandir Tailwind funcionaban correctamente. Sin embargo, ignoraba mis directrices generales.

Solución

El problema estaba en que mi archivo CSS sobrescribía los estilos del body.

Esta clase se agrega por defecto al crear un proyecto en Next.js, y olvidé quitarla. Normalmente, con Tailwind puedes sobrescribir esto, pero no había revisado el archivo CSS.

Además, mi archivo CSS contenía variables que no utilizaba:

Aunque estas variables no afectaron mi flujo porque todos mis estilos están definidos con Tailwind, es buena práctica eliminarlas si no se van a usar.

Problema con las fuentes

Mis fuentes no se respetaban en ningún lugar donde utilizaba la clase generada por Tailwind. Esto se debía a que en Next.js declaraba las variables de fuentes con un nombre diferente al utilizado en el archivo de configuración de Tailwind.

En esta versión de Tailwind, que trabaja a nivel CSS, es necesario ser más explícito y usar el mismo nombre tanto en el archivo CSS como en el layout de Next.js. De lo contrario, el navegador no encontrará la variable definida.

Conclusión

Migrar a TailwindCSS 4.0 ofrece muchas ventajas, pero también requiere atención a detalles que muchas veces se dejan de lado, ya que Tailwind se encargaba de ellos. Revisar y ajustar los estilos generales y las variables puede evitar problemas comunes. Espero que esta experiencia te sea útil si decides dar el salto a esta nueva versión.

Foto de portada de: Luis Quintero

Acelera tu desarrollo con TailwindCSS.

ulysses316 — Fri, 15 Mar 2024 05:52:06 +0000

Hablemos de TailwindCSS, seguramente si eres desarrollador web y estás empezando con frameworks CSS, hayas escuchado hablar de Tailwind, pero al momento de buscarlo puede que te hayas llevado una mala impresión. No te preocupes, en este artículo vamos a hablar de sus fundamentos y porque es que es tan popular en la industria.

En este artículo te quiero llevar en tus primeros pasos con este framework, para que puedas conocer qué cosas son las que me enamoraron de él.

¿Qué vamos a ver en este artículo?

Instalación
Configuración
Fundamentos

Cabe mencionar, que vamos a ver cosas que puedes encontrar en la documentación, pero de una manera super resumida, así que te invito a echarle el ojo después de terminar de leer este artículo. 👀

Instalación

Vamos a hacer un proyecto sencillo, con puro HTML, CSS y JS.
A mí me gusta trabajar en Debian, así que todos los comandos que utilizaré seran de esta distribución y también utilizaré PNPM, para instalar los paquetes, pero sin problemas se puede hacer con el manejador de paquetes más te guste.

mkdir tailwind-example # Creamos una carpeta llamada tailwind-example para nuestro proyecto

cd tailwind-example # Ingresamos a la carpeta

pnpm install -D tailwindcss # Instalamos tailwind como dependencia de desarrollo

pnpm tailwindcss init # Inicializamos nuestro archivo de configuración de tailwind

Configuración

Una vez que ya tenemos instalado tailwind en nuestro proyecto, lo primero que tenemos que hacer es asegurarnos de que tengamos la configuración adecuada para leer nuestros archivos y podamos compilar correctamente el CSS que necesitemos.

El último comando que utilizamos nos crea el archivo de configuración de tailwind, en él lo primero que tenemos que hacer es decirle a qué archivos tiene que observar, buscando cambios en las clases para poder aplicarlo.

El archivo que vamos a tener al iniciar nuestro proyecto será el siguiente.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dentro de nuestra sección de content es donde definimos donde se encontraran nuestros archivos HTML (o js, jsx, tsx, según sea el proyecto que estemos creando.) para hacerlo hay dos patrones importantes que nos servirán.

* Para que busque cualquier cosa (archivos principalmente) excepto a los que se encuentren en sub-carpetas y archivos ocultos.
** Para que busque en el directorio actual, o subdirectorios.

Veamos algunos ejemplos.

content: [
    './pages/**/*.{html,js}',
    './components/*.{html,js}'
  ],

En el primer ejemplo de este código, le estamos diciendo, que busque cualquier archivo con terminación .html o .js, que se encuentre en cualquier subdirectorio o en el mismo directorio de pages.
El segundo ejemplo, es casi igual, con la diferencia, de que al no tener ** no buscara archivos en subdirectorios, únicamente buscara archivos .html o .js, dentro de esta carpeta.

Para este proyecto que haremos, utilizaré la siguiente estructura.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./*.{html,js}", 
    "index.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Por ultimo, te dejo como advertencia no usar una instrucción tan amplia como la siguiente ./**/*.{html,js} ya que esto tambien buscaria dentro de nuestra carpeta node_modules, y traeria problemas de rendimiento.

Bien, ya casi podemos comenzar con nuestro codigo.
Unicamente nos hacen falta 3 pasos más, pero te prometo que despues de esto veras un verdadero cambio en la velocidad en la que haces paginas web.

Creando archivos CSS

Seguramente te estas preguntando porque estamos creando archivos CSS, si se supone que tailwind es una super libreria que nos ayuda con eso.
Bueno, esto es porque tailwind no trabaja como otros frameworks que tenemos en el mercado, tailwind no te mete todos los estilos de su libreria en tu proyecto, lo que hace es crearte un archivo CSS, unicamente con las clases que utilizaste, esto ayudando enormemente en el tamaño final de tu aplicación.

Bien, pues entonces te invito a crear una carpeta styles (o como gustes llamarle) en tu proyecto y crees dos archivos, uno que sera el base, en el cual escribiremos las siguientes 3 lineas de codigo.

@tailwind base;
@tailwind components;
@tailwind utilities;

Y el otro archivo lo dejaremos tal cual.

¿Lo tienes? perfecto, entonces ahora podemos ir a la terminal y escribir el siguiente comando en la raiz de nuestro proyecto.

pnpm tailwind -i styles/base.css -o styles/master.css --watch

En este comando le estamos diciendo que ejecute el comando tailwind con la instruccion -i le decimos que le vamos a pasar un archivo de entrada, el cual tiene que ser el archivo al cual le agregamos las 3 lineas de codigo.
Con la instrucción -o le decimos que ese archivo sera su archivo de salida, en el cual vaciara todas los estilos que vayamos ocupando, ademas de un barrido a los estilos predeterminados de las etiquetas.
Y por ultimo, la instruccion --watch le decimos que se mantenga atento a cualquier cambio que haya dentro de estos archivos.

Creando nuestro archivo HTML.

Finalmente tenemos todo nuestro ambiente creado para poder trabajar con este famoso framework.
Vamos a crear nuestro archivo html, y lo unico que tenemos que hacer es importar el archivo de salida que le indicamos en el comando anterior, en mi caso, quedaria asi.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/master.css">
    <title>Document</title>
</head>
<body>

</body>
</html>

Muchos pasos para utilizar un framework, ¿no?, ¿porque no usar Bootstrap, Materialize, UIKit, o cualquier otro framework que hay alla afuera?

Bueno, ahora si podemos hablar de los fundamentos.

Fundamentos

Emepecemos viendo como seria crear un componente con HTML y CSS tradicional y despues veamos como seria utilizando Tailwind

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

Ahora veamos el codigo que usariamos en tailwind.

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

De primera instancia se ve bastante feo, vemos muchas clases en una misma etiqueta, expliquemos un poco las clases que tenemos en este elemento:

p-6 - padding: 1.5rem; /* 24px */
max-w-sm - max-width: 24rem; /* 384px */
mx-auto - margin-left: auto; / margin-right: auto;
bg-white - background-color: rgb(255 255 255);
rounded-xl - border-radius: 0.75rem; /* 12px */
shadow-lg - box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
flex - display: flex;
items-center - align-items: center;
space-x-4 - margin-left: 1rem; /* 16px */

Creo que ya te puedes dar una idea de que va tailwind, ¿no?
es antintuitivo hacer algo asi en CSS, tener tantas clases para cosas tan sencillas es raro, hemos aprendido que tenemos que crear clases que contengan las instrucciones especificas para cada elemento, pero hablemos de las ventajas de hacer esto.

1. No estás desperdiciando energía inventando nombres de clases.

Este punto se explica bastante bien solo, jaja.

2. Tu CSS deja de crecer.

Siempre que estamos creando paginas web, es normal que nuestro CSS siga creciendo y creciendo, por cada cosa nueva que añadimos, y al final tenemos un archivo CSS enorme, el cual es bastante dificil de mantener.

Prueba esta en el CSS que se utiilza para crear el componente que vimos anteriormente, te mostre el HTML, pero no el CSS, el cual es el siguiente:

  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }

Y con Tailwind no tenemos ni una sola linea de CSS.

3. Hacer cambios se siente más seguro.

Cuando creamos CSS, muchas veces queremos optimizar y creamos clases que creemos que podemos utilizar en varias partes de nuestra pagina, pero esto aveces no nos sale de la mejor forma, y resulta que en una seccion esa clase no nos sirvio y tenemos que cambiarla o crear otra con una pequeña diferencia.
Y si tomamos la desición de cambiarla corremos el riesgo de descuadrar la pagina.

4. ¿Que hay de otros frameworks?

Otros frameworks tambien nos dan mucha libertad de personalizacion, pero siempre partimos de un diseño inicial el cual nos marcan los desarrolladores, y algunas cosas que no podamos cambiar con sus propias clases tenemos que hacerlas de manera manual, y terminamos creando mas CSS.

¿Ahora ves que ventajas tiene tailwind sobre la programacion tradicional o sobre otros frameworks?

¿Porque no utilizar estilos en linea?

Esa es una pregunta que se hacen muchos cuando ven tailwind por primera vez.
Si ya estoy creando una linea super larga con clases especificas para cada acción que quiero realizar, ¿porque no simplemente pongo mis estilos directamente en cada una?
Veamos la respuesta de esto en tres puntos.

1. Constancia en los estilos.

Tailwind tiene bien definidas sus clases, tiene una amplia gama de valores, pero al fin y al cabo tenemos una guia.
Crear nuestros estilos en linea hace que cada etiqueta sea un mundo por si mismo, y que para cada modificacion nos veamos en la necesidad de leer toda la linea para entender como funciona.

2. Responsive design.

Aqui viene la primer cosa que cuando escuche me volo la cabeza, con tailwind podemos usar mediaqueries directamente en nuestras clases, sin la necesidad de ir a especificarlo nosotros en nuestro CSS.

3. Hover, focus y otros estados

Al igual que con las media queries, podemos hacer uso de estados como hover, focus, active y pseudoclases como after, before, y muchas mas.

Espero que con esta pequeña introducción te haya convencido un poco de darle una oportunidad a tailwind, si es asi, te invito a que me dejes algun comentario, para ver si escribimos una segunda parte, con un poco de codigo de tailwind en accion.

Cualquier duda, sugerencia u opinión son bien recibidas en la sección de comentarios 😁

Pueden encontrarme en Twitter, Github, LinkedIn, Instagram.

Foto de portada de Steve Johnson

Hello World- Deno 1.0 [Articulo de 2020]

ulysses316 — Mon, 17 Jul 2023 07:07:05 +0000

En este articulo solo haremos una breve introducción a Deno, pero les recomendamos el articulo de David Else que pueden encontrar aquí, el articulo de Aral Roca que les dejamos aquí y de la documentación de Deno.

Un poco de historia

Deno fue anunciado en la JSConf EU del 2018 por Ryan Dahl quien fue la persona la cual inicio el proyecto Node hace ya casi 11 años.

En la JSConf Ryan Dahl nos contó lo que seria el proyecto Deno en el cual estaba trabajando, a través de su charla “10 Things I Regret About Node.js” donde podemos resaltar los siguientes puntos:

Lenguajes dinámicos:Estos son fabulosos para ciertas cosas, sin embargo, en un servidor uno desearía que las cosas fueran estáticas.
Seguridad: Node puede acceder a todas las funciones del sistema sin restricción alguna y a funciones de la red. Esto es principalmente peligroso al momento de instalar paquetes desconocidos a través de npm
API asíncronas: Las promesas fueron agregadas en 2009 y eliminadas en 2010, esto provoca que muchas librerías tengan código obsoleto en su núcleo.
El sistema de compilación: Anteriormente cuando escribías o tenias un complemento de Node, que no son nadamas que módulos nativos de Node escritos en C o C++, donde tenias que correrlos en tu maquina primero, para que una vez compilados se utilizara una herramienta como node-gyp para poder acceder a los datos de esta, lo cual se volvía un verdadero fastidio. La compatibilidad de JSON entre Node y python se vuelve verdaderamente tedioso, por todo el diseño adicional que tiene Node.
Node modules y package.json: Aqui el principal problema es que nuestros modulos no son compatibles con los navegadores, por lo que no podemos tener una aplicacion uniforme.

¿Que es Deno y como trabaja?

Deno es un entorno de ejecución de javascript y de typescript, al igual que su entorno hermano Node usa el motor V8 como núcleo para compilar javascript. Otra gran diferencia entre estos dos entornos es el lenguaje con el cual fueron escritos, Siendo este escrito en rust, y Node en C y C++

Este asume el papel tanto de entorno de ejecución como el de administrador de paquetes, haciendo innecesaria una segunda instalación de algún distribuidor como seria npm.

Este busca ser un entorno de scripting productivo y seguro, buscando enfatizar en la arquitectura basada en eventos.

También nos proporciona un núcleo de utilidades síncronas y asíncronas, donde puede ser usado para crear servidores web, realizar cálculos científicos, entre otras cosas.

Instalación

Tenemos varias formas de instalación, las cuales podemos ver con mas detalle en la documentación.

Shell curl -fsSL https://deno.land/x/install/install.sh | sh
PowerShell iwr https://deno.land/x/install/install.ps1 -useb | iex
Homebrew (MacOS y/o Linux) brew install deno
Chocolatey (Windows) choco install deno

Para asegurarnos que todo se instalo correctamente podemos usar el siguiente comando para ver la versión de Deno que tenemos instalada.

deno --version

Y esto nos regresara lo siguiente:

deno 1.0.0-rc1 v8 8.2.308 typescript 3.8.3

Si queremos inspeccionar el resto de comandos que tenemos a nuestra disposición podemos correr lo siguiente.

deno help

Y esto nos visualizara los siguientes comandos.

USAGE:  
    deno \[OPTIONS\] \[SUBCOMMAND\]  

OPTIONS:  
    -h, --help                     Prints help information  
    -L, --log-level <log-level>    Set log level \[possible values: debug, info\]  
    -q, --quiet                    Suppress diagnostic output  
    -V, --version                  Prints version information  

SUBCOMMANDS:  
    bundle         Bundle module and dependencies into single file  
    cache          Cache the dependencies  
    completions    Generate shell completions  
    doc            Show documentation for a module  
    eval           Eval script  
    fmt            Format source files  
    help           Prints this message or the help of the given subcommand(s)  
    info           Show info about cache or info related to source file  
    install        Install script as an executable  
    repl           Read Eval Print Loop  
    run            Run a program given a filename or url to the module  
    test           Run tests  
    types          Print runtime TypeScript declarations  
    upgrade        Upgrade deno executable to newest version  

ENVIRONMENT VARIABLES:  
    DENO\_DIR             Set deno's base directory (defaults to $HOME/.deno)  
    DENO\_INSTALL\_ROOT    Set deno install's output directory  
                         (defaults to $HOME/.deno/bin)  
    NO\_COLOR             Set to disable color  
    HTTP\_PROXY           Proxy address for HTTP requests  
                         (module downloads, fetch)  
    HTTPS\_PROXY          Same but for HTTPS

Hello world

Como lo hemos estado diciendo durante todo el articulo, Deno nació para poder mejorar muchas de las “malas practicas” que Node venia arrastrando desde hace años por ser un proyecto demasiado grande, que difícilmente podía reestructurar todo su núcleo.

Sin embargo ya desde un inicio podemos ver algunos cambios a la hora de correr un programa desde este entorno.

Ahora para crear nuestro hello world podemos hacer uso de un archivo de extensión javascript o de uno de extensión de typescript y Deno se encargara de correr ambos automáticamente.

hello.ts

console.log('Hello world from Deno');

Lo que tenemos que hacer para poder correr nuestro archivo es usar el siguiente comando.

deno run hello.ts

En el caso de nuestro archivo .ts Deno se encargara internamente de compilarlo y correrlo en nuestro programa, ya que este viene con configuraciones iniciales que nos permitirá probar typescript desde un inicio, pero también nos brinda la posibilidad de crear un archivo de configuración con el cual podamos adaptar typescript a nuestro proyecto.

Cabe mencionar que Deno trata de seguir estándares tanto como es posible, por lo que podremos usar fetch, Window, Worker, entre otros. Nuestro código debe de ser compatible tanto con Deno como con el navegador.

Tambien nos permite correr programas remotamente, como viene explicado en la documentación, por lo que otra manera de correr nuestro hello world es de la siguiente manera.

deno run https://deno.land/std/examples/welcome.ts

Serve an index.html

En esta parte del post uso un ejemplo de Aral Roca por lo que los invito a darse una vuelta por su articulo.

Deno tiene su propia librería y para usarla debemos de importar directamente la url de esta en nuestro código como lo veremos en unos momentos.

Lo primero que tenemos que hacer es crear nuestro archivo html y el archivo que se encargara de levantar nuestro servidor, este puede ser .ts o .js

index.html

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta name="viewport" content="width=device-width, initial-scale=1" />  
    <meta charset="utf-8" />  
    <title>Example using Deno</title>  
  </head>  
  <body>index.html served correctly</body>  
</html>

server.ts

import { listenAndServe } from "https://deno.land/std/http/server.ts";  

listenAndServe({ port: 3000 }, async (req) => {  
  if (req.method === "GET" && req.url === "/") {  
    req.respond({  
      status: 200,  
      headers: new Headers({  
        "content-type": "text/html",  
      }),  
      body: await Deno.open("./index.html"),  
    });  
  }  
});  

console.log("Server running on localhost:3000");

Ahora hablemos de dos de las grandes mejoras que este entorno tiene.

Como mencionamos al principio uno de los objetivos de Deno fue erradicar los node_modules y el package.json ¿y como es que hace esto? simplemente permitiendo agregar la url de los paquetes que necesitemos directamente en nuestro código. La primera vez que corramos nuestro programa instalara todas las dependencias que hayamos declarado en nuestro código y las guardara en el cache para que esto no se tenga que repetir cada vez que volvamos a iniciar nuestro programa y para limpiar este cache únicamente necesitaremos usar el comando--reload
También hablamos de los problemas de seguridad de Node los cuales eran el permitir la lectura de archivos desde cualquier punto de nuestro programa o de terceros y el acceso a la red sin ningún tipo de restricción. Si tratamos de correr nuestro programa sin mas Deno nos dira lo siguiente:Uncaught PermissionDenied: network access to "127.0.0.1:3000", run again with the --allow-net flag. Este no nos permitirá acceder a la red ni leer archivos sin que nosotros no otorguemos los permisos para hacerlo, esto incluye también a librerías de teceros, ya que muchos CLI podían hacer muchas cosas aun sin nuestro consentimiento. Con Deno es posible únicamente otorgar permisos de lectura a determinada carpeta o archivo, por ejemplo deno --allow-read=/etc. Para poder ver todos los permisos que podemos otorgar o denegar con Deno podemos usar el siguiente comando deno run -h .

Finalmente, para poder correr nuestro nuestro programa usaremos el siguiente comando.

deno run --allow-net --allow-read server.ts

En este caso use la bandera — reload para que se volvieran a instalar las dependencias.

Espero que esta breve intro les motive a seguir investigando de Deno. Les dejo el link a la documentación y a algunos artículos de interés acerca del tema:

Cualquier duda, sugerencia u opinión son bien recibidas en la sección de comentarios 😁

Pueden encontrarme en Twitter, Github, LinkedIn, Instagram.

Foto de portada de Magda Ehlers