टाइपोग्राफी
शीर्षक, मुख्य पाठ, सूचियाँ, तालिकाएँ और इनलाइन कोड के लिए यूटिलिटी-क्लास रेसिपी — नियोब्रूटलिस्ट हेवी-वेट लुक में टाइपसेट।
हम डिफ़ॉल्ट रूप से कोई टाइपोग्राफ़ी स्टाइल शामिल नहीं करते। यह पेज इसका एक उदाहरण है कि आप अपने टेक्स्ट को स्टाइल करने के लिए यूटिलिटी क्लासेस का उपयोग कैसे कर सकते हैं।
इंस्टॉल करने के लिए कोई टाइपोग्राफ़ी कंपोनेंट नहीं है — डिफ़ॉल्ट रूप से कुछ भी शिप नहीं होता। नीचे दिया हर सेक्शन किसी सादे HTML एलिमेंट (h1–h4, p, blockquote, table, सूचियाँ, इनलाइन कोड) के लिए कॉपी-पेस्ट करने लायक़ यूटिलिटी-क्लास रेसिपी है, जो थीम के टोकन पर टिकी है, ताकि शीर्षक भारी और बॉर्डर मोटे निकलें।
इसे इन स्थितियों में चुनें:
- ब्लॉग पोस्ट और डॉक्स — लंबे लेखन की एक जैसी स्टाइलिंग के लिए MDX या CMS आउटपुट को इन क्लास से जोड़ें।
- मार्केटिंग पेज —
h1, Lead और Large अलग डिस्प्ले-टाइप सिस्टम के बिना ही हीरो कॉपी सँभाल लेते हैं। - जब
@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-dialogexport 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">बड़ा#
export function TypographyLarge() {
return <div className="text-lg font-semibold">Are you absolutely sure?</div>
}छोटा#
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#
Neobrutalism में RTL समर्थन सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें।
"use client"
import * as React from "react"एक्सेसिबिलिटी#
ये रेसिपी नेटिव एलिमेंट को स्टाइल करती हैं, इसलिए सिमेंटिक्स पहले से सही हैं — उन्हें वैसा ही रहने दें। हेडिंग लेवल आकार देखकर नहीं, दस्तावेज़ की रूपरेखा के हिसाब से चुनें: स्क्रीन रीडर लेवल के हिसाब से नेविगेट करते हैं, इसलिए कोई h2 बहुत बड़ा लगे तो h4 का सहारा लेने के बजाय उसकी स्टाइल बदलें। डेटा टेबल को <th> वाली हेडर पंक्ति दें, ताकि सेल अपने कॉलम से जुड़े रहें, और blockquote सिर्फ़ असली उद्धरणों के लिए रखें।