Bỏ qua đến nội dung
1.6k

Typography

Các mẫu thiết kế đa dụng dành cho tiêu đề, nội dung chính, danh sách, bảng và mã nhúng — được định dạng theo phong cách “neobrutalist” đậm nét.

Chúng tôi không cung cấp sẵn bất kỳ kiểu typography nào theo mặc định. Trang này là một ví dụ về cách bạn có thể dùng các lớp tiện ích để tạo kiểu cho văn bản của mình.

Không có thành phần typography nào để cài — mặc định không kèm theo gì cả. Mỗi phần bên dưới là một công thức utility class để sao chép và dán cho một phần tử HTML thuần (h1–h4, p, blockquote, table, danh sách, mã trong dòng), dựa vào các token của theme để tiêu đề ra chữ nặng nét và viền ra nét dày.

Nên dùng khi:

  • Bài blog và tài liệu — ánh xạ đầu ra MDX hoặc CMS sang các class này để định dạng bài dài một cách nhất quán.
  • Trang marketing — h1, Lead và Large lo trọn phần chữ hero mà không cần một hệ chữ hiển thị riêng.
  • Khi @tailwindcss/typography là quá mức cần thiết — chỉ sao chép những phần tử bạn cần thay vì kéo về cả 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">

Mã nội dòng

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

Mở đầu

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

Lớn

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

Nhỏ

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

Mờ

Enter your email address.

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

RTL

Để bật hỗ trợ RTL trong Neobrutalism, xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập

Các công thức này tạo kiểu cho phần tử native, nên ngữ nghĩa vốn đã đúng — hãy giữ nguyên như vậy. Chọn cấp tiêu đề theo dàn ý tài liệu, không phải theo cỡ chữ: trình đọc màn hình điều hướng theo cấp, nên nếu một h2 trông quá to, hãy chỉnh lại kiểu thay vì với sang h4. Cho bảng dữ liệu một hàng tiêu đề <th> để các ô luôn gắn với cột của chúng, và chỉ dùng blockquote cho trích dẫn thực sự.