adityawahyudi-dev/ft_adit

Desarrollo con Tailwind CSS

Documentación

Usa search-docs para patrones y documentación detallada de Tailwind CSS v4.

Uso Básico

• Usa clases de Tailwind CSS para estilizar HTML. Revisa y sigue las convenciones de Tailwind existentes en el proyecto antes de introducir nuevos patrones.
• Ofrece extraer patrones repetidos en componentes que coincidan con las convenciones del proyecto (ej.: Blade, JSX, Vue).
• Considera la ubicación, orden, prioridad y valores predeterminados de las clases. Elimina clases redundantes, agrega clases a elementos padre o hijo cuidadosamente para reducir la repetición y agrupa elementos de forma lógica.

Específicos de Tailwind CSS v4

• Siempre usa Tailwind CSS v4 y evita utilidades obsoletas.
• corePlugins no es compatible con Tailwind v4.

Configuración CSS-First

En Tailwind v4, la configuración es CSS-first usando la directiva @theme — no se necesita un archivo tailwind.config.js separado:

@theme {
  --color-brand: oklch(0.72 0.11 178);
}

Sintaxis de Importación

En Tailwind v4, importa Tailwind con una declaración @import CSS normal en lugar de las directivas @tailwind usadas en v3:

- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

Utilidades Reemplazadas

Tailwind v4 eliminó utilidades obsoletas. Usa los reemplazos que se muestran a continuación. Para opacidad, elimina la clase *-opacity-* y agrega el valor como modificador en el color existente: bg-blue-500 bg-opacity-50 se convierte en bg-blue-500/50, text-white text-opacity-75 se convierte en text-white/75.

Obsoleta	Reemplazo
bg-opacity-*	bg-{color}/*
text-opacity-*	text-{color}/*
border-opacity-*	border-{color}/*
divide-opacity-*	divide-{color}/*
ring-opacity-*	ring-{color}/*
placeholder-opacity-*	placeholder-{color}/*
flex-shrink-*	shrink-*
flex-grow-*	grow-*
overflow-ellipsis	text-ellipsis
decoration-slice	box-decoration-slice
decoration-clone	box-decoration-clone

Espaciado

Usa utilidades gap en lugar de márgenes para espaciado entre elementos hermanos:

<div class="flex gap-8">
    <div>Elemento 1</div>
    <div>Elemento 2</div>
</div>

Modo Oscuro

Si las páginas y componentes existentes soportan modo oscuro, las nuevas páginas y componentes deben soportarlo de la misma manera, típicamente usando la variante dark::

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    El contenido se adapta al esquema de color
</div>

Errores Comunes

• Usar utilidades obsoletas de v3 (bg-opacity-, flex-shrink-, etc.)
• Usar directivas @tailwind en lugar de @import "tailwindcss"
• Intentar usar tailwind.config.js en lugar de la directiva CSS @theme
• Usar márgenes para espaciado entre elementos hermanos en lugar de utilidades gap
• Olvidar agregar variantes de modo oscuro cuando el proyecto usa modo oscuro