Uso con Tailwind

FDS está construido sobre Tailwind CSS 4 con sintaxis nativa: @theme, @layer, @utility, @custom-variant. Se integra en cualquier proyecto Tailwind 4 con un @import.

Integración en un proyecto Vite / Next / Astro

En tu CSS de entrada:

/* src/input.css */
@import "tailwindcss";
@import "../flowtitude-design-system/main.css";

/* Opcional: tus tokens de proyecto */
@theme {
  --color-primary-500: oklch(0.55 0.18 250);
  --font-display: "Inter", sans-serif;
}

Compila con la CLI de Tailwind:

npx @tailwindcss/cli -i src/input.css -o dist/output.css --watch

Layers de cascada

El orden de @layer determina la especificidad. FDS lo declara explícitamente en main.css:

@layer theme, base, layouts, components, utilities, custom;

@import "tailwindcss/theme.css"     layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@import './theme/flowtitude.css';
@import './base/base.css';
@import './layouts/section.css';
@import './components/buttons.css';
/* ... */

Layer	Contenido	Reglas
`theme`	Tokens y `@theme` de Tailwind	Solo variables, nada de selectores.
`base`	Reset, `body`, elementos HTML	Preflight + estilos globales mínimos.
`layouts`	`section`, `content-flex`	Estructuras reutilizables, no visuales.
`components`	`.btn`, `.card`, tipografía	`@apply` permitido aquí.
`utilities`	`@utility`, utilities de Tailwind	Nunca `@apply`; son la pieza atómica.
`custom`	Overrides de proyecto	Lo último en ganar, para hotfixes locales.

Custom variants

FDS registra tres variantes útiles para relaciones padre/hijo:

@custom-variant parent              (*:has(> &));
@custom-variant parent-hover         (*:hover > &);
@custom-variant parent-focus-within  (*:focus-within > &);

Ejemplo: un icono que cambia cuando el padre tiene hover.

<a class="group flex items-center gap-2">
  <span>Leer más</span>
  <svg class="parent-hover:translate-x-1 transition">...</svg>
</a>

Overrides del proyecto

@theme {
  /* Cambia el primary del proyecto */
  --color-primary-500: oklch(0.55 0.18 250);

  /* Fuente de display propia */
  --font-display: "Playfair Display", serif;

  /* Ajusta la escala fluida */
  --ft-text-max: 1.25rem;
  --ft-type-step-max: 1.25;
}

Utilities propias de FDS

Además de las utilities estándar de Tailwind, FDS añade:

Grids proporcionales: grid-cols-1-2, grid-cols-2-1, grid-cols-1-3, grid-cols-1-2-1, etc. Usan minmax(0, Nfr).
Auto-fill / auto-fit: grid-auto-fill-{xs|sm|md|lg|xl} y grid-auto-fit-*, anclados a los tokens --ft-card-*.
Flip: flip-w, flip-h para espejos horizontales/verticales.

@apply solo en components y base

FDS respeta la convención de Tailwind 4: @apply solo en components y base. Nunca en utilities, porque rompería la atomicidad. Si estás extendiendo FDS, mantén la regla.

Sin `tailwind.config.js`