דילוג לתוכן
1.6k

טיפוגרפיה

מתכונים מסוג "שימושי" לכותרות, טקסט גוף, רשימות, טבלאות וקוד מוטמע — המעוצבים בסגנון הניאו-ברוטליסטי הכבד.

איננו מספקים סגנונות טיפוגרפיה כברירת מחדל. הדף הזה הוא דוגמה לאופן שבו תוכלו להשתמש במחלקות utility כדי לעצב את הטקסט שלכם.

אין רכיב typography להתקנה — שום דבר לא מגיע כברירת מחדל. כל מקטע למטה הוא מתכון utility-class להעתקה-הדבקה לאלמנט HTML רגיל (h1–h4, p, blockquote, table, רשימות, קוד בשורה), נשען על הטוקנים של הערכת כך שכותרות יוצאות כבדות ומסגרות יוצאות עבות.

השתמשו בו כש:

  • פוסטי בלוג ותיעוד — ממפים פלט MDX או CMS למחלקות האלה לעיצוב long-form עקבי.
  • עמודי שיווק — h1, Lead ו-Large מכסים טקסט hero בלי מערכת display-type נפרדת.
  • כש-@tailwindcss/typography זה overkill — מעתיקים רק את האלמנטים שצריך במקום למשוך את תוסף ה-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">

קוד מוטבע

@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">

פסקת פתיחה

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

טקסט גדול

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

טקסט קטן

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

טקסט מעומעם

Enter your email address.

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

RTL

כדי להפעיל RTL ב-Neobrutalism, עיינו במדריך ההגדרה של RTL.

"use client"

import * as React from "react"

נגישות

המתכונים האלה מעצבים אלמנטים מקוריים, כך שהסמנטיקה כבר נכונה — השאירו אותה ככה. בחרו רמות כותרת לפי מבנה המסמך, לא לפי גודל: קוראי מסך מנווטים לפי רמה, אז אם h2 נראה גדול מדי, עצבו אותו מחדש במקום להגיע ל-h4. תנו לטבלאות נתונים שורת כותרת <th> כדי שתאים יישארו מקושרים לעמודות שלהם, ושמרו blockquote לציטוטים אמיתיים.