Instalação

Como instalar e configurar o Niemeyer no seu projeto.

1. Importar tokens CSS

/* app/globals.css */
@import '@morada/niemeyer/tokens';
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

2. Configurar Tailwind

// tailwind.config.js
const niemeyer = require('@morada/niemeyer/tailwind-preset');

module.exports = {
  presets: [niemeyer],
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
};

3. Adicionar fontes

// app/layout.tsx
import { Outfit, Lato } from 'next/font/google';

const outfit = Outfit({ subsets: ['latin'], variable: '--font-heading' });
const lato = Lato({ subsets: ['latin'], weight: ['300','400','700','900'], variable: '--font-body' });

export default function RootLayout({ children }) {
  return (
    <html className={`${outfit.variable} ${lato.variable}`}>
      <body>{children}</body>
    </html>
  );
}

4. Temas

Classe	Tema
(nenhuma) ou .theme-gray	Gray Light (padrão)
.theme-gray.dark	Gray Dark
.theme-black	Black Light
.theme-black.dark	Black Dark