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/.
Configuración en package.json
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 apliquen 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.
Top comments (0)