Lewati ke konten
1.6k

Tipografi

Resep kelas utilitas untuk judul, teks isi, daftar, tabel, dan kode inline — disusun dengan gaya neobrutalis yang tebal dan kokoh.

Kami tidak menyertakan gaya tipografi apa pun secara default. Halaman ini adalah contoh cara menggunakan kelas utilitas untuk menata gaya teks Anda.

Tidak ada komponen tipografi yang perlu diinstal — tidak ada yang disertakan secara bawaan. Setiap bagian di bawah ini adalah resep kelas utilitas siap salin-tempel untuk elemen HTML polos (h1–h4, p, blockquote, table, daftar, kode sebaris), bersandar pada token tema sehingga judul tampil berat dan garis tepi tampil tebal.

Cocok digunakan untuk:

  • Postingan blog dan dokumentasi — petakan keluaran MDX atau CMS ke kelas-kelas ini demi gaya tulisan panjang yang konsisten.
  • Halaman pemasaran — h1, Lead, dan Large sudah mencukupi teks hero tanpa sistem tipe display terpisah.
  • Saat @tailwindcss/typography terasa berlebihan — salin hanya elemen yang Anda perlukan alih-alih memasang plugin prose.

h1

Taxing Laughter: The Joke Tax Chronicles

export function TypographyH1() {
  return (
    <h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">

h2

The People of the Kingdom

export function TypographyH2() {
  return (
    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">

h3

The Joke Tax

export function TypographyH3() {
  return (
    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">

h4

People stopped telling jokes

export function TypographyH4() {
  return (
    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">

p

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

export function TypographyP() {
  return (
    <p className="leading-7 [&:not(:first-child)]:mt-6">

blockquote

"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege." 
export function TypographyBlockquote() {
  return (
    <blockquote className="mt-6 border-l-2 pl-6 italic">

table

export function TypographyTable() {
  return (
    <div className="my-6 w-full overflow-y-auto">

list

  • 1st level of puns: 5 gold coins
  • 2nd level of jokes: 10 gold coins
  • 3rd level of one-liners : 20 gold coins
export function TypographyList() {
  return (
    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">

Kode inline

@radix-ui/react-alert-dialog
export function TypographyInlineCode() {
  return (
    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">

Lead

A modal dialog that interrupts the user with important content and expects a response.

export function TypographyLead() {
  return (
    <p className="text-xl text-muted-foreground">

Besar

Are you absolutely sure?
export function TypographyLarge() {
  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
}

Kecil

Email address
export function TypographySmall() {
  return (
    <small className="text-sm leading-none font-medium">Email address</small>

Redup

Enter your email address.

export function TypographyMuted() {
  return (
    <p className="text-sm text-muted-foreground">Enter your email address.</p>

RTL

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas

Resep-resep ini menggayakan elemen natif, jadi semantiknya sudah benar — jaga agar tetap begitu. Pilih tingkat judul berdasarkan kerangka dokumen, bukan berdasarkan ukuran: pembaca layar bernavigasi menurut tingkat, jadi jika sebuah h2 terlihat terlalu besar, ubah gayanya alih-alih beralih ke h4. Beri tabel data sebuah baris header <th> agar sel tetap terasosiasi dengan kolomnya, dan pakai blockquote hanya untuk kutipan sungguhan.