Tailwind CSS

Usa los tokens de color del proyecto solo cuando la intención esté clara.
Reporta un color solo cuando se cumplan todas estas condiciones:

1. La clase usa una paleta sin procesar/un color arbitrario.
2. La intención de la UI es evidente por el código cercano.
3. Un token del proyecto es el reemplazo claro.

Usa tokens semánticos para intención semántica: positive-*, negative-*, warning-* e info-*. Usa tokens de marca/producto como primary-* cuando el elemento sea claramente de marca o parte principal de la UI. No inventes un reemplazo de token para estilos neutros o un valor hex arbitrario cuando la intención no sea evidente.

{{-- Wrong: error intent is obvious --}}
<div class="border border-red-100 bg-red-50 text-red-700">Error</div>

{{-- Correct --}}
<div class="border border-negative-100 bg-negative-50 text-negative-700">Error</div>

No uses clases de variante dark:.
El modo oscuro no está en uso. Elimina cualquier clase con prefijo dark: que encuentres en el código existente.

{{-- Wrong --}}
<div class="bg-white dark:bg-gray-900">

{{-- Correct --}}
<div class="bg-white">

Los elementos <button> y <a> sin procesar deben tener un estado hover:. Los demás elementos no lo necesitan, incluso cuando un controlador de clic los hace interactivos: un div, span, td o th clicable solo necesita cursor-pointer, y los controles como los sliders comunican su interacción mediante su propio estado visual.
La utilidad hover: puede estar en el propio elemento o en cualquier elemento dentro de él. Un enlace cuyo icono o imagen declara el estado hover ya proporciona retroalimentación al usuario.
Los componentes interactivos del sistema de diseño, como <x-button> y <x-link>, gestionan sus estilos hover internamente, por lo que la invocación en Blade no necesita una utilidad hover:.
Esta regla no se aplica a las plantillas de correo, donde :hover no es fiable entre clientes de email, ni a las plantillas de terceros publicadas en resources/views/vendor/, que siguen el estilo de su propio paquete.

{{-- Wrong --}}
<button class="bg-primary text-white px-4 py-2">Guardar</button>

{{-- Correct --}}
<button class="bg-primary hover:bg-primary-dark text-white px-4 py-2">Guardar</button>
<x-button primary :label="__('Save')" />

Solo los elementos clicables no semánticos necesitan cursor-pointer.
Los botones, enlaces, etiquetas, controles nativos y componentes interactivos del sistema de diseño no necesitan un cursor-pointer explícito. Añade cursor-pointer cuando un elemento no semántico como div, span, td o th se haga clicable con wire:click, @click, x-on:click o equivalente.
No pongas cursor-pointer en elementos que no sean interactivos.

{{-- Wrong --}}
<div wire:click="save" class="bg-primary text-white">Guardar</div>
<div class="text-gray-500 cursor-pointer">Texto informativo</div>

{{-- Correct --}}
<button wire:click="save" class="bg-primary text-white">Guardar</button>
<div wire:click="save" class="bg-primary text-white cursor-pointer">Guardar</div>

Elimina los div contenedores que no tengan un propósito de layout, estilos, comportamiento o agrupación.
Un contenedor es válido cuando aporta espaciado, padding, borde, overflow, posicionamiento, layout con flex/grid, comportamiento de Alpine/Livewire, renderizado condicional, agrupación semántica, o envuelve varios hijos significativos.
En las vistas de Livewire, el contenedor raíz necesario para mantener varios elementos hermanos bajo una sola raíz es válido aunque no tenga clases. No reportes el primer div o el div raíz cuando envuelva varios elementos hijos significativos. Repórtalo solo cuando sea un contenedor redundante alrededor de un único hijo significativo y quitarlo siga dejando un único elemento raíz válido.
Pasa las clases de espaciado/layout directamente a un componente cuando el contenedor exista solo para aplicar estilo a ese componente.

{{-- Wrong --}}
<div>
    <div>
        <span>Contenido</span>
    </div>
</div>

{{-- Correct --}}
<span>Contenido</span>

{{-- Wrong --}}
<div class="mb-10">
    <x-card>...</x-card>
</div>

{{-- Correct --}}
<x-card class="mb-10">...</x-card>

Cuando haya un componente x-dropdown presente:
Usa position en lugar de align. El atributo align ya no existe en x-dropdown. Usa:

• position="bottom" — se abre hacia abajo, centrado (sustituye a align="center")
• position="top" — se abre hacia arriba, centrado

Establece width="xl" en x-dropdown salvo que haya una razón concreta para usar un tamaño distinto.

{{-- Wrong --}}
<x-dropdown align="center">

{{-- Correct --}}
<x-dropdown position="bottom" width="xl">

Cuando haya un componente x-modal:
Añade w-full al x-card dentro de un x-modal existente.
El contenedor del modal de WireUI usa un contenedor flex. Sin w-full, la tarjeta se encoge al ancho de su contenido en lugar de ocupar todo el modal.

{{-- Wrong --}}
<x-modal wire:model="myModal">
    <x-card title="Título" class="z-10">

{{-- Correct --}}
<x-modal wire:model="myModal">
    <x-card title="Título" class="z-10 w-full">

No repitas la misma clase utility en el mismo elemento.
Si la misma clase aparece dos veces, elimina la duplicada. Si ves clases en conflicto (p. ej., text-sm text-lg), resuelve el conflicto; no dejes ambas.

Usa utilidades de Tailwind en lugar de CSS directo para el estilo visual estático.
No añadas estilo visual estático con CSS directo cuando Tailwind pueda expresar el mismo resultado. Esto aplica tanto si el CSS está escrito en un atributo style="", en un bloque <style>, en un archivo CSS, en una hoja de estilos importada o en una clase personalizada cuyo único propósito sea el estilo visual estático, como espaciado, anchura, altura, color, tipografía, bordes, sombras, decoración de texto o layout.
Reporta estos hallazgos como estilos CSS directos y recomienda reemplazar el CSS por utilidades de Tailwind. No conviertas el hallazgo en una recomendación de color-token.
El CSS directo está permitido cuando el valor es realmente dinámico en tiempo de ejecución, específico del navegador, generado por una integración de terceros, requerido por un proveedor, define infraestructura reutilizable del proyecto que Tailwind no puede expresar de forma segura, o no puede representarse con utilidades de Tailwind. Algunos ejemplos incluyen anchuras de progreso enlazadas con Alpine, variables CSS rellenadas con datos de tiempo de ejecución, atributos requeridos por proveedores, estilos de widgets de terceros o tamaños de contenedores de gráficos/librerías que no pueden trasladarse a utilidades de Tailwind.
En concreto, esto no son hallazgos:

• Un estilo cuyo valor es una expresión, como :style / x-bind:style enlazado a Alpine, o un atributo style interpolado por Blade.
• style="display: none" emparejado con x-show o x-cloak, que oculta el elemento hasta que Alpine arranca y toma el control de la visualización. Eso es comportamiento, no estilo estático.
• Propiedades para las que Tailwind no tiene utilidad, como font-variation-settings en una fuente de iconos variable.
• Plantillas de correo, donde el CSS inline es obligatorio, y plantillas publicadas en resources/views/vendor/, que mantienen el estilo que trae su propio paquete.

Un tamaño fijo de contenedor sí es un hallazgo, porque Tailwind lo expresa directamente: style="height: 24rem" es h-96.
Cuando el CSS directo sea necesario, mantenlo lo más limitado posible y no mezcles en él estilos estáticos no relacionados.

Los contenedores principales del layout no deben desbordarse en pantallas móviles.
Reporta un problema de ancho responsive solo cuando un ancho fijo controla un contenedor principal, tarjeta, formulario, tabla, modal o columna de contenido y puede desbordarse en pantallas pequeñas. Sugiere la alternativa responsive concreta, normalmente w-full max-w-*.
Los tamaños fijos o arbitrarios están bien para piezas pequeñas y acotadas de la UI, como iconos, avatares, insignias, asas, controles y columnas estrechas de tabla/acciones.

{{-- Wrong --}}
<div class="w-[400px] rounded bg-white">

{{-- Correct --}}
<div class="w-full max-w-[400px] rounded bg-white">

Una cuadrícula de más de dos columnas empieza con menos columnas en pantallas pequeñas.
grid-cols-3 o cualquier número mayor de columnas, escrito sin punto de quiebre, mantiene todas las columnas en un teléfono y comprime cada una a un tercio de la pantalla o menos: el texto se parte una palabra por línea, los controles se superponen y las tarjetas quedan reducidas a tiras. Empieza con una o dos columnas y añade el resto en un punto de quiebre.
Esto es una advertencia, porque algunas cuadrículas están pensadas para mantenerse anchas. No se informa cuando el número de columnas ya cambia en un punto de quiebre o en una consulta de contenedor, cuando los hijos cambian su col-span-* en un punto de quiebre, o cuando la cuadrícula tiene un ancho máximo estrecho o se ajusta a su contenido (como max-w-xs, max-w-md, w-fit o inline-grid), por ejemplo cajas de dígitos, muestras de color y otras celdas pequeñas de tamaño fijo.

{{-- Wrong --}}
<div class="grid grid-cols-4 gap-4">

{{-- Correct --}}
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">