109k

排版

标题、段落、列表等样式

Radix UI基础 UI
Radix UI - shadcn/ui 组件库

我们默认不提供任何排版样式。此页面演示了如何使用实用类来修饰您的文本。

笑声税:笑话税纪事

很久以前,在一个遥远的国度里,有一位非常懒惰的国王,他整天躺在王座上。有一天,顾问们向他提出了一个问题:王国快没钱了。

国王的计划

国王冥思苦想,最终想出了 一个天才计划:他要对王国里的笑话征税。

“毕竟,”他说,“每个人都喜欢好笑话,所以让他们为这份快乐付费是公平的。”

笑话税

国王的臣民们对此并不买账。他们抱怨连连,但国王态度坚决

  • 一级双关语:5 枚金币
  • 二级笑话:10 枚金币
  • 三级单口段子:20 枚金币

结果,人们不再讲笑话了,王国陷入了忧郁之中。但有一个人拒绝让国王的愚蠢打倒自己:一个名叫乔克斯特的宫廷小丑。

乔克斯特的起义

乔克斯特开始在深夜溜进城堡,到处留下笑话:在国王的枕头下、在他的汤里,甚至在御用厕所里。国王勃然大怒,却似乎无法阻止乔克斯特。

后来有一天,王国的人民发现乔克斯特留下的笑话太搞笑了,以至于他们忍不住大笑起来。一旦他们开始大笑,就停不下来了。

人民的反抗

王国的人民被笑声所鼓舞,开始再次讲笑话和双关语,很快整个王国都参与到了这个笑话中。

国王的国库人民的幸福感
空状态溢出
适中满足
充盈狂喜

国王看到臣民们变得如此快乐,意识到了自己的错误,并废除了笑话税。乔克斯特被宣布为英雄,王国从此过上了幸福的生活。

这个故事的寓意是:永远不要低估笑声的力量,并且要时刻警惕糟糕的决定。

h1

笑声税:笑话税纪事

export function TypographyH1() {
  return (
    <h1 className="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">

h2

王国的人民

export function TypographyH2() {
  return (
    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">

h3

笑话税

export function TypographyH3() {
  return (
    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">

h4

人们不再讲笑话

export function TypographyH4() {
  return (
    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">

p

国王看到臣民们变得如此快乐,意识到了自己的错误,并废除了笑话税。

export function TypographyP() {
  return (
    <p className="leading-7 [&:not(:first-child)]:mt-6">

blockquote

“毕竟,”他说,“每个人都喜欢好笑话,所以让他们为这份快乐付费是公平的。”
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

  • 一级双关语:5 枚金币
  • 二级笑话:10 枚金币
  • 三级单口段子:20 枚金币
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">

Lead (引导文)

一个模态对话框,用于通过重要内容中断用户并期望其做出响应。

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>

Muted (静音/灰色文本)

请输入您的电子邮箱地址。

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

RTL (从右至左)

要在 shadcn/ui 中启用 RTL 支持,请参阅 RTL 配置指南

对笑声征税:笑话税纪事

在很久以前,在一个遥远的国度里,有一位非常懒惰的国王,他整天躺在王座上。有一天,顾问们向他提出了一个问题:王国快没钱了。

国王的计划

国王苦思冥想,最终想出了 一个天才计划:他要对王国里的笑话征税。

“毕竟,”他说,“每个人都喜欢好笑话,所以让他们为这份快乐付费是公平的。”

笑话税

国王的臣民们对此并不买账。他们抱怨连连,但国王态度坚决

  • 一级双关语:5 枚金币
  • 二级笑话:10 枚金币
  • 三级单口段子:20 枚金币

结果,人们不再讲笑话了,王国陷入了忧郁之中。但有一个人拒绝让国王的愚蠢打倒自己:一个名叫“逗比”的宫廷小丑。

“逗比”的起义

“逗比”开始在深夜溜进城堡,到处留下笑话:在国王的枕头下、在他的汤里,甚至在御用厕所里。国王勃然大怒,却似乎无法阻止他。

后来有一天,王国的人民发现“逗比”留下的笑话太搞笑了,以至于他们忍不住大笑起来。一旦他们开始大笑,就停不下来了。

人民的反抗

王国的人民被笑声所鼓舞,开始再次讲笑话和双关语,很快整个王国都参与到了这个笑话中。

国王的国库人民的幸福感
空虚溢出
适中满足
充盈狂喜

国王看到臣民们变得如此快乐,意识到了自己的错误,并废除了笑话税。“逗比”被宣布为英雄,王国从此过上了幸福的生活。

这个故事的寓意是:永远不要低估笑声的力量,并且要时刻警惕糟糕的决定。

"use client"

import * as React from "react"