DEV Community

William Amaya
William Amaya

Posted on

Integración de Tailwind CSS v4 Standalone en Blazor WebAssembly

#dotnet #spanish #tailwindcss #tutorial

Tailwind CSS v4 introduce un cambio importante: un CLI standalone que no requiere Node.js ni npm. Esto abre la puerta a integrarlo fácilmente en proyectos .NET, incluyendo Blazor WebAssembly, sin añadir dependencias externas ni pipelines complejos.

En este artículo aprenderás a configurar Tailwind v4.2.1 en un proyecto Blazor WASM desde cero, usando únicamente el ejecutable standalone.

1. Introducción

Tailwind CSS v4.2.1 incorpora un nuevo enfoque basado en un CLI autónomo, lo que permite compilar estilos sin necesidad de Node.js, PostCSS o herramientas adicionales. Esta característica lo convierte en una opción ideal para proyectos .NET que buscan mantener un entorno limpio y ligero.

El objetivo de esta guía es mostrar cómo:

  • Descargar y preparar el CLI standalone de Tailwind.
  • Integrarlo en un proyecto Blazor WebAssembly.
  • Generar y vincular el CSS final.
  • Verificar que Tailwind está funcionando correctamente.

2. Requisitos previos

Antes de comenzar, asegúrate de contar con:

  • .NET 7 u 8 instalado.
  • Un proyecto Blazor WebAssembly (nuevo o existente).
  • Windows, Linux o macOS.
  • Permisos para modificar variables de entorno (PATH).

3. Descarga y preparación del CLI standalone de Tailwind

3.1. Obtener el ejecutable

Tailwind ofrece binarios standalone para cada sistema operativo. Puedes descargarlos desde:

https://github.com/tailwindlabs/tailwindcss/releases

Selecciona el archivo adecuado:

  • Windows: tailwindcss-windows-x64.exe
  • Linux: tailwindcss-linux-x64
  • macOS: tailwindcss-macos-arm64 o macos-x64

3.2. Renombrar y ubicar el ejecutable

Para simplificar su uso:

  1. Renombra el archivo descargado: 
tailwindcss.exe   (Windows)
tailwindcss       (Linux/Mac)
Enter fullscreen mode Exit fullscreen mode
  1. Crea una carpeta para herramientas, por ejemplo: 
C:\tools\tailwind\
Enter fullscreen mode Exit fullscreen mode
  1. Mueve el ejecutable a esa carpeta.

3.3. Agregar Tailwind al PATH

Esto permite ejecutar tailwindcss desde cualquier ubicación.

En Windows:

  1. Abre Configuración avanzada del sistema.
  2. Ve a Variables de entorno.
  3. Edita la variable del sistema Path.
  4. Agrega: 
C:\tools\tailwind\
Enter fullscreen mode Exit fullscreen mode
  1. Guarda los cambios.

3.4. Verificar instalación

En PowerShell o CMD:

tailwindcss --version
Enter fullscreen mode Exit fullscreen mode

Salida esperada:

tailwindcss v4.2.1
Enter fullscreen mode Exit fullscreen mode

4. Configuración del proyecto Blazor WebAssembly

4.1. Crear archivo de entrada CSS

En wwwroot/css/, crea:

input.css
Enter fullscreen mode Exit fullscreen mode

Contenido:

@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

Nota: En Tailwind v4 ya no se usan @tailwind base;, @tailwind components; ni @tailwind utilities;.

4.2. Generar el archivo CSS de salida

Desde la raíz del proyecto ejecuta:

tailwindcss -i wwwroot/css/input.css -o wwwroot/css/output.css --watch
Enter fullscreen mode Exit fullscreen mode

Este comando:

  • Lee input.css
  • Escanea archivos .razor, .html, .cshtml
  • Genera output.css
  • Mantiene un proceso activo observando cambios

4.3. Referenciar Tailwind en Blazor

Edita wwwroot/index.html:

<link href="css/output.css" rel="stylesheet" />
Enter fullscreen mode Exit fullscreen mode

5. Verificación de funcionamiento

5.1. Crear un componente de prueba

En cualquier archivo .razor:

<h1 class="text-5xl font-bold text-blue-600">
    Tailwind funcionando correctamente
</h1>
Enter fullscreen mode Exit fullscreen mode

5.2. Confirmar recompilación

Cada vez que guardes un archivo .razor, la terminal donde corre --watch debe mostrar actividad.

Si el <h1> se muestra grande y azul, Tailwind está funcionando.

6. Estructura final del proyecto 

/wwwroot
   /css
      input.css
      output.css
index.html
Enter fullscreen mode Exit fullscreen mode

7. Consideraciones técnicas importantes

  • Tailwind v4 no requiere tailwind.config.js, aunque puedes añadirlo si necesitas personalización avanzada.
  • El CLI standalone funciona sin Node.js, npm o PostCSS.
  • Tailwind detecta clases en archivos .razor sin configuración adicional.
  • El modo --watch es ideal para desarrollo.
  • Para producción, usa: 
tailwindcss -i wwwroot/css/input.css -o wwwroot/css/output.css --minify
Enter fullscreen mode Exit fullscreen mode

8. Conclusión

Integrar Tailwind CSS v4 standalone en Blazor WebAssembly es un proceso sencillo, limpio y eficiente. Al eliminar la dependencia de Node.js, el flujo de trabajo se vuelve más ligero y se adapta mejor al ecosistema .NET.

Tailwind v4 ofrece una experiencia moderna, rápida y flexible, ideal para proyectos Blazor que buscan un diseño potente sin complicaciones adicionales.

Top comments (0)