Nextjs Setup

Shadcn Setup

pnpm dlx shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=nova&baseColor=stone&theme=rose&iconLibrary=hugeicons&font=noto-sans&menuAccent=bold&menuColor=default&radius=default&template=next" --template next

Gutenberg into tailwind.

source

1. The Global Typography Configuration

In Tailwind 4.0, we define the Gutenberg “Macro Typography” variables in your app/globals.css. These tokens represent the core math behind the kit’s vertical rhythm.

 
/* global.css */
@import "tailwindcss";
 
@theme {
  /* Gutenberg Leading (Baseline Grid) [cite: 337, 341] */
  --spacing-baseline-sm: 26px;
  --spacing-baseline-lg: 31px;
 
  /* Modular Scale (Perfect Fifth) [cite: 339] */
  --text-g-xxxl: 4.3rem;   /* h1 */
  --text-g-xxl: 3.5rem;    /* h1 desktop */
  --text-g-xl: 3rem;       /* h1-alt */
  --text-g-l: 2.5rem;      /* h1-base */
  --text-g-s: 1.6875rem;   /* h2 */
  --text-g-xs: 1.4375rem;  /* h3 */
  --text-g-xxs: 1.2rem;    /* h4/attention-grabber */
  --text-g-base: 1rem;     /* p/h5/h6 */
}

---

2. Native HTML Tag Implementation

Add the following to your @layer base to style native tags using Gutenberg’s specific margins and line-heights.

@layer base {
  html {
    font-size: 16px; /* 100% [cite: 336, 371] */
    font-family: var(--font-merriweather), Georgia, serif; /* [cite: 344] */
    color: #222; /* [cite: 339] */
    
    @media (min-width: 40em) {
      font-size: 18px; /* 112.5% [cite: 337, 372] */
    }
  }
 
  /* Global Baseline Reset [cite: 373] */
  * {
    line-height: var(--spacing-baseline-sm);
    margin-bottom: var(--spacing-baseline-sm);
    
    @media (min-width: 40em) {
      line-height: var(--spacing-baseline-lg);
      margin-bottom: var(--spacing-baseline-lg);
      max-width: 35rem; /* Gutenberg standard measure [cite: 338, 374] */
      margin-left: auto;
      margin-right: auto;
    }
  }
 
  /* Headings [cite: 242-248, 511-514] */
  h1 { 
    font-size: var(--text-g-l); /* 2.5rem */
    margin-top: 6.5rem; 
    line-height: 3.25rem;
    @media (min-width: 40em) {
      margin-top: 6.88rem;
      line-height: 3.44rem;
    }
  }
 
  h2 { 
    font-size: var(--text-g-s); /* 1.6875rem */
    margin-top: 4.06rem; 
    line-height: 2.43rem;
    @media (min-width: 40em) {
      margin-top: 4.3rem;
      line-height: 2.58rem;
    }
  }
 
  h3 { 
    font-size: var(--text-g-xs); /* 1.4375rem */
    margin-top: 3.25rem;
  }
 
  h4 { 
    font-size: var(--text-g-xxs); /* 1.2rem */
    margin-top: 2.43rem;
  }
 
  h5, h6 { 
    font-size: var(--text-g-base); /* 1rem */
    margin-top: 4.06rem;
  }
 
  h6 { font-style: italic; font-weight: normal; } /* [cite: 520] */
 
  /* Lists [cite: 540] */
  ul, ol { margin-left: 1.625rem; }
  ul li, ol li { margin-bottom: 0; }
 
  /* Blockquotes [cite: 541, 542] */
  blockquote {
    font-style: italic;
    padding-left: 1.43rem;
    @media (min-width: 40em) { padding-left: 2rem; }
  }
 
  /* Horizontal Rule [cite: 525, 526] */
  hr {
    border: 0;
    height: var(--spacing-baseline-sm);
    background-image: linear-gradient(to bottom, transparent 11px, #222 11px, #222 15px, transparent 15px);
    width: 100px;
    margin: 3.25rem auto;
  }
 
  /* Code & Pre [cite: 496, 497] */
  code, pre { font-family: monospace, monospace; }
  code {
    display: block;
    padding: var(--spacing-baseline-sm);
    background: #f8f8f8;
    @media (min-width: 40em) { padding: var(--spacing-baseline-lg); }
  }
}