tailwind

• 📁
• 💻

Documentación y Recursos

• 📕
• Video de referencia:
• Guía oficial: Tailwind con Next.js
• Componentes Tailwind
• Fondos listos para Tailwind
• Componentes por bloques
• Componentes Flowbite
• Componentes warez Tailwind
• tailwind plugins conf init
• Tailwind lista de clases y conf inicial
• lista plugins tailwind

Conceptos Fundamentales de Tailwind

• Utility-first
  Tailwind se basa en clases utilitarias atómicas que permiten construir interfaces sin escribir CSS personalizado.
• Dark mode
  Se activa mediante media o class. Usado en proyectos modernos junto con toggles de tema.
• Responsive design
  Se gestiona con breakpoints prefijados: sm:, md:, lg:, xl:, 2xl:.
  Puede personalizarse en tailwind.config.js.
• Optimización (Purge/Content)
  Tailwind purga estilos no usados en producción.
  Configurar correctamente la clave content reduce el tamaño final del CSS.
• Modo JIT
  Combinado con el motor moderno de Tailwind, permite generar clases bajo demanda en desarrollo.

Arquitectura de Proyectos con Tailwind

• Estructura habitual
  • globals.css → estilos base, imports y directivas Tailwind.
  • tailwind.config.js → theme, plugins y paths de contenido.
  • Componentes estructurados con clases utilitarias sin separar CSS.
• Integración con Next.js
  • Aprovecha rendering híbrido, layouts, server components y app/.
  • Tailwind facilita maquetación rápida de UI con SSR.
• Buenas prácticas
  • Usar clases compuestas mediante @apply solo cuando sea necesario.
  • Mantener componentes pequeños para evitar combinaciones de clases excesivas.
  • Utilizar patrones como utility groups (flex items-center gap-4).

Extensión y Personalización

• Theme y tokens
  • Definición de colores personalizados.
  • Escalas de tipografía, espaciado y sombras.
• Plugins
  • Componentes predefinidos.
  • Añadir utilidades personalizadas.
  • Integración con librerías UI como Flowbite o Headless UI.
• Directivas
  • @tailwind base;
  • @tailwind components;
  • @tailwind utilities;
  • Control de orden para overrides.

Configuración Inicial: Ejemplo

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
	'./pages/**/*.{js,ts,jsx,tsx}',
	'./components/**/*.{js,ts,jsx,tsx}',
	'./app/**/*.{js,ts,jsx,tsx}',
],
theme: {
	extend: {
		colors: {
			brand: {
				light: '#5eead4',
				DEFAULT: '#14b8a6',
				dark: '#0f766e'
			}
		}
	}
},
plugins: []
}

`

Utilidades Frecuentes

• Layout:
  flex, grid, place-items-center, gap-*, container
• Tipografía:
  text-sm, font-semibold, tracking-wide, leading-relaxed
• Colores y fondos:
  bg-slate-900, bg-gradient-to-r, from-*, to-*
• Bordes y sombras:
  rounded-xl, border, shadow-md, ring-1
• Animaciones:
  animate-spin, animate-pulse, ampliables vía keyframes en el theme.

Snippets Útiles para Desarrollo

Componente básico con Tailwind + Next.js

export default function Card({ title, children }) {
return (
	<div className="rounded-xl p-6 shadow-md bg-white dark:bg-slate-800">
		<h2 className="text-xl font-semibold mb-4">{title}</h2>
		<div>{children}</div>
	</div>
);
}

Ejemplo de clases utilitarias agrupadas

.btn-primary {
@apply px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition;
}

Plugins Recomendados

• Forms → mejores estilos para inputs.
• Typography → estiliza contenido largo (blogs).
• Aspect Ratio → útil para imágenes y videos.
• Line Clamp → cortar texto con puntos suspensivos.
• Animaciones personalizadas vía keyframes.

codes tailwind Snippets

Footer — Grid Base (Partes del Footer)

Código

<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">

	{/* Columna Logo */}
	{/* 
	<div className="col-span-full lg:col-span-1">
		<div className="flex items-center">
			<Image src="/images/pc-1.png" alt="" className="h-10 me-5" width={50} height={50} />
			<a className="flex-none text-3xl font-semibold text-white" href="#" aria-label="logo">Deveduar</a>
		</div>
	</div>
	*/}

	{/* Columna Product */}
	{/* 
	<div className="col-span-1">
		<h4 className="font-semibold text-gray-100 uppercase">Product</h4>
		<div className="mt-3 grid space-y-3">
			<p><a className="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Services</a></p>
			<p><a className="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">About Us</a></p>
			<p><a className="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">News & Stories</a></p>
			<p><a className="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Roadmap</a></p>
		</div>
	</div>
	*/}

	{/* Columna Company */}
	{/* 
	<div className="col-span-1">
		<h4 className="font-semibold text-gray-100 uppercase">Company</h4>
		<div className="mt-3 grid space-y-3">
			<p><a className="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">About us</a></p>
			<p><a className="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Jobs</a></p>
			<p>
				<a className="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Careers</a>
				<span className="inline ms-1 text-xs bg-primary text-white py-1 px-2 rounded-lg">We're hiring</span>
			</p>
			<p><a className="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Contact Us</a></p>
			<p><a className="inline-flex gap-x-2 text-gray-400 hover:text-gray-200" href="#">Press</a></p>
		</div>
	</div>
	*/}

	{/* Newsletter */}
	{/* 
	<div className="col-span-2">
		<h4 className="font-semibold text-gray-100 uppercase">Stay up to date</h4>
		<form>
			<div className="mt-4 flex flex-col items-center gap-2 sm:flex-row sm:gap-3 bg-white rounded-lg p-2">
				<div className="w-full">
					<label htmlFor="hero-input" className="sr-only">Search</label>
					<input
						type="text"
						id="hero-input"
						name="hero-input"
						className="py-3 px-4 block w-full border-transparent rounded-lg text-sm focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none"
						placeholder="Enter your email"
					/>
				</div>
				<a
					className="w-full sm:w-auto whitespace-nowrap p-3 inline-flex justify-center items-center gap-x-2
					text-sm font-semibold rounded-lg border border-transparent bg-primary text-white hover:bg-blue-700"
					href="#"
				>
					Subscribe
				</a>
			</div>
		</form>
	</div>
	*/}
</div>

`

Notas

• Diseño flexible para footers complejos.
• Uso de col-span en breakpoints para layouts responsivos.
• Uso de bloques comentados para activar/desactivar secciones fácilmente.
• Ideal para componentes dinámicos en Next.js o React.

---

Footer Antiguo — Variante Minimalista

Código

// <footer className="dark:bg-gray-900 text-white py-4">
// 	<div className="container mx-auto flex flex-col md:flex-row justify-between items-center">

// 		{/* Texto principal */}
// 		<div className="mb-4 md:mb-0 text-center md:text-left flex items-center px-5">
// 			<p className="mr-2">Developed by </p>
// 			<Link href="/" passHref className="text-blue-400 hover:text-blue-600 mr-2">
// 				@deveduar
// 			</Link>
// 		</div>

// 		{/* Iconos sociales */}
// 		<div className="flex space-x-4 px-12">
// 			<Link
// 				href="https://github.com/deveduar"
// 				passHref
// 				target="_blank"
// 				rel="noopener noreferrer"
// 				className="text-gray-400 hover:text-white"
// 			>
// 				<Image src="/icons/github.svg" alt="GitHub" width={24} height={24} className="filter invert dark:invert-1" />
// 			</Link>

// 			<Link
// 				href="https://twitter.com/deveduar"
// 				passHref
// 				target="_blank"
// 				rel="noopener noreferrer"
// 				className="text-gray-400 hover:text-white"
// 			>
// 				<Image src="/icons/twitter.svg" alt="Twitter" width={24} height={24} className="filter invert dark:invert-1" />
// 			</Link>

// 			<Link
// 				href="http://www.linkedin.com/in/deveduar"
// 				passHref
// 				target="_blank"
// 				rel="noopener noreferrer"
// 				className="text-gray-400 hover:text-white"
// 			>
// 				<Image src="/icons/linkedin.svg" alt="LinkedIn" width={24} height={24} className="filter invert dark:invert-1" />
// 			</Link>
// 		</div>
// 	</div>
// </footer>

Notas

• Footer compacto ideal para landing pages.
• Uso de invert para adaptar iconos a modo oscuro.
• Diseño centrado en identidad + redes sociales.
• Cambios mínimos para integrarlo en proyectos Next.js.

---

Section Simple — Hero / Header

Código

<section className="pt-10 overflow-hidden bg-gray-50 md:pt-0 sm:pt-16 2xl:pt-16">
	<div className="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
		<div className="grid items-center grid-cols-1 md:grid-cols-2">

			{/* Texto principal */}
			<div>
				<h2 className="text-3xl font-bold leading-tight text-black sm:text-4xl lg:text-5xl">
					Hey 👋 I am <br className="block sm:hidden" />
					Jenny Carter
				</h2>

				<p className="max-w-lg mt-3 text-xl leading-relaxed text-gray-600 md:mt-8">
					Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint...
				</p>

				<p className="mt-4 text-xl text-gray-600 md:mt-8">
					<span className="relative inline-block">
						<span className="absolute inline-block w-full bottom-0.5 h-2 bg-yellow-300"></span>
						<span className="relative">Have a question?</span>
					</span>
					<br className="block sm:hidden" />
					Ask me on{" "}
					<Link href="#" className="transition-all duration-200 text-sky-500 hover:text-sky-600 hover:underline">
						Twitter
					</Link>
				</p>
			</div>

			{/* Imagen */}
			<div className="relative">
				<Image
					className="absolute inset-x-0 bottom-0 -mb-48 -translate-x-1/2 start-1/2"
					src="/assets/images/blob-shape.svg"
					alt="Blob Shape"
					layout="fill"
					objectFit="contain"
				/>
				<Image
					className="relative w-full xl:max-w-lg xl:mx-auto 2xl:origin-bottom 2xl:scale-110"
					src="/images/pc-1.png"
					alt="Jenny Carter"
					width={500}
					height={500}
				/>
			</div>
		</div>
	</div>
</section>

Notas

• Hero responsivo con layout en grid 1–2 columnas.
• Combina imagen superpuesta + blob decorativo.
• Subrayado animado usando pseudo-elemento real (absolute).
• Componentes ideales para páginas de presentación personal.

Perfecto. Ya mejoramos, organizamos y expandimos la nota original.
Ahora respondo a tu pregunta y continúo expandiendo la nota sin repetir nada.

---

Tailwind Snippets — Extensión Complementaria

Grids Responsivos — Patrones Comunes

Código

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
	<div className="p-6 bg-white rounded-xl shadow">Card 1</div>
	<div className="p-6 bg-white rounded-xl shadow">Card 2</div>
	<div className="p-6 bg-white rounded-xl shadow">Card 3</div>
</div>

`

Notas

• Patrón clásico 1–2–3 columnas.
• Útil para servicios, features, productos o galerías.
• Cambia a gap-8 para layouts más “premium”.

---

Navbar Simple + Responsive

Código

<header className="w-full border-b">
	<div className="flex items-center justify-between px-6 py-4 max-w-7xl mx-auto">
		<h1 className="text-xl font-bold">Logo</h1>

		<nav className="hidden md:flex gap-6">
			<a className="hover:text-blue-600" href="#">Home</a>
			<a className="hover:text-blue-600" href="#">Projects</a>
			<a className="hover:text-blue-600" href="#">Contact</a>
		</nav>

		<button className="md:hidden p-2 rounded-lg border">
			☰
		</button>
	</div>
</header>

Notas

• Base para navbars responsivas sin complejidad.
• Fácil de extender con menú lateral.

---

CTA (Call To Action) — Bloque Rápido

Código

<div className="bg-blue-600 text-white p-10 rounded-2xl text-center">
	<h2 className="text-3xl font-semibold mb-4">Level up your project</h2>
	<p className="mb-6 text-blue-100">Powerful components + modern design.</p>
	<a
		href="#"
		className="px-6 py-3 bg-white text-blue-600 font-semibold rounded-xl hover:bg-gray-200"
	>
		Get Started
	</a>
</div>

Notas

• Componente ideal para secciones de cierre de página.
• Puede integrarse en “pricing pages” o landings.

---

Badge + Label Variantes

Código

<span className="inline-block px-3 py-1 text-xs font-semibold bg-gray-200 rounded-full">
	New
</span>

<span className="inline-block px-3 py-1 text-xs font-semibold bg-green-200 text-green-700 rounded-full">
	Success
</span>

<span className="inline-block px-3 py-1 text-xs font-semibold bg-red-200 text-red-700 rounded-full">
	Error
</span>

Notas

• Se usan comúnmente en dashboards, listas y botones.
• Cambiar tamaños usando text-[10px], px-2, etc.

---

Card Premium con Hover

Código

<div className="group p-6 bg-white rounded-2xl shadow hover:shadow-xl transition-shadow duration-300">
	<h3 className="text-xl font-semibold mb-3 group-hover:text-blue-600">
		Upgrade Plan
	</h3>
	<p className="text-gray-600 mb-4">
		Accelerate your workflow with premium tools.
	</p>
	<button className="px-4 py-2 rounded-lg bg-blue-600 text-white group-hover:bg-blue-700">
		Choose Plan
	</button>
</div>

Notas

• Uso del modificador group-hover (patrón avanzado).
• Efecto premium muy usado en SaaS UI.

---

Inputs con Peer — Validación visual

Código

<div className="relative">
	<input
		type="text"
		placeholder=" "
		className="peer w-full border rounded-lg px-4 py-3 bg-white focus:ring-2 focus:ring-blue-600"
	/>
	<label className="absolute left-4 -top-2 text-sm bg-white px-1 text-gray-500 transition-all
	peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400
	peer-focus:-top-2 peer-focus:text-sm peer-focus:text-blue-600">
		Name
	</label>
</div>

Notas

• peer permite animar el label según el input.
• Ideal para formularios modernos como los de Stripe, Linear, Superhuman.

---

Gradiente Hero Ultra Simple

Código

<section className="p-16 text-center bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-600 text-white rounded-3xl">
	<h1 className="text-4xl font-bold mb-4">Create without limits</h1>
	<p className="text-lg text-blue-100">Design fast. Deploy fast. Iterate fast.</p>
</section>

Notas

• Gradiente diagonal premium: to-br.
• Combina bien con logos o botones blancos.

---

Dark Mode Pattern

Código

<div className="p-6 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-xl">
	<h2 className="text-xl font-semibold">Dark Mode Ready</h2>
	<p className="mt-2">Automatic style switching based on theme.</p>
</div>

Notas

• Tailwind habilita dark mode con clase dark.
• Útil en dashboards y apps donde el tema cambia dinámicamente.

---

Spacer Utilities (Muy usado)

Código

<div className="h-10"></div>

Notas

• Para crear separación vertical controlada sin márgenes.
• Patrón típico en layouts complejos.

Tailwind — Arquitectura, Ecosistema y Patrones Avanzados

Recursos y Referencias Externas (nuevas)

• Tailwind CSS – documentación oficial — documentación, guía, configuración, plugins y actualizaciones. :contentReference[oaicite:1]{index=1}
• Guía de instalación de Tailwind con Next.js — ideal para arrancar proyectos modernos con React/Next. :contentReference[oaicite:3]{index=3}
• “200+ Tailwind CSS Resources: Tools, Tutorials, and More” (lista extensa de recursos) — recopila herramientas, tutoriales, kits UI, playgrounds y más. :contentReference[oaicite:4]{index=4}
• 13 Best Free / Open-Source Tailwind Component Libraries (2024) — comparativa de librerías de componentes que extienden Tailwind. :contentReference[oaicite:5]{index=5}
• TW Elements — UI Kit open-source para Tailwind — colección gratuita de +500 componentes, compatible con dark mode, theming y varios frameworks. :contentReference[oaicite:6]{index=6}
• Artículo (en español) sobre por qué usar Tailwind y sus ventajas — análisis de su filosofía, ventajas y cuándo tiene sentido usarlo. :contentReference[oaicite:7]{index=7}

Expansión del Ecosistema y Patrones Complementarios

Sistemas de Componentes & UI Kits

Para acelerar desarrollo o tener UI consistentes sin reinventar todo desde cero:

• Kits compatibles con Tailwind: como TW Elements, y otros listados en la guía de librerías. Útiles para componentes UI reutilizables: botones, tarifas, alerts, modales, tablas, etc.
• Librerías open-source o gratuitas: facilitan prototipado rápido, consistencia visual y soporte a temas (light/dark).

Patrón «Design System + Utility-First + Componentes»

Combinar:

• Un design system centralizado (colores, tipografías, espaciados, breakpoints) definido en tailwind.config.js.
• Utilidades atómicas para estilos básicos, directas en el markup.
• Componentes reutilizables que agrupen utilidades; ideal para UI consistente, mantenimiento fácil, escalabilidad.

Así obtienes ventajas de utilidad-first y sistema modular.

Escalabilidad en Proyectos Grandes

Para apps medianas o grandes, considera:

• Usar kits/librerías externas para evitar duplicar componentes comunes.
• Definir temas — light/dark — de forma central.
• Aprovechar plugins y utilidades extra que extienden Tailwind (via config o kits UI).
• Mantener una estructura clara: carpetas de componentes, estilos globales mínimos, diseño basado en tokens.

Buenas Prácticas Arquitectónicas

• Separar estructuras básicas (layout, grid, containers) de componentes (cards, botones).
• Mantener consistencia visual mediante variables de diseño: colores, fuentes, tamaños.
• Evitar “clases mágicas” dispersas en todo el proyecto — agrupar cuando repitas estilos.
• Documentar — con comentarios o README interno — patrones comunes, tokens, convenciones de naming.

Cómo Aprovechar Todo esto en un Proyecto Real

1. Partir de configuración base en tailwind.config.js, definiendo color-palette, espacios, breakpoints, tema oscuro.
2. Si el proyecto lo demanda, integrar un kit UI open-source (por ejemplo TW Elements) para acelerar componentes comunes.
3. Construir componentes atómicos reutilizables (botones, tarjetas, formularios) con utilidades Tailwind.
4. Para vistas más complejas — dashboards, layouts, páginas grandes — combinar grids responsivos + componentes reutilizables + design tokens.
5. Documentar la librería interna de estilos/patrones para nuevos desarrolladores o revisiones futuras.

Perfecto. Aquí tienes un Starter Kit completo para Tailwind CSS que incluye:

• Arquitectura base de proyecto
• Configuración avanzada
• Patrones escalables
• Convenciones para componentes
• Estructura recomendada de archivos
• Buenas prácticas para proyectos grandes
• Extensiones útiles y tooling
• Snippets y patrones que no se repiten de lo anterior

Todo listo para copiar/pegar en tu Obsidian, VSCode o donde uses notas.

---

🚀 Tailwind CSS — Starter Kit + Uso Avanzado (2025)

1. Estructura Base de Proyecto

src/  
	components/  
		Base/           # Componentes simples: botones, inputs, tags  
		Layout/         # Header, Sidebar, Footer, Grid general  
		Sections/       # Secciones grandes: hero, features, pricing  
		ui/             # Componentes UI reutilizables (design system)  
	styles/
		tokens.css      # Variables y design tokens opcionales
		globals.css     # Estilos globales + @tailwind
	lib/
		utils/          # Helpers: clsx(), merge(), generadores de clases
		hooks/          # Hooks reutilizables (darkMode, breakpoints)
	app/ o pages/      # (Next.js) páginas y layouts

public/               # Assets, icons, imágenes
tailwind.config.js  
postcss.config.js  

---

2. Configuración Avanzada del tailwind.config.js

import defaultTheme from "tailwindcss/defaultTheme";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";
import aspect from "@tailwindcss/aspect-ratio";
import animate from "tailwindcss-animate";

export default {
  darkMode: "class",
  content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
  theme: {
    container: {
      center: true,
      padding: "1.5rem",
    },
    extend: {
      fontFamily: {
        sans: ["Inter", ...defaultTheme.fontFamily.sans],
      },
      colors: {
        primary: {
          DEFAULT: "#3b82f6",
          dark: "#1d4ed8",
        },
        neutral: {
          light: "#f3f4f6",
          dark: "#1f2937",
        },
      },
      spacing: {
        "4.5": "1.125rem",
      },
      borderRadius: {
        xl2: "1.5rem",
      },
    },
  },
  plugins: [forms, typography, aspect, animate],
};

Incluye:

• dark mode por clase
• tipografía Inter
• plugin animate
• tokens extendidos
• container optimizado para landing pages

---

3. Design Tokens opcionales (CSS / Tailwind)

/* tokens.css */
:root {
	--radius-base: 0.75rem;
	--radius-xl: 1.5rem;

	--color-primary: 59 130 246;
	--color-bg: 248 250 252;
}

.dark {
	--color-bg: 17 24 39;
}

---

4. Componentes Base (Atomic + Utility-Driven)

Botón reutilizable

export default function Button({ children, className, ...props }) {
  return (
    <button
      {...props}
      className={`px-5 py-3 rounded-xl bg-primary text-white font-semibold 
      hover:bg-primary-dark transition ${className}`}
    >
      {children}
    </button>
  );
}

Card UI

export function Card({ children, className }) {
  return (
    <div
      className={`rounded-2xl shadow-sm bg-white dark:bg-neutral-dark/40 p-6 
      border border-gray-200 dark:border-gray-700 ${className}`}
    >
      {children}
    </div>
  );
}

---

5. Patrones Avanzados de Arquitectura

Pattern 1 — “Layout + Sections”

Tu app se divide claramente en:

• Layout general (header, footer, sidebar)
• Secciones independientes tipo “componentes macro”

// Layout.jsx
export default function Layout({ children }) {
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-neutral-dark">
      <Header />
      <main className="pt-20">{children}</main>
      <Footer />
    </div>
  );
}

Usarás:

• grid para zonas responsables
• container para contenido
• px-* internos específicos de sección

---

Pattern 2 — Utility Layers + Components

Divide estilos:

• Utilities: clases tailwind directamente en JSX
• Components: agrupan utilidades repetidas
• Tokens: valores globales
• Plugins: generan utilidades nuevas

Ejemplo para limpiar código:

const title = "text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl";
const lead = "text-lg text-gray-600 dark:text-gray-300 leading-relaxed";

export function SectionHero() {
  return (
    <section className="py-24">
      <div className="container">
        <h1 className={title}>Bienvenido a tu nueva UI</h1>
        <p className={lead}>Construida con Tailwind + patrones avanzados.</p>
      </div>
    </section>
  );
}

---

Pattern 3 — Variantes con clsx + tailwind-merge

Evita conflictos de clases:

import { twMerge } from "tailwind-merge";
import clsx from "clsx";

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

Uso:

<button className={cn("px-4 py-2", active && "bg-primary text-white")} />

---

Pattern 4 — Theming Avanzado

Usa dark, scopes, y temas alternativos:

<html class="dark">
<html data-theme="corporate">

Tokens enlazados en tailwind.config.js:

colors: {
  brand: "rgb(var(--color-primary) / <alpha-value>)"
}

---

6. Sistema de Animaciones

Animaciones suavizadas

extend: {
  keyframes: {
    "fade-in": { from: { opacity: 0 }, to: { opacity: 1 } },
  },
  animation: {
    "fade-in": "fade-in 0.5s ease-in-out",
  },
}

---

7. Snippets Avanzados

Hero moderno con gradientes + blob + responsive

<section className="relative">
  <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700 opacity-20 blur-3xl" />
  <div className="container py-32 relative">
    <h1 className="text-5xl font-bold text-gray-900 dark:text-white">
      Crea interfaces modernas
    </h1>
    <p className="mt-4 text-lg text-gray-600 dark:text-gray-300">
      Tailwind + patrones avanzados = escalabilidad real.
    </p>
  </div>
</section>

---

8. Tooling recomendado (2025)

• Tailwind IntelliSense (VS Code)
• Prettier Plugin Tailwind para ordenar clases automáticamente
• Headless UI si usas React / Next
• Radix UI + Tailwind para accesibilidad avanzada
• Iconify para iconos inline con clases Tailwind

---

9. Buenas Prácticas Esenciales

• Usa componentes para lógica y estilo repetitivo.
• Mantén las utilidades de Tailwind directamente en el HTML/JSX para layouts y prototipado.
• Usa group, peer y data-* para interacciones avanzadas sin JS.

• Unifica escalas:

  • 4 → espaciado
  • rem uniformes
  • max-w-* para textos largos
• Usa tokens si tu app crece o tiene varios temas.

• Mantén consistente el responsive:

  • sm: md: lg: xl: 2xl:
  • sin mezclar breakpoints arbitrarios.

---

10. Starter Kit listo para clonar

Incluye:

• estructura
• layout
• config avanzada
• helpers
• animaciones
• componentes base

¿Quieres que te genere una plantilla completa en React / Next / Vite usando este starter kit? Puedo generar el proyecto entero con:

• configuración
• ejemplo de hero, footer, navbar, cards
• tokens
• componentes UI
• temas
• animaciones
• dark mode
• estructura optimizada