Estilos y Tailwind CSS

Sistema de colores (CSS Variables)

Los colores nunca se hardcodean. Se definen como CSS variables en formato RGB (sin rgb() wrapper) y se mapean a clases Tailwind. Esto permite:

• Theming dinámico por vertical
• Usar con opacidad de Tailwind (bg-primary/50)
• Cambiar toda la paleta modificando solo las variables

/* Inyectadas por ecom-components + el plugin initApp */
--c-primary: 0, 255, 168;
--c-primary-dark: ...;
--c-primary-light: ...;
--c-secondary: ...;
--c-graphite: ...;
--c-graphite-light: ...;
--c-graphite-lighter: ...;

En templates:

<div class="bg-primary text-white">Color primario de la vertical</div>
<div class="bg-primary/50">Primario con 50% opacidad</div>
<div class="border-secondary">Borde color secundario</div>
<div class="text-graphite">Texto oscuro principal</div>

---

tailwind.config.ts

Colores mapeados a variables

colors: {
  primary: 'rgb(var(--c-primary))',
  'primary-dark': 'rgb(var(--c-primary-dark))',
  secondary: 'rgb(var(--c-secondary))',
  graphite: 'rgb(var(--c-graphite))',
}

Tipografía responsive (clamp)

fontSize: {
  h1: ['clamp(2rem, 4vw, 3.5rem)', { lineHeight: '1.1' }],
  h2: ['clamp(1.5rem, 3vw, 2.5rem)', { lineHeight: '1.2' }],
  h3: ['clamp(1.25rem, 2.5vw, 2rem)', { lineHeight: '1.3' }],
  p: ['clamp(0.875rem, 1.5vw, 1rem)', { lineHeight: '1.6' }],
}

Uso: class="text-h1", class="text-p". El tamaño se adapta al viewport automáticamente.

Breakpoints (mobile-first)

Prefijo	Min-width	Dispositivo
(base)	0px	Móvil
sm:	640px	Móvil grande
md:	768px	Tablet
lg:	1024px	Desktop
xl:	1280px	Desktop grande
2xl:	1536px	Pantalla ultra-wide

Siempre mobile-first: El estilo base es para móvil. Los prefijos agregan para pantallas más grandes:

<!-- Correcto -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- Incorrecto (desktop-first) -->
<div class="grid grid-cols-3 sm:grid-cols-1">

---

Reglas de estilo estrictas

Regla	Correcto	Incorrecto
No colores hardcodeados	bg-primary	bg-[#00ffa8]
No px en CSS custom	@apply p-4	padding: 16px
No !important	Resolver especificidad	!important
BEM en SCSS custom	.card__header--active	.card .header.active
Preferir Tailwind	class="flex gap-4"	CSS custom para layout

---

Cuándo usar CSS custom vs Tailwind utilities

Situación	Usar
Layout, spacing, colors, typography	Tailwind utilities en class=""
Animaciones complejas	<style scoped> con @apply + @keyframes
Pseudo-elements (::before, ::after)	<style scoped>
Media queries específicas	Tailwind breakpoints
Estados complejos (multiple conditions)	<style scoped> con clases BEM

---

BEM en el proyecto

Cuando necesitas SCSS custom, sigue BEM (Block Element Modifier):

<style scoped lang="postcss">
/* Block */
.product-card {
  @apply rounded-lg overflow-hidden shadow-md;
}

/* Element (parte del block) */
.product-card__header {
  @apply p-4 bg-primary;
}

.product-card__body {
  @apply p-6 space-y-2;
}

/* Modifier (variante) */
.product-card__header--featured {
  @apply bg-secondary;
}

.product-card--compact {
  @apply p-2;
}
</style>

---

CSS global del proyecto

Importados via app/config/css.ts → nuxt.config.ts:

Archivo	Contenido
fonts.css	@font-face declarations (Neulis y variantes)
variables.css	CSS custom properties del proyecto
reset.css	CSS reset/normalize base
vueTransitions.css	Clases de animación para <Transition> de Vue
components.css	Estilos base compartidos entre componentes

Estos se cargan antes que Tailwind, por lo que Tailwind puede sobreescribirlos.

---

Fuentes (Neulis)

La librería ecom-components inyecta 9 variantes de la fuente Neulis:

• Neulis (regular, medium, bold, etc.)
• Neulis Alt (variante alternativa)

Se aplican via font-family en el CSS base. No necesitas configurar nada adicional — ya están disponibles.

---

Patterns responsive comunes

Grid responsive de cards

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <AEMainCard v-for="item in items" :key="item.id" v-bind="item" />
</div>

Container centrado con max-width

<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  <!-- Contenido con padding lateral responsive -->
</div>

Mostrar/ocultar por breakpoint

<AENavbar class="hidden lg:block" />
<AEMobileNavbar class="block lg:hidden" />

Texto responsive sin media queries

<h1 class="text-h1">Se adapta solo con clamp()</h1>

---

Stylelint

Valida CSS automáticamente en pre-commit:

pnpm styles       # Verificar errores
pnpm styles:fix   # Auto-corregir

Qué valida: orden de propiedades, no !important, no px directos, naming BEM.