コンテンツへスキップ
1.6k

タイポグラフィ

見出し、本文、リスト、表、インラインコード向けの汎用的なスタイルセットです。ネオブルータリズム風の重厚なデザインで組版されています。

Neobrutalism はデフォルトではタイポグラフィのスタイルを一切提供していません。このページは、ユーティリティクラスを使ってテキストにスタイルを適用する方法の例です。

インストールする Typography コンポーネントはありません。既定で同梱されるものもありません。以下の各セクションは、プレーンな 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-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 は実際の引用に限定してください。