9.7k
新建

排版

上一页下一页

标题、段落、列表等样式

我们默认不提供任何排版样式。此页面展示了如何使用工具类（utility classes）来设置文本样式。

征收笑话税：笑话税纪事

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

国王的计划

国王绞尽脑汁，终于想出了一个绝妙的计划：他要对王国里的笑话征税。

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

笑话税

国王的子民们并不觉得好笑。他们抱怨连连，但国王态度坚决

  • 一级双关语：5 枚金币
  • 二级笑话：10 枚金币
  • 三级单口相声：20 枚金币

结果，人们不再讲笑话，王国陷入了忧郁。但有一个人拒绝让国王的愚蠢打倒自己：一个名叫 Jokester 的宫廷小丑。

Jokester 的反抗

Jokester 开始在半夜溜进城堡，到处留下笑话：在国王的枕头下、汤里，甚至在御用马桶里。国王大发雷霆，却似乎无法阻止 Jokester。

后来有一天，王国的人民发现 Jokester 留下的笑话实在是太搞笑了，以至于他们忍不住大笑起来。一旦他们开始笑，就停不下来了。

人民的起义

王国的人民受到笑声的鼓舞，又开始讲笑话和双关语，不久整个王国都参与到了这个笑话中。

国王的国库人民的快乐
空状态充盈
微薄满足
饱满狂喜

国王看到子民们变得如此快乐，意识到自己犯了错，于是废除了笑话税。Jokester 被尊为英雄，王国从此过上了幸福的生活。

这个故事的寓意是：永远不要低估笑声的力量，并且永远要警惕糟糕的想法。

h1

征收笑话税：笑话税纪事

<template>
  <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight text-balance">
    Taxing Laughter: The Joke Tax Chronicles
  </h1>
</template>

h2

王国的人民

<template>
  <h2
    class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
  >
    The People of the Kingdom
  </h2>
</template>

h3

笑话税

<template>
  <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
    The Joke Tax
  </h3>
</template>

h4

人们不再讲笑话

<template>
  <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
    People stopped telling jokes
  </h4>
</template>

p

国王看到子民们变得如此快乐，意识到自己犯了错，于是废除了笑话税。

<template>
  <p class="leading-7 [&:not(:first-child)]:mt-6">
    The king, seeing how much happier his subjects were, realized the error of
    his ways and repealed the joke tax.
  </p>
</template>

blockquote

“毕竟，”他说，“每个人都喜欢好笑话，所以他们为这份特权付费是公平的。”
<template>
  <blockquote class="mt-6 border-l-2 pl-6 italic">
    "After all," he said, "everyone enjoys a good joke, so
    it's only fair that they should pay for the privilege."
  </blockquote>
</template>

table

国王的国库人民的快乐
空状态充盈
微薄满足
饱满狂喜
<template>
  <div class="my-6 w-full overflow-y-auto">
    <table class="w-full">
      <thead>
        <tr class="m-0 border-t p-0 even:bg-muted">
          <th
            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
          >
            King's Treasury
          </th>
          <th
            class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right"
          >
            People's happiness
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="m-0 border-t p-0 even:bg-muted">
          <td
            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
          >
            Empty
          </td>
          <td
            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
          >
            Overflowing
          </td>
        </tr>
        <tr class="m-0 border-t p-0 even:bg-muted">
          <td
            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
          >
            Modest
          </td>
          <td
            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
          >
            Satisfied
          </td>
        </tr>
        <tr class="m-0 border-t p-0 even:bg-muted">
          <td
            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
          >
            Full
          </td>
          <td
            class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
          >
            Ecstatic
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

list

  • 一级双关语：5 枚金币
  • 二级笑话：10 枚金币
  • 三级单口相声：20 枚金币
<template>
  <ul class="my-6 ml-6 list-disc [&>li]:mt-2">
    <li>1st level of puns: 5 gold coins</li>
    <li>2nd level of jokes: 10 gold coins</li>
    <li>3rd level of one-liners : 20 gold coins</li>
  </ul>
</template>

内联代码

reka-ui
<template>
  <code
    class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
  >
    reka-ui
  </code>
</template>

引导文本 (Lead)

一个模态对话框，用于向用户中断展示重要内容并要求响应。

<template>
  <p class="text-xl text-muted-foreground">
    A modal dialog that interrupts the user with important content and expects a
    response.
  </p>
</template>

大

你确定吗？
<template>
  <div class="text-lg font-semibold">
    Are you absolutely sure?
  </div>
</template>

小

电子邮箱地址
<template>
  <small class="text-sm font-medium leading-none">
    Email address
  </small>
</template>

静音文字

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

<template>
  <p class="text-sm text-muted-foreground">
    Enter your email address.
  </p>
</template>
工具提示 (Tooltip)安装 (Installation)