پرش به محتوا
1.6k

تایپوگرافی

دستورالعمل‌های کلاس Utility برای سربرگ‌ها، متن اصلی، فهرست‌ها، جداول و کد درون‌خطی — صفحه‌آرایی‌شده با ظاهر سنگین نئوبروتالیست.

ما به‌طور پیش‌فرض هیچ استایل تایپوگرافی ارائه نمی‌دهیم. این صفحه نمونه‌ای است از اینکه چگونه می‌توانید با استفاده از کلاس‌های ابزاری به متن خود استایل بدهید.

کامپوننت typography برای نصب وجود ندارد — چیزی به‌صورت پیش‌فرض نمی‌آید. هر بخش پایین یک دستور پخت copy-paste کلاس utility برای عنصر HTML ساده است (h1–h4، p، blockquote، table، فهرست، کد درون‌خطی)، متکی بر tokenهای تم تا headingها سنگین و حاشیه‌ها ضخیم درآیند.

برای این موارد از آن استفاده کنید:

  • پست وبلاگ و docs — خروجی MDX یا CMS را به این کلاس‌ها map کنید برای استایل long-form یکدست.
  • صفحات بازاریابی — h1، Lead و Large کپی hero را بدون سیستم display-type جدا پوشش می‌دهند.
  • وقتی @tailwindcss/typography سنگین است — فقط عناصری را که لازم دارید کپی کنید به‌جای کشیدن پلاگین 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"

دسترسی‌پذیری

این دستورها عناصر بومی را استایل می‌کنند، پس semantics از قبل درست است — همان‌طور نگهشان دارید. سطح heading را بر اساس outline سند انتخاب کنید نه اندازه: صفحه‌خوان‌ها با سطح ناوبری می‌کنند، پس اگر h2 خیلی بزرگ به‌نظر می‌رسد، استایلش را عوض کنید نه این‌که سراغ h4 بروید. به جدول‌های داده ردیف header <th> بدهید تا سلول‌ها با ستون‌شان مرتبط بمانند، و blockquote را برای نقل‌قول واقعی نگه دارید.