Aplicacion

// tailwind.config.mjs
import nuBrand from '@nuevauno/brand/tailwind-preset';

export default {
  presets: [nuBrand],
  content: ['./app/**/*.{ts,tsx}'],
};

// app/root.tsx
import './app.css';

export function links() {
  return [
    { rel: 'stylesheet', href: '/css/brand.css' },
  ];
}

// 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>
  );
}

// main.ts
import '@nuevauno/brand/css/brand.css';

<!-- 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>

Patrones comunes

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

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

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