跳到内容
1.6k

排版

适用于标题、正文、列表、表格和内联代码的通用样式——采用新粗野主义风格的重磅排版效果。

我们默认不提供任何排版样式。本页展示了如何使用工具类为文本设置样式的示例。

没有可安装的 Typography 组件——默认不会附带任何东西。下面每一节都是针对某个普通 HTML 元素（h1–h4、p、blockquote、table、列表、内联代码）的一段可复制粘贴的工具类配方，全部借助主题的令牌，所以标题够厚重，边框够粗。

适合以下场景：

  • 博客文章与文档——把 MDX 或 CMS 的输出映射到这些类名上，长文排版立刻统一。
  • 营销页面——h1、引导语和大号文本足以撑起主视觉文案，不必再引入一套独立的展示字体体系。
  • @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

要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

无障碍

这些配方只是给原生元素加样式，所以语义天生就是对的——请让它保持这样。标题层级要按文档大纲来选，而不是按字号：屏幕阅读器是按层级导航的，所以如果 h2 看起来太大，请改它的样式，而不是退而用 h4。数据表格请配一行 <th> 表头，让单元格始终与所在列关联起来；blockquote 则只留给真正的引文。