Forem: William Amaya

Integración de Tailwind CSS v4 Standalone en Blazor WebAssembly

William Amaya — Mon, 23 Feb 2026 18:43:07 +0000

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:

Renombra el archivo descargado:

tailwindcss.exe   (Windows)
tailwindcss       (Linux/Mac)

Crea una carpeta para herramientas, por ejemplo:

C:\tools\tailwind\

Mueve el ejecutable a esa carpeta.

3.3. Agregar Tailwind al PATH

Esto permite ejecutar tailwindcss desde cualquier ubicación.

En Windows:

Abre Configuración avanzada del sistema.
Ve a Variables de entorno.
Edita la variable del sistema Path.
Agrega:

C:\tools\tailwind\

Guarda los cambios.

3.4. Verificar instalación

En PowerShell o CMD:

tailwindcss --version

Salida esperada:

tailwindcss v4.2.1

4. Configuración del proyecto Blazor WebAssembly

4.1. Crear archivo de entrada CSS

En wwwroot/css/, crea:

input.css

Contenido:

@import "tailwindcss";

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

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" />

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>

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

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

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.

WinUI 3: Bloquear doble clic en el TitleBar

William Amaya — Fri, 05 Dec 2025 04:01:34 +0000

En este artículo comparto cómo interceptar mensajes de ventana en WinUI 3 usando interop con Win32, para bloquear la acción de maximizar cuando el usuario hace doble clic en el title bar.

Objetivo

Evitar que la ventana principal se maximice al hacer doble clic en la barra de título, manteniendo el resto de comportamientos intactos.

Código completo

using Microsoft.UI.Windowing;
using Microsoft.UI.Xaml;
using System;
using System.Runtime.InteropServices;
using Windows.Graphics;
using WinRT.Interop;

namespace TestApp.WinUI3
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        private readonly IntPtr _hwnd;
        private readonly IntPtr _oldWndProc;
        private delegate IntPtr WndProcDelegate(IntPtr hWnd, uint msg, IntPtr wParam, IntPtr lParam);
        private readonly WndProcDelegate _newWndProc;
        private const uint WM_NCLBUTTONDBLCLK = 0x00A3;
        private const int GWLP_WNDPROC = -4;

        public MainWindow()
        {
            InitializeComponent();
            AppWindow.TitleBar.PreferredTheme = TitleBarTheme.UseDefaultAppMode;
            ExtendsContentIntoTitleBar = true;
            SetTitleBar(titleBar);
            OverlappedPresenter? presenter = OverlappedPresenter.Create();
            presenter.IsResizable = false;
            presenter.IsMaximizable = false;
            presenter.SetBorderAndTitleBar(true, true);
            AppWindow.Resize(new SizeInt32(425, 600));
            AppWindow.SetPresenter(presenter);
            _hwnd = WindowNative.GetWindowHandle(this);
            _newWndProc = new WndProcDelegate(WndProc);
            _oldWndProc = SetWindowLongPtr(_hwnd, GWLP_WNDPROC, _newWndProc);
        }

        private IntPtr WndProc(IntPtr hWnd, uint msg, IntPtr wParam, IntPtr lParam)
        {
            if (msg == WM_NCLBUTTONDBLCLK)
            {
                return IntPtr.Zero;
            }
            return CallWindowProc(_oldWndProc, hWnd, msg, wParam, lParam);
        }

        [DllImport("user32.dll", EntryPoint = "SetWindowLongPtrW")]
        private static extern IntPtr SetWindowLongPtr(IntPtr hWnd, int nIndex, WndProcDelegate newProc);

        [DllImport("user32.dll", EntryPoint = "CallWindowProc")]
        private static extern IntPtr CallWindowProc(IntPtr lpPrevWndFunc, IntPtr hWnd, uint msg, IntPtr wParam, IntPtr lParam);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestApp.WinUI3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:TestApp.WinUI3"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="TestApp">

    <Window.SystemBackdrop>
        <MicaBackdrop />
    </Window.SystemBackdrop>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <!--  TitleBar  -->
            <RowDefinition Height="*" />
            <!--  NavigationView  -->
        </Grid.RowDefinitions>

        <TitleBar x:Name="titleBar"
                  Title="TestApp"
                  IsBackButtonVisible="False"
                  IsPaneToggleButtonVisible="false">
            <TitleBar.IconSource>
                <ImageIconSource ImageSource="/Assets/logo.ico" />
            </TitleBar.IconSource>
        </TitleBar>
    </Grid>

</Window>

Explicación paso a paso

1. Variables principales

_hwnd: guarda el handle de la ventana (HWND), identificador único en Win32.
_newWndProc: referencia a tu método WndProc, usado como interceptador.
_oldWndProc: puntero al procedimiento original de la ventana, para reenviar mensajes.

2. Constantes

GWLP_WNDPROC = -4: índice que indica a SetWindowLongPtr que quieres reemplazar el procedimiento de ventana.
WM_NCLBUTTONDBLCLK = 0x00A3: mensaje que Windows envía al hacer doble clic en la barra de título.

3. Delegado

private delegate IntPtr WndProcDelegate(IntPtr hWnd, uint msg, IntPtr wParam, IntPtr lParam);

Define la firma del método que interceptará mensajes. Es el equivalente a un puntero a función seguro en C#.

4. Reemplazo del WndProc

_oldWndProc = SetWindowLongPtr(_hwnd, GWLP_WNDPROC, _newWndProc);

Cambia el procedimiento de ventana por tu método.
Guarda el original en _oldWndProc.

5. Reenvío de mensajes

return CallWindowProc(_oldWndProc, hWnd, msg, wParam, lParam);

Si no es el mensaje que quieres bloquear, lo reenvías al WndProc original.
Así mantienes el comportamiento estándar de la ventana.

6. Bloqueo del doble clic

if (msg == WM_NCLBUTTONDBLCLK)
{
    return IntPtr.Zero;
}

Intercepta el mensaje de doble clic en la barra de título.
Devuelve IntPtr.Zero para bloquear la acción de maximizar.

Dudas frecuentes aclaradas

¿Qué es _hwnd? → El identificador nativo de la ventana (HWND).
¿Qué es un delegado? → Un tipo seguro que representa un puntero a función en C#. Aquí define la firma de WndProc.
¿Por qué usar _oldWndProc? → Para reenviar mensajes al procedimiento original y no romper la ventana.
¿Qué significa GWLP_WNDPROC = -4? → Es el índice que indica a Windows que quieres reemplazar el procedimiento de ventana.
¿Por qué SetWindowLongPtrW y no SetWindowLongPtr? → La versión W es Unicode, compatible con C#.
¿Por qué CallWindowProc no necesita EntryPoint? → Porque el nombre coincide exactamente con la función exportada en la DLL.

Conclusión

Con este patrón puedes interceptar mensajes nativos en WinUI 3 y modificar comportamientos específicos de la ventana, como bloquear la maximización por doble clic en el title bar.

Cómo solucioné el error “The property 'ParameterName' contains invalid characters” en SSIS

William Amaya — Fri, 07 Nov 2025 02:03:43 +0000

Introducción

Mientras trabajaba con proyectos de Integration Services (SSIS) en SQL Server Management Studio, me encontré con este error al intentar desplegar un proyecto:

The property 'ParameterName' contains invalid characters as an object name.
Remove the invalid characters. (Microsoft.SqlServer.Management.IntegrationServices)

Este mensaje puede parecer confuso, pero en mi caso, la causa no estaba en los parámetros directamente, sino en el nombre del Connection Manager.

Diagnóstico del problema

Después de revisar los parámetros y no encontrar caracteres inválidos, descubrí que el error se debía al nombre del Connection Manager. Había usado un nombre como: Servidor-Principal/Base#Datos.

Este tipo de nombre incluye caracteres que SQL Server considera inválidos para identificadores de objetos.

Solución aplicada

Renombré el Connection Manager usando solo letras, números y guiones bajos. En mi caso, lo cambié a: Servidor.Database.

Después de este cambio, el proyecto se desplegó sin errores.

Recomendaciones

Evita usar espacios, guiones, signos de puntuación o símbolos especiales en nombres de parámetros y Connection Managers.
Usa nombres como Servidor_Database, MainServer_DB, o Conexion_Produccion.
Si trabajas en equipo, define una convención de nombres clara para evitar este tipo de errores.

Soporte multilenguaje en WinUI 3

William Amaya — Sat, 01 Nov 2025 04:08:26 +0000

Introducción

El soporte multilenguaje en aplicaciones permite ampliar el alcance a usuarios y clientes de diferentes regiones e idiomas, mejorando la accesibilidad y la experiencia del usuario. En este post, exploraremos cómo implementarlo en aplicaciones de escritorio desarrolladas con WinUI 3.

Configuración del proyecto

Para implementar soporte multilenguaje en una aplicación WinUI 3, el primer paso es configurar la estructura de carpetas y archivos de recursos. Esto permitirá que el sistema cargue los textos adecuados según el idioma del usuario.

Crear la carpeta `Strings`

Dentro del proyecto, en la raiz crea una carpeta llamada Strings. Esta será el contenedor principal para los recursos.

Strings\
├── en-US\
│   └── Resources.resw
├── es-ES\
│   └── Resources.resw

¿Qué es el archivo `Resources.resw` y para qué se utiliza?

El archivo Resources.resw es un contenedor de recursos en formato XML que se utiliza en aplicaciones para definir textos y cadenas.

Pero en el contexto de este post, su propósito principal es permitir que la interfaz de usuario muestre contenido en el idioma correspondiente según la configuración regional del sistema o la preferencia del usuario.

Cada entrada se define como un par clave–valor, donde:

La clave es un identificador único que se usa en el código.
El valor es el texto traducido que se mostrará al usuario.

Ejemplo de entrada en Resources.resw:

<data name="Message" xml:space="preserve">
  <value>Bienvenido</value>
</data>

<data name="Message" xml:space="preserve">
  <value>Welcome</value>
</data>

Implementación

Para establecer el idioma en la aplicación lo debes hacer antes que cargue la ventana principal de la aplicación, esto lo puedes especificar en la clase App.xaml.cs en el metodo OnLaunched.

ApplicationLanguages.PrimaryLanguageOverride = "es-ES";

/// <summary>
/// Invoked when the application is launched.
/// </summary>
/// <param name="args">Details about the launch request and process.</param>
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (ApplicationData.Current.LocalSettings.Values.TryGetValue("language", out object? language))
        ApplicationLanguages.PrimaryLanguageOverride = language?.ToString();
    else
        ApplicationLanguages.PrimaryLanguageOverride = "es-ES";
    _window = new MainWindow();
    _window.Activate();
}

Con esto logramos que cuando se ejecute la aplicación el sistema cargue los resources.resw según el idioma seleccionado.

Para que el usuario pueda seleccionar el idioma de su preferencia podemos usar diferentes controles en este caso utilizaremos el control ComboBox

<ComboBox x:Name="LanguageSelector"
          SelectionChanged="LanguageSelector_SelectionChanged"
          PlaceholderText="Select a language"
          Width="200">
    <ComboBoxItem Tag="en-US">English</ComboBoxItem>
    <ComboBoxItem Tag="es-ES">Español</ComboBoxItem>
</ComboBox>

Una vez definimos el control podemos disparar el evento SelectionChanged el cual se ejecuta cada vez que el usuario cambie la opción del control ComboBox.

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.Windows.AppLifecycle;
using Windows.ApplicationModel.Resources;
using Windows.Storage;

private void LanguageSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (LanguageSelector.SelectedItem is ComboBoxItem comboBoxItem)
    {
        if (ApplicationData.Current.LocalSettings.Values["language"].ToString() != comboBoxItem.Tag.ToString())
        {
            ApplicationData.Current.LocalSettings.Values["language"] = comboBoxItem.Tag.ToString();
            AppInstance.Restart("");
        }
    }
}

La opción que el usuario seleccione la debemos guardar, puede ser en una base de datos también archivos de recursos por ejemplo un archivo .json o almacenamiento interno del sistema usando LocalSettings del using Windows.Storage.

Para acceder a los valores de los archivos resources.resw podemos realizarlo de la siguiente manera en el code-behind.

using Windows.ApplicationModel.Resources;

public string Message { get; set; } = new ResourceLoader().GetString("Message");

Y desde nuestro frontend podemos acceder usando esa propiedad Message mediante el uso del Bindingde la siguiente manera.

<TextBlock Text="{x:Bind Message}"></TextBlock>

Conclusión

Comparto el resultado final de la implementación del soporte multilenguaje para una aplicación WinUI 3.

Notas y mejoras

Se puede implementar usando MVVM.
La clase ResourceLoader se puede abstraer creando una clase helper o provider implementando IoC.
La aplicación actualmente se debe reiniciar para cargar los archivos de recursos desde el inicio de la ventana pero podrías implementar con archivos .json y propiedades usando la interfaz INotifyPropertyChanged o usando el paquete nuget CommunityToolkit.Mvvm para evitar el reinicio de la aplicación.

Forem: William Amaya

Integración de Tailwind CSS v4 Standalone en Blazor WebAssembly

1. Introducción

2. Requisitos previos

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

3.1. Obtener el ejecutable

3.2. Renombrar y ubicar el ejecutable

3.3. Agregar Tailwind al PATH

3.4. Verificar instalación

4. Configuración del proyecto Blazor WebAssembly

4.1. Crear archivo de entrada CSS

4.2. Generar el archivo CSS de salida

4.3. Referenciar Tailwind en Blazor

5. Verificación de funcionamiento

5.1. Crear un componente de prueba

5.2. Confirmar recompilación

6. Estructura final del proyecto

7. Consideraciones técnicas importantes

8. Conclusión

WinUI 3: Bloquear doble clic en el TitleBar

Objetivo

Código completo

Explicación paso a paso

1. Variables principales

2. Constantes

3. Delegado

4. Reemplazo del WndProc

5. Reenvío de mensajes

6. Bloqueo del doble clic

Dudas frecuentes aclaradas

Conclusión

Cómo solucioné el error “The property 'ParameterName' contains invalid characters” en SSIS

Introducción

Diagnóstico del problema

Solución aplicada

Recomendaciones

Soporte multilenguaje en WinUI 3

Introducción

Configuración del proyecto

Crear la carpeta Strings

¿Qué es el archivo Resources.resw y para qué se utiliza?

Implementación

Conclusión

Notas y mejoras

Crear la carpeta `Strings`

¿Qué es el archivo `Resources.resw` y para qué se utiliza?