Aplicación

Ejemplos de integración por framework. Todos los proyectos usan Tailwind 3.4 con el preset de marca.

Astro + React

work · pos · home
// tailwind.config.mjs
import nuBrand from '@nuevauno/brand/tailwind-preset';

export default {
  presets: [nuBrand],
  content: ['./src/**/*.{astro,html,js,jsx,tsx,svelte,ts}'],
};
<!-- src/layouts/Layout.astro -->
<html>
  <head>
    <link rel="stylesheet" href="https://branding.nuevauno.com/css/brand.css" />
  </head>
  <body class="font-sans">
    <slot />
  </body>
</html>
// React component
export function Button({ children }) {
  return (
    <button className="bg-accent hover:bg-accent-hover text-white
      font-medium rounded-md px-4 py-2 text-sm">
      {children}
    </button>
  );
}

Vue 3

claw
<!-- Vue SFC -->
<template>
  <button class="bg-accent hover:bg-accent-hover text-white
    font-medium rounded-md px-4 py-2 text-sm">
    <slot />
  </button>
</template>

SvelteKit

branding · crm
<button class="bg-accent hover:bg-accent-hover text-white
  font-medium rounded-md px-4 py-2 text-sm">
  Acción
</button>

Patrones comunes

Section header

Ejemplo de sección

<h2 class="font-mono text-xs uppercase tracking-widest text-gray-400">
  Sección
</h2>

Card

Título

Contenido de la card

<div class="bg-white rounded-xl border border-gray-200 p-6">
  ...
</div>

Icon desde CDN

<img
  src="https://branding.nuevauno.com/icons/work.svg"
  alt="Work"
  class="w-6 h-6"
/>

Eliminar duplicados

Al integrar el preset, eliminar de cada tailwind.config:

  • Definiciones de colors.accent
  • Definiciones de fontFamily.sans y fontFamily.mono
  • Google Fonts imports de Inter y JetBrains Mono
  • Variables CSS duplicadas (--primary-color: #fe4a23)

NUEVAUNO © 2026