{"id":28204712,"url":"https://github.com/certidevs/curso-2025-04-tailwind","last_synced_at":"2026-01-20T16:48:00.703Z","repository":{"id":289289357,"uuid":"970705401","full_name":"certidevs/curso-2025-04-tailwind","owner":"certidevs","description":null,"archived":false,"fork":false,"pushed_at":"2025-05-07T17:11:26.000Z","size":98,"stargazers_count":0,"open_issues_count":0,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-14T10:37:33.525Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/certidevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-22T12:14:52.000Z","updated_at":"2025-05-07T17:11:30.000Z","dependencies_parsed_at":"2025-04-22T14:53:42.934Z","dependency_job_id":"5916b4bf-1cf5-4228-8edc-94b2732a042a","html_url":"https://github.com/certidevs/curso-2025-04-tailwind","commit_stats":null,"previous_names":["certidevs/curso-2025-04-tailwind"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/certidevs/curso-2025-04-tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-04-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-04-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-04-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-04-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/certidevs","download_url":"https://codeload.github.com/certidevs/curso-2025-04-tailwind/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/certidevs%2Fcurso-2025-04-tailwind/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270199828,"owners_count":24543732,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-17T07:09:42.891Z","updated_at":"2026-01-20T16:48:00.698Z","avatar_url":"https://github.com/certidevs.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind CSS 4\n\nVersión: 4.1\n\n## Instalación\n\n### Opción 1 (la más fácil):\n\nUsar la CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"\u003e\u003c/script\u003e\n```\n\n* Extensión: Tailwind CSS IntelliSense\n* Extensión: Live Server\n* Extensión: vscode-icons\n\n### Opción 2 (SPA)\n\nUsar vite\n\n```bash\nnpm create vite@latest\n```\n\nInstalación de Tailwind CSS:\n\n```bash\nnpm install tailwindcss @tailwindcss/vite\n```\n\nCrear archivo vite.config.js\n\n```javascript\nimport { defineConfig } from 'vite'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n  plugins: [tailwindcss()],\n})\n```\n\nEjecutar en modo desarrollo:\n\n```bash\nnpm run dev\n```\n\n\n# ESQUEMA DE CLASES TAILWIND CSS\n\n## 1. Tipografía\n\n* text-color:\n  * text-{color}-{shade}: text-red-500, text-blue-700, text-green-300\n  * text-black, text-white\n  * text-current, text-transparent\n  * text-inherit\n  * text-[#FF0000]\n\n* font-size:\n  * text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl\n  * text-[14px], text-[2rem]\n\n* font-weight:\n  * font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black\n  * font-[550]\n\n* font-family:\n  * font-sans, font-serif, font-mono\n  * font-{nombre-personalizado}\n\n* text-align:\n  * text-left, text-center, text-right, text-justify, text-start, text-end\n\n* text-decoration:\n  * underline, no-underline, line-through, overline\n  * decoration-solid, decoration-double, decoration-dotted, decoration-dashed, decoration-wavy\n  * decoration-{color}-{shade}: decoration-red-500\n  * decoration-[3px]\n\n* line-height:\n  * leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose\n  * leading-3, leading-4, leading-5, leading-6\n  * leading-[3rem]\n\n* letter-spacing:\n  * tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest\n  * tracking-[0.2em]\n\n* text-transform:\n  * uppercase, lowercase, capitalize, normal-case\n\n* text-overflow:\n  * truncate, text-ellipsis, text-clip\n\n* white-space:\n  * whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap\n\n* word-break:\n  * break-normal, break-words, break-all\n\n* vertical-align:\n  * align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom, align-sub, align-super\n\n* font-style:\n  * italic, not-italic\n\n* font-variant-numeric:\n  * normal-nums, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions\n\n## 2. Borders\n\n* border-width: border, border-*\n* border-radius: rounded\n* border-color: border-color-500\n* border-style: border-dotted\n* outline-width: outline outline-offset-1\n* outline-color: outline-red-500\n* outline-style: outline-dotted\n* outline-offset: outline-offset-1, outline-offset-2, outline-offset-4, outline-offset-[5px]\n\n## 3. Paddings y Margins: (Espaciado)\n\n* Padding: (espaciado interno, por dentro del borde)\n  * p-2, p-3, p-4...\n  * px-2, px-3, px-4...\n  * py-2, py-3, py-4...\n  * pt-2, pt-3, pt-4...\n  * pb-2, pb-3, pb-4...\n  * pl-2, pl-3, pl-4...\n  * pr-2, pr-3, pr-4...\n  * ps-2, ps-3, ps-4...\n  * pe-2, pe-3, pe-4\n  * p-[5px]\n* Margin: (espaciado externo, por fuera del borde)\n  * m-2, m-3, m-4...\n  * mx-2, mx-3, mx-4...\n  * my-2, my-3, my-4...\n  * mt-2, mt-3, mt-4...\n  * mb-2, mb-3, mb-4...\n  * ml-2, ml-3, ml-4...\n  * mr-2, mr-3, mr-4...\n  * ms-2, ms-3, ms-4...\n  * me-2, me-3, me-4...\n  * m-[5px]\n  * m-auto, mx-auto, my-auto\n* Space between (espaciado entre elementos hijos) (preferible usar gap):\n  * space-x-2\n  * space-y-2\n  * gap-2, gap-3, gap-4...\n  * gap-x-2, gap-x-3, gap-x-4...\n  * gap-y-2, gap-y-3, gap-y-4...\n  * gap-[5px]\n\n## 4. Sizing (Dimensionamiento)\n\n* Width (Ancho):\n  * w-0, w-1, w-2... w-12, w-14, w-16...w-96\n  * w-1/2, w-1/3, w-2/3, w-1/4, w-3/4, w-1/5...\n  * w-full (100%)\n  * w-screen (100vw)\n  * w-auto\n  * w-min, w-max, w-fit\n  * w-[200px], w-[50%]\n\n* Min-Width (Ancho mínimo):\n  * min-w-0\n  * min-w-full\n  * min-w-min, min-w-max, min-w-fit\n  * min-w-[100px]\n\n* Max-Width (Ancho máximo):\n  * max-w-0, max-w-none\n  * max-w-xs, max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl... max-w-7xl\n  * max-w-prose\n  * max-w-screen-sm, max-w-screen-md, max-w-screen-lg, max-w-screen-xl, max-w-screen-2xl\n  * max-w-full\n  * max-w-min, max-w-max, max-w-fit\n  * max-w-[500px]\n\n* Height (Alto):\n  * h-0, h-1, h-2... h-12, h-14, h-16...h-96\n  * h-1/2, h-1/3, h-2/3, h-1/4, h-3/4, h-1/5...\n  * h-full (100%)\n  * h-screen (100vh)\n  * h-svh, h-lvh, h-dvh (variantes de viewport height)\n  * h-auto\n  * h-min, h-max, h-fit\n  * h-[200px], h-[50%]\n\n* Min-Height (Alto mínimo):\n  * min-h-0\n  * min-h-full\n  * min-h-screen\n  * min-h-svh, min-h-lvh, min-h-dvh\n  * min-h-min, min-h-max, min-h-fit\n  * min-h-[100px]\n\n* Max-Height (Alto máximo):\n  * max-h-0, max-h-none\n  * max-h-full\n  * max-h-screen\n  * max-h-svh, max-h-lvh, max-h-dvh\n  * max-h-min, max-h-max, max-h-fit\n  * max-h-[500px]\n\n* Size (Ancho y alto simultáneamente):\n  * size-0, size-1, size-2... size-12, size-14, size-16...size-96\n  * size-auto\n  * size-full\n  * size-[32px]\n\nLa base del espaciado en Tailwind es una escala numérica configurable. Por defecto:\n\n*   `0` -\u003e `0px`\n*   `px` -\u003e `1px`\n*   `0.5` -\u003e `0.125rem` (2px)\n*   `1` -\u003e `0.25rem` (4px)\n*   `1.5` -\u003e `0.375rem` (6px)\n*   `2` -\u003e `0.5rem` (8px)\n*   `2.5` -\u003e `0.625rem` (10px)\n*   `3` -\u003e `0.75rem` (12px)\n*   `3.5` -\u003e `0.875rem` (14px)\n*   `4` -\u003e `1rem` (16px)\n*   ... y así sucesivamente (5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96).\n\nTamaños:\n\n* `max-w-xs` (`20rem`)\n* `max-w-sm` (`24rem`)\n* `max-w-md` (`28rem`)\n* `max-w-lg` (`32rem`)\n* `max-w-xl` (`36rem`)\n* `max-w-2xl` (`42rem`)\n* `max-w-3xl` (`48rem`)\n* `max-w-4xl` (`56rem`)\n* `max-w-5xl` (`64rem`)\n* `max-w-6xl` (`72rem`)\n* `max-w-7xl` (`80rem`)\n\n## 5. Backgrounds\n\nColores de fondo:\n\n* `bg-{color}-{intensidad}`: Colores de fondo (ej: `bg-blue-500`, `bg-red-200`)\n* `bg-transparent`: Fondo transparente\n* `bg-current`: Fondo con color actual\n* `bg-black/50`, `bg-blue-500/75`: Fondo con opacidad (50%, 75%)\n\nTamaño de fondo:\n\n* `bg-auto`: Tamaño original de la imagen\n* `bg-cover`: Cubre todo el contenedor manteniendo proporción\n* `bg-contain`: Contiene la imagen completa dentro del elemento\n\nPosición de fondo:\n\n* `bg-center`: Centra la imagen de fondo\n* `bg-left`, `bg-right`: Alinea a los lados\n* `bg-top`, `bg-bottom`: Alinea arriba o abajo\n* `bg-left-top`, `bg-right-bottom`, etc.: Combinaciones de alineación\n\nRepetición de fondo:\n\n* `bg-repeat`: Repite la imagen (por defecto)\n* `bg-no-repeat`: No repite la imagen\n* `bg-repeat-x`: Repite solo horizontalmente\n* `bg-repeat-y`: Repite solo verticalmente\n\nFijación de fondo:\n\n* `bg-fixed`: Fondo fijo durante el scroll\n* `bg-local`: Fondo se desplaza con el contenido\n* `bg-scroll`: Fondo se desplaza con la página (por defecto)\n\nGradientes:\n\n* `bg-gradient-to-r`, `bg-gradient-to-t`: Dirección del gradiente (right, top, etc.)\n* `from-{color}-{intensidad}`: Color inicial del gradiente\n* `via-{color}-{intensidad}`: Color intermedio\n* `to-{color}-{intensidad}`: Color final\n\n## 6. Flexbox\n\nActivación y dirección:\n\n* `flex`: Activa flexbox\n* `inline-flex`: Activa flexbox con comportamiento inline\n* `flex-row`: Dirección horizontal (por defecto)\n* `flex-row-reverse`: Dirección horizontal inversa\n* `flex-col`: Dirección vertical (columna)\n* `flex-col-reverse`: Dirección vertical inversa\n\nEnvoltura (wrap):\n\n* `flex-wrap`: Permite que los elementos pasen a la siguiente línea\n* `flex-nowrap`: Mantiene todos los elementos en una línea (por defecto)\n* `flex-wrap-reverse`: Envuelve elementos pero en dirección inversa\n\nAlineación en el eje principal (justify):\n\n* `justify-start`: Alinea al inicio del contenedor\n* `justify-end`: Alinea al final del contenedor\n* `justify-center`: Centra elementos horizontalmente\n* `justify-between`: Distribuye con espacio máximo entre elementos\n* `justify-around`: Distribuye con espacio igual alrededor de cada elemento\n* `justify-evenly`: Distribuye con espacio exactamente igual entre elementos\n\nAlineación en el eje secundario (items):\n\n* `items-start`: Alinea elementos al inicio del eje transversal\n* `items-end`: Alinea elementos al final del eje transversal\n* `items-center`: Centra elementos verticalmente\n* `items-baseline`: Alinea elementos por sus líneas base de texto\n* `items-stretch`: Estira elementos para ocupar todo el espacio (por defecto)\n\nAlineación de múltiples líneas (content):\n\n* `content-start`: Alinea líneas al inicio\n* `content-end`: Alinea líneas al final\n* `content-center`: Centra líneas\n* `content-between`: Distribuye líneas con espacio entre ellas\n* `content-around`: Distribuye líneas con espacio alrededor\n* `content-evenly`: Distribuye líneas con espacio igual\n\nEspacio entre elementos (gap):\n\n* `gap-{n}`: Espacio uniforme (ej: `gap-4` = 1rem)\n* `gap-x-{n}`: Espacio horizontal\n* `gap-y-{n}`: Espacio vertical\n\nPropiedades de elementos individuales:\n\n* `flex-1`: Flex grow 1, flex shrink 1, flex basis 0%\n* `flex-auto`: Flex grow 1, flex shrink 1, flex basis auto\n* `flex-initial`: Flex grow 0, flex shrink 1, flex basis auto (por defecto)\n* `flex-none`: Flex grow 0, flex shrink 0, flex basis auto\n* `grow`, `grow-0`: Controla si el elemento crece\n* `shrink`, `shrink-0`: Controla si el elemento se encoge\n* `basis-{n}`: Define el tamaño base del elemento\n\nOrden de elementos:\n\n* `order-{n}`: Cambia el orden de elementos (ej: `order-1`, `order-last`)\n* `order-first`: Coloca el elemento primero\n* `order-last`: Coloca el elemento último\n* `order-none`: Usa el orden del DOM (por defecto)\n\nAuto-alineación individual:\n\n* `self-auto`: Hereda del contenedor padre\n* `self-start`: Alinea al inicio (individualmente)\n* `self-end`: Alinea al final (individualmente)\n* `self-center`: Centra (individualmente)\n* `self-stretch`: Estira para llenar (individualmente)\n* `self-baseline`: Alinea a la línea base (individualmente)\n\n## 7. Grid\n\nActivación Grid:\n\n* `grid`: Activa CSS Grid\n* `inline-grid`: Activa Grid con comportamiento inline\n\nColumnas y filas (template):\n\n* `grid-cols-{n}`: Define número de columnas (ej: `grid-cols-3` = 3 columnas)\n* `grid-cols-none`: Sin definición de columnas\n* `grid-rows-{n}`: Define número de filas (ej: `grid-rows-2` = 2 filas)\n* `grid-rows-none`: Sin definición de filas\n\nColumnas/filas automáticas:\n\n* `auto-cols-auto`: Tamaño de columnas automático\n* `auto-cols-min`: Tamaño mínimo por contenido\n* `auto-cols-max`: Tamaño máximo por contenido\n* `auto-cols-fr`: Tamaño de fracción (1fr)\n* `auto-rows-auto`, `auto-rows-min`, `auto-rows-max`, `auto-rows-fr`: Análogos para filas\n\nFlujo de elementos\n\n* `grid-flow-row`: Elementos fluyen por filas (por defecto)\n* `grid-flow-col`: Elementos fluyen por columnas\n* `grid-flow-dense`: Rellena espacios vacíos automáticamente\n* `grid-flow-row-dense`, `grid-flow-col-dense`: Combinaciones\n\nEspacio entre celdas (gap)\n\n* `gap-{n}`: Espacio uniforme (ej: `gap-4` = 1rem)\n* `gap-x-{n}`: Espacio horizontal entre columnas\n* `gap-y-{n}`: Espacio vertical entre filas\n\nPosicionamiento de elementos\n\n* `col-auto`: Posición automática\n* `col-span-{n}`: Ocupa n columnas (ej: `col-span-2` = 2 columnas)\n* `col-span-full`: Ocupa todas las columnas disponibles\n* `col-start-{n}`: Comienza en línea n (ej: `col-start-2`)\n* `col-end-{n}`: Termina en línea n (ej: `col-end-4`)\n* `row-auto`, `row-span-{n}`, `row-span-full`, `row-start-{n}`, `row-end-{n}`: Análogos para filas\n\nAlineación de ítems en celdas\n\n* `justify-items-start`: Alinea ítems al inicio de la celda (horizontalmente)\n* `justify-items-end`: Alinea ítems al final de la celda\n* `justify-items-center`: Centra ítems horizontalmente\n* `justify-items-stretch`: Estira ítems para ocupar toda la celda (por defecto)\n\nAlineación de contenido de grid\n\n* `justify-content-start`: Alinea todo el grid al inicio del contenedor\n* `justify-content-end`: Alinea todo el grid al final del contenedor\n* `justify-content-center`: Centra todo el grid horizontalmente\n* `justify-content-between`: Distribuye columnas con espacio máximo entre ellas\n* `justify-content-around`: Distribuye columnas con espacio igual alrededor\n* `justify-content-evenly`: Distribuye columnas con espacio exactamente igual\n\nAlineación vertical en celdas\n\n* `items-start`, `items-end`, `items-center`, `items-stretch`, `items-baseline`: Igual que en Flexbox\n\nAlineación vertical de todo el grid\n\n* `content-start`, `content-center`, `content-end`, `content-between`, `content-around`, `content-evenly`: Igual que en Flexbox\n\nAlineación individual (para ítems específicos)\n\n* `justify-self-auto`: Hereda del grid padre\n* `justify-self-start`: Alinea al inicio horizontalmente (individualmente)\n* `justify-self-end`: Alinea al final horizontalmente (individualmente)\n* `justify-self-center`: Centra horizontalmente (individualmente)\n* `justify-self-stretch`: Estira horizontalmente (individualmente)\n* `self-auto`, `self-start`, `self-end`, `self-center`, `self-stretch`, `self-baseline`: Alineación vertical individual\n\nGrid responsive\n\n* Todas las clases grid pueden ser prefijadas con breakpoints:\n  * `sm:grid-cols-2`: 2 columnas en pantallas pequeñas (640px+)\n  * `md:grid-cols-3`: 3 columnas en pantallas medianas (768px+)\n  * `lg:grid-cols-4`: 4 columnas en pantallas grandes (1024px+)\n  * `xl:grid-cols-6`: 6 columnas en pantallas extra grandes (1280px+)\n  * `2xl:grid-cols-8`: 8 columnas en pantallas 2xl (1536px+)\n\n\n## 8. Responsive\n\nTailwind usa un sistema de breakpoints mobile-first. \n\nEsto significa que las utilidades sin prefijo (como \"uppercase\") funcionan en todos los tamaños de pantalla, mientras que las utilidades con prefijo (como \"md:uppercase\") solo se aplican en el breakpoint especificado y superiores.\n\nBreakpoints predeterminados en Tailwind CSS:\n\n| Prefijo de breakpoint | Ancho mínimo | CSS |\n|-----------------------|--------------|-----|\n| sm | 40rem (640px) | @media (width \u003e= 40rem) { ... } |\n| md | 48rem (768px) | @media (width \u003e= 48rem) { ... } |\n| lg | 64rem (1024px) | @media (width \u003e= 64rem) { ... } |\n| xl | 80rem (1280px) | @media (width \u003e= 80rem) { ... } |\n| 2xl | 96rem (1536px) | @media (width \u003e= 96rem) { ... } |\n\nPara aplicar una utilidad de forma condicional en cierto breakpoint, simplemente añade el prefijo del breakpoint seguido de dos puntos (:) antes de la clase.\n\nEjemplo: `md:flex md` (aplica flex solo en pantallas medianas y superiores)\n\nEjemplo: `flex flex-row md:flex-col` (aplica flex solo en pantallas medianas y superiores)\n\n\nCombinación para rangos específicos: Para dirigirse a un único breakpoint, apunta al rango para ese breakpoint apilando una variante responsive como md con la variante max-* para el siguiente breakpoint:\n\n| Variante | Media query |\n|----------|-------------|\n| max-sm | @media (width \u003c 40rem) { ... } |\n| max-md | @media (width \u003c 48rem) { ... } |\n| max-lg | @media (width \u003c 64rem) { ... } |\n| max-xl | @media (width \u003c 80rem) { ... } |\n| max-2xl | @media (width \u003c 96rem) { ... } |\n\nEjemplo: `md:max-lg:text-center` (centrar texto solo entre md y lg)\n\n## 9. Modo oscuro\n\nTailwind CSS 4 difiere un poco el cómo se configura el modo oscuro con respecto a Tailwind 3.\n\nTailwind CSS incluye una variante dark que te permite estilizar tu sitio de manera diferente cuando el modo oscuro está activado.\n\nPara habilitar el modo oscuro en tu proyecto Tailwind CSS 4, puedes añadir el siguiente código dentro de tu archivo CSS principal:\n\n``@custom-variant dark (\u0026:where(.dark, .dark *));``\n\n\nA partir de aquí lo habitual es detectar el tema seleccionado por el usuario y aplicar el modo oscuro a nivel de elemento html, es decir, la etiqueta ``\u003chtml\u003e``.\n\nEs habitual crear un botón para alternar el tema y aplicar la clase dark al elemento html con javascript.\n\n\n## 10. Estados interactivos:\n\nPara añadir estados interactivos como hover, focus, etc., puedes usar las clases de estado como `hover:bg-red-500` o `focus:border-blue-500`.\n\nEstados de interacción básicos:\n\n* hover: - Al pasar el cursor sobre el elemento\n* focus: - Cuando el elemento recibe el foco\n* active: - Cuando el elemento está siendo activado (presionado)\n* visited: - Para enlaces ya visitados\n* focus-visible: - Cuando el elemento recibe el foco vía teclado\n* focus-within: - Cuando el elemento o alguno de sus hijos tiene el foco\n\n\nEstados de grupo:\n\n* group-hover: - Se aplica a hijos cuando se pasa el cursor sobre el padre\n* group-focus: - Se aplica a hijos cuando el padre recibe el foco\n* peer-hover: - Se aplica cuando un elemento \"par\" recibe hover\n* peer-focus: - Se aplica cuando un elemento \"par\" recibe foco\n* peer-active: - Se aplica cuando un elemento \"par\" está siendo activado (presionado)\n* peer-checked: - Se aplica cuando un elemento \"par\" está seleccionado\n\n\nEstados de formularios:\n\n* disabled: - Cuando un elemento está deshabilitado\n* enabled: - Cuando un elemento está habilitado\n* checked: - Para inputs seleccionados\n* indeterminate: - Para checkboxes en estado indeterminado\n* placeholder: - Para el texto placeholder\n* required: - Para elementos obligatorios\n* valid: - Para elementos con valor válido\n* invalid: - Para elementos con valor inválido\n* autofill: - Cuando el campo ha sido autocompletado\n\n\nEstados de posición:\n\n* first: - Primer elemento de un grupo\n* last: - Último elemento de un grupo\n* odd: - Elementos en posiciones impares\n* even: - Elementos en posiciones pares\n* empty: - Elementos sin contenido\n\n## 11. Directivas Tailwind CSS\n\n\n* `@import \"tailwindcss\"`:\n    * Importa Tailwind CSS en tu archivo CSS.\n    * Reemplaza a la antigua sintaxis de @tailwind base, @tailwind components, @tailwind utilities\n* `@theme`:\n    * Define variables de tema para Tailwind CSS.\n* `@utility`:\n    * Define utilidades personalizadas.\n    * Puede combinarse con `@apply` para usar clases existentes de Tailwind.\n* `@layer`:\n    * Permite agrupar y anidar capas de estilos\n\n\n\n\n\n## Flujo de trabajo habitual en Tailwind\n\n1. Diseño base: primero programamos el diseño de la versión móvil (mobile-first) usando clases de utilidad pero sin prefijos.\n2. Adaptación responsive: añadir variantes responsive (sm:, md:, lg:, xl:, 2xl:) para ajustar el diseño en pantallas más grandes.\n3. Soporte para tema oscuro: ``dark:text-gray-200``\n4. Añadir estados interactivos: hover, focus\n\n\nArchivos config\n\n## Despliegue de páginas estáticas:\n\nGitHub Pages\n\nVercel y con algún framework Angular, React\n\nHeroku\n\nAzure Flexible databases for MySQL\n\nRender \n\nSupabase\n\nOVH, Scaleway, DigitalOcean, AWS","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcertidevs%2Fcurso-2025-04-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcertidevs%2Fcurso-2025-04-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcertidevs%2Fcurso-2025-04-tailwind/lists"}