Agregando estilos con TailwindCSS

Para este proyecto usaremos una de las formas más sencillas de trabajar con estilos directamente en tus componentes sin la necesidad de mantener archivos .css. Para configurarlo a mano tenemos que tener en cuenta un pequeño grupo de archivos y un par de comandos que colocaremos en nuestro archivo package.json.

Archivos necesarios

Necesitamos crear dos archivos: tailwind.css y tailwind.config.js estos dos archivos deben vivir en la raiz del proyecto. Su contenido es el siguiente:

// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

Observa cómo en el archivo de configuración, hemos colocado todas las rutas posibles a nuestros componentes. De esta forma Tailwind recolecta las clases y utilidades empleadas para generar el archivo resultante a partir de estas.

Finalmente vamos a agregar dos comandos en la llave “scripts” en el archivo package.json:

"scripts": {
    "dev:tailwind": "npx tailwindcss -w -i tailwind.css -o ./app/styles/style.css",
    "build:tailwind": "npx tailwindcss -m -i tailwind.css -o ./app/styles/style.css",
		"build": "npm run build:tailwind && remix build",	 
			// ...
  },

Observa cómo cuando se crea el build de producción, tailwind es ejecutado en mono minimizar, para generar la versión de producción de los estilos.

Uso de los estilos en Remix

Es importante para concluir con esta configuración de TailwindCSS en Remix, agregar la importación del archivo CSS resultante si se quiere para toda el app: en el archivo root. Mientras si se quiere usar solo en alguna ruta especifica, usando la función links de Remix.

Para nuestro proyecto, utilizaremos la función links del archivo root.ts que queda de la siguiente manera:

import tailwind from "./styles/style.css";

export const links: LinksFunction = () => [
  {
    rel: "stylesheet",
    href: tailwind,
  },
];

Observa la importación desde los estilos generados por TailwindCSS, misma que pasamos a los dos lados del ternario que Remix ya tenía.

Conclusión:

Con esto basta para tener estilos instantáneos con Tailwind. 🎨