Tailwind CSS - 排版

上一頁
下一頁

Tailwind CSS **排版**涵蓋了廣泛的預定義類，可幫助直接在網頁上設定文字樣式。它包括字型選擇、文字大小、行距等選項。

Tailwind CSS 排版參考

以下主題可以幫助您為元素建立有效的排版。

主題 描述 示例
Tailwind CSS - 字體系列 字體系列用於定義網頁上字元的樣式和外觀。
Tailwind CSS - 字型大小 字型大小控制文字在網頁上顯示的大小。
Tailwind CSS - 字型平滑 字型平滑使文字在網頁上看起來更平滑，更容易閱讀。
Tailwind CSS - 字型樣式 字型樣式透過調整其外觀來更改文字的外觀。
Tailwind CSS - 字型粗細 字型粗細控制文字在網頁上顯示的粗細和深淺。
Tailwind CSS - 數字字型變體 數字字型變體使用 Tailwind CSS 更改文字中數字字元的外觀。
Tailwind CSS - 字間距 字間距使用 Tailwind CSS 控制文字中字元之間的距離。
Tailwind CSS - 行數限制 行數限制使用 Tailwind CSS 將文字限制為固定行數。
Tailwind CSS - 行高 行高使用 Tailwind CSS 設定文字中行之間的垂直距離。
Tailwind CSS - 列表樣式圖片 列表樣式圖片使用 Tailwind CSS 將預設專案符號替換為自定義圖片。
Tailwind CSS - 列表樣式位置 列表樣式位置透過設定列表項標記在列表中的對齊方式來控制列表項標記的位置。
Tailwind CSS - 列表樣式型別 列表樣式型別使用 Tailwind CSS 設定列表中專案符號或標記的型別。
Tailwind CSS - 文字對齊 文字對齊使用 Tailwind CSS 設定文字的水平位置。
Tailwind CSS - 文字顏色 文字顏色透過在 Tailwind CSS 中應用各種顏色類來定義文字的顏色。
Tailwind CSS - 文字裝飾 文字裝飾在 Tailwind CSS 中為文字應用下劃線、上劃線和刪除線等樣式效果。
Tailwind CSS - 文字裝飾顏色 文字裝飾顏色更改 Tailwind CSS 中下劃線和刪除線等文字樣式的顏色。
Tailwind CSS - 文字裝飾樣式 文字裝飾樣式負責設計文字樣式效果，例如下劃線、刪除線等。
Tailwind CSS - 文字裝飾粗細 文字裝飾粗細控制下劃線、刪除線等文字樣式的粗細。
Tailwind CSS - 文字下劃線偏移 文字下劃線偏移使用 Tailwind CSS 控制下劃線和文字字元之間的垂直距離。
Tailwind CSS - 文字轉換 文字轉換在 Tailwind CSS 中將文字轉換為大寫、小寫或首字母大寫。
Tailwind CSS - 文字溢位 文字溢位控制文字在 Tailwind CSS 中溢位其容器時的顯示方式。
Tailwind CSS - 文字換行 文字換行控制文字在 Tailwind CSS 中在指定尺寸內的換行方式。
Tailwind CSS - 文字縮排 文字縮排定義在 Tailwind CSS 中文字第一行開頭新增多少空格。
Tailwind CSS - 垂直對齊 垂直對齊使用 Tailwind CSS 控制元素在其容器內的垂直位置。
Tailwind CSS - 空格 空格控制 Tailwind CSS 中文字元素之間的間距。
Tailwind CSS - 斷字 斷字定義 Tailwind CSS 中對長單詞及其換行的處理方式。
Tailwind CSS - 連字元 連字元控制在 Tailwind CSS 中單詞中插入連字元以管理換行。
Tailwind CSS - 內容 Tailwind CSS 中的內容控制在元素之前或之後新增哪些文字或元素。

Tailwind CSS 排版示例

在下面的示例中，我們將介紹上面提到的部分 Tailwind CSS 排版類。

示例 1

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Typography Examples
    </h2>
    <p class="underline font-bold mb-2">Using Font-Mono</p>
    <p class="font-mono mb-6">
        This paragraph uses a monospaced font styled with Tailwind CSS.
    </p>
    <p class="underline font-bold mb-2">Applying Underline Offset</p>
    <p class="underline underline-offset-8 mb-8">
        This paragraph has an underline with an offset of 8px.
    </p>
    <p class="underline font-bold mb-2">
        Applying Text Alignment and Line Height
    </p>
    <div class="max-w-md border border-black p-4">
        <p class="text-left leading-8 mb-2">
            <strong>Left-aligned text:</strong>
            Having a sense of purpose gives us direction and fulfillment.
        </p>
        <p class="text-right leading-8">
            <strong>Right-aligned text:</strong>
            Having a sense of purpose gives us direction and fulfillment.
        </p>
    </div>
    <p class="text-blue-700">
        <strong>In this example, we use classes for font, 
        underline offset, text alignment, line height, 
        and apply blue text color to this text.</strong>
    </p>
</body>

</html>

示例 2

在下面的示例中，我們將更仔細地研究一些額外的 Tailwind CSS 排版類。

<!DOCTYPE html>
<html lang="en">
<head>
      <script src="https://cdn.tailwindcss.com"></script> 
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Typography Examples
    </h2>
    <p class="underline font-bold mb-2">
        Applying Text decoration style and color
    </p>
    <p class="underline decoration-wavy decoration-red-500  mb-8">
        This paragraph has a wavy underline from text decoration style.
    </p>
    <p class="underline font-bold mb-2">
        Applying Letter Spacing
    </p>
    <p class="tracking-wider mb-6">
        This paragraph has wider letter spacing for better readability.
    </p>
    <p class="underline font-bold mb-2">
        Applying Text Indentation
    </p>
    <div class="max-w-xs border border-black p-4 mb-6"> 
        <p class="indent-8 mb-4">
            This paragraph has an indentation of 2rem
            (32px) from the left.
        </p>
    </div>
    <p class="underline font-bold mb-2">
        Applying  Word Break
    </p>
    <div class="max-w-xs border border-black p-4 mb-6"> 
        <p class="break-words">
            This paragraph text wraps where long words like<strong>
            pneumonoultramicroscopicsilicovolcanoconiosiss</strong>
            or URLs break to fit within the container.
        </p>
    </div>
    <p>
        <strong>This example uses classes for text decoration,
        color, indentation, word breaking, line height, 
        and letter spacing.</strong>
    </p>
</body>

</html>
列印頁面
上一頁
下一頁
廣告