Integración de Tailwind CSS 4.0 en .NET 9: Guía práctica para proyectos MVC

Aprende a configurar Tailwind CSS 4.0 con Tailwind CLI en un proyecto MVC de .NET 9 desde cero.

Introducción

Tailwind CSS es un framework de CSS basado en utilidades diseñado para construir interfaces de usuario modernas con rapidez y eficiencia. La versión 4.0 introduce optimizaciones significativas en rendimiento y nuevas funcionalidades que simplifican el desarrollo front-end.

En esta guía, exploraremos cómo integrar Tailwind CSS 4.0 en un proyecto MVC de .NET 9, utilizando Tailwind CLI para gestionar los estilos de manera eficiente.

Puedes acceder al código fuente completo en GitHub: https://github.com/hopsersmerk/TailwindCSS-NET9-MVC

Requisitos previos

Antes de comenzar, asegúrate de tener instaladas las siguientes herramientas:

.NET SDK 9 (Descargar .NET SDK)
Node.js y npm (Descargar Node.js)

Paso 1: Creación de un proyecto MVC en .NET 9

Ejecuta los siguientes comandos en la terminal para generar un nuevo proyecto MVC:

mkdir tailwindcss40
cd tailwindcss40
dotnet new mvc

Esto creará una estructura de proyecto basada en MVC dentro de la carpeta tailwindcss40.

Paso 2: Inicialización de npm en el proyecto

Tailwind CSS requiere Node.js y npm para la gestión de dependencias. Dentro del directorio del proyecto, ejecuta:

npm init -y

Esto generará un archivo package.json con la configuración predeterminada de npm.

Paso 3: Instalación de Tailwind CSS

Instala Tailwind CSS y Tailwind CLI ejecutando el siguiente comando:

npm install -D tailwindcss @tailwindcss/cli

Paso 4: Creación del archivo de estilos de Tailwind CSS

Crea la carpeta css dentro de wwwroot:

mkdir wwwroot/css

Dentro de wwwroot/css, crea un archivo llamado tailwind.css e incluye la siguiente línea:

@import "tailwindcss";

Paso 5: Compilación de Tailwind CSS

Para generar los estilos CSS compilados, ejecuta el siguiente comando:

npx @tailwindcss/cli -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/hopsersmerk.css

Este comando procesa el archivo fuente de Tailwind y genera hopsersmerk.css en wwwroot/css/.

Para facilitar futuras ejecuciones, agrega estos scripts en package.json:

"scripts": {
  "build:css": "npx @tailwindcss/cli -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/hopsersmerk.css",
  "watch:css": "npx @tailwindcss/cli -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/hopsersmerk.css --watch"
}

Para compilar manualmente:

npm run build:css

Para compilar en modo observador y actualizar automáticamente los cambios:

npm run watch:css

Paso 6: Integración de Tailwind CSS en la plantilla de la aplicación

Abre Views/Shared/_Layout.cshtml y agrega la referencia al CSS compilado dentro del <head>:

<link href="~/css/hopsersmerk.css" rel="stylesheet" />

Esto garantiza que los estilos de Tailwind CSS se apliquen en toda la aplicación.

Paso 7: Verificación de la integración

Modifica Views/Home/Index.cshtml y agrega un encabezado con clases de Tailwind para comprobar que está funcionando:

<h1 class="text-3xl font-bold text-center text-blue-600">¡Tailwind CSS está funcionando!</h1>

Ejecuta el proyecto con:

dotnet run

Luego, abre https://localhost:5001 (o el puerto indicado en la terminal) y verifica que los estilos de Tailwind CSS se aplican correctamente.

Conclusión

Siguiendo estos pasos, has configurado exitosamente Tailwind CSS 4.0 con Tailwind CLI en un proyecto MVC de .NET 9. Esta configuración optimiza la gestión de estilos y facilita el mantenimiento del código.

Para más información y personalización avanzada, consulta la documentación oficial de Tailwind CSS: https://tailwindcss.com/docs/installation/tailwind-cli.