Tailwind es simplemente genial, ¡vamos a usarlo con Remix también y entender qué sucede en la configuración!

Vamos a instalar tailwind en nuestro proyecto Remix, eso. Manos a la obra en 3 simples pasos:

1. Creando el proyecto en Remix

Esta es la parte más obvia, si tu ya tienes un proyecto en remix siéntete libre de brincar al punto 2 y configurar. Creamos el proyecto:

npx create-remix@latest my_project

Cuando Remix te pregunte sobre tu stack preferido, si estás aprendiendo siempre es mejor no instalar código o herramientas que aún no conoces, o que no sabes cómo funcionan, todo eso se convierte en magia, es decir, cuando no sabes cómo ocurren las cosas te alejas de entender y realizarlo tu mismo, no es malo reinventar la rueda si se trata de saciar tu curiosidad. 🤓

2. Instalando lo necesario y creando la configuración

Vamos a instalar 4 cosas para poder trabajar con Tailwind en Remix.

1. tailwindcss. Obviamente =P
2. postcss. Que es quien va a leer, procesar y generar nuestro archivo CSS de salida.
3. autoprefixer. Que va a ayudar a que nuestro CSS resultante sea super compatible con todos los navegadores y finalmente
4. concurrently. Que nos permitirá correr en desarrollo el flag --watch para leer y generar en tiempo real el archivo de salida, mientras también se levanta el servidor de Remix con el mismo comando sin necesidad de tener 2 terminales abiertas.

npm install -D tailwindcss postcss autoprefixer concurrently

Asegurate de colocar la -D para que se instale el CLI de tailwind. Una vez instalado lo anterior, vamos a crear el archivo de configuración de tailwind.

npx tailwindcss init

Este comando nos creará un archivo en la raiz del proyecto con la siguiente forma:

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

Y nosotros vamos a agregar:

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

Lo que estamos diciendo en ese string es: Queremos que leas todos los archivos en dentro de la carpeta app dentro de cualquier carpeta que coincidan con cualquier nombre de archivo con extensiones js, ts, jsx y tsx Siempre puedes escribir la dirección de 1 sólo archivo, pero la vdd es que en un proyecto con muchos componentes este tipo de "match every file" es mucho mejor. Recuerda no despreciar el hacer esto a mano, siempre es mejor entender qué está sucediendo, recuerda preferimos la ciencia sobre la magia. 🧑🏻‍🏫

Ahora lo más retador, pero que también te será revelador, los scripts

Scripts en package.json y concurrently

Vamos a agregar 2 scripts específicos para que tailwind pueda procesar nuestros estilos y generar el archivo de salidad, tanto para development como para producción, y también vamos a modificar los scripts que ya existen en nuestro package.json de tal forma que incluyan ese procesamiento de tailwind a la hora de generar los bundles de producción. Vamos con development:

{
"scripts":{
	"dev:css":  "tailwindcss -w -i ./styles.css -o app/styles/root.css",
	}
}

La documentación oficial de Tailwind te sugiere meter tu archivo de estilos que será procesado a una carpeta styles, pero lo que yo suelo hacer es simplemente tenerlo en la raiz del proyecto con el nombre styles.css y es lo que indico aquí. Mientras que el archivo de salida será el root.css que ya se usa en root.tsx de esta forma todo nuestro proyecto tendrá acceso a las utilidades de tailwind y no tendremos que importar el archivo de utilidades en cada ruta que lo requiera (como sugiere la documentación) a menos que tengas una buena razón para dejar fuera Tailwind de algunas rutas, es más fácil que todo el proyecta tenga acceso. 👍🏼 Ahora vamos con producción:

{
"scripts":{
	"build:css": "tailwindcss -m -i ./styles.css -o app/styles/root.css",
	"dev:css":  "tailwindcss -w -i ./styles.css -o app/styles/root.css",
	}
}

Hacemos prácticamente lo mismo la única diferencia es que en vez de usar la flag -w para observar los cambios en tiempo real, usamos -m para "minificar" (comprimir) el archivo resultante porque producción ¿verdad?

Bueno estamos listos para modificar los scripts npm run dev y npm run build:

{
"scripts":{
	"build":  "npm run build:css && remix build",
	"dev":  "concurrently \"npm run dev:css\" \"remix dev\"",
	"build:css": "tailwindcss -m -i ./styles.css -o app/styles/root.css",
	"dev:css":  "tailwindcss -w -i ./styles.css -o app/styles/root.css",
	}
}

No importa realmente que tengas en estos scripts, lo importante es agregar el && que básicamente dice: queremos correr este comando después este otro en el caso de build aunque en el caso de dev lo que hacemos con concurrently es decir: queremos correr estos dos comandos en paralelo (el primero en segundo plano) y como puedes ver queremos correr dev:css junto con remix dev.

Listo, corre tu comando npm run dev y todo debería funcionar en automático, asegúrate de estar importando root.css en tu archivo root.tsx con la función de remix links:

import  styles  from  "./styles/root.css"  
export  function  links()  {  return  [
{  rel:  "stylesheet",  href: styles }
]  }

¡listo!

3. ¡A disfrutar!

Este paso la verdad que está de sobra XD son sólo los 2 anteriores, ya puedes usar Tailwind en Remix, lo cual es genial y también es muy "adoc" a la filosofía de Remix de soportar archivos .css para los estilos porque #useThePlatform va mejor con el uso nativo de la plataforma, por eso tailwind es genial, porque no reinventa nada, funciona sobre los fundamentos de la web, lo que tenemos como resultado es un hermoso archivo CSS que prácticamente no pesa nada. Por eso, ¡a disfrutar!

Si Tailwind es algo que te gusta y lo estás aún describiendo no olvides registrarte a nuestra lista de correo porque próximamente estaremos liberando una guía de estilos usando Tailwind con buenas prácticas así como una serie de videos de cómo construir eficientemente con CSS.

Abrazo. Bliss.