- 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 - Z 索引
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - Flex 基準
- Tailwind CSS - Flex 方向
- Tailwind CSS - Flex 換行
- Tailwind CSS - Flex
- Tailwind CSS - Flex 伸長
- Tailwind CSS - Flex 縮短
- 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 - 文字換行
- 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 - 背景色調旋轉
- 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 - SVG
- 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 - Flexbox 和 Grid
- 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 **文字裝飾** 包含實用程式類，這些類可以快速輕鬆地新增和調整 HTML 元素中的文字裝飾，而無需自定義 CSS。
Tailwind CSS 文字裝飾類
以下是 Tailwind CSS 文字裝飾類的列表，其中包括控制文字視覺樣式的屬性。
| 類 | CSS 屬性 |
|---|---|
| underline | text-decoration-line: underline; |
| overline | text-decoration-line: overline; |
| line-through | text-decoration-line: line-through; |
| no-underline | text-decoration-line: none; |
Tailwind CSS 文字裝飾類的功能
- **underline:** 此類在文字下方新增一條線。
- **overline:** 此類在文字上方新增一條線。
- **line-through:** 此類在文字中間繪製一條線。
- **no-underline:** 此類刪除文字中的任何下劃線裝飾。
Tailwind CSS 文字裝飾類示例
以下是 Tailwind CSS 文字裝飾類的示例，這些示例顯示瞭如何使用不同的裝飾（如下劃線、上劃線、刪除線和無下劃線）來設定文字樣式。
應用文字裝飾
此示例演示瞭如何使用 Tailwind CSS 文字裝飾類在 HTML 元素中設定文字裝飾樣式。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-2xl font-bold mb-4">
Tailwind CSS List Style Position
</h1>
<p> Underline class</p>
<p class="underline text-2xl mb-4">
This text uses the underline class.
</p>
<p>Overline class</p>
<p class="overline text-2xl mb-4">
This text uses the overline class.
</p>
<p>Line-through class</p>
<p class="line-through text-2xl mb-4 ">
This text uses the line-through class.
</p>
<p> No-underline class</p>
<p class="no-underline text-2xl">
This text uses the no-underline class.
</p>
</body>
</html>
懸停時條件文字裝飾
此示例演示瞭如何有條件地應用 Tailwind CSS 文字裝飾類，使用帶有修飾符的實用程式類來控制不同的狀態。例如，“**hover:underline**”在懸停時對文字應用下劃線。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-2xl font-bold mb-4">
Tailwind CSS List Style Position
</h1>
<h2 class="text-2xl mb-4">Hover to toggle line</h2>
<p class="underline mb-6 hover:no-underline">
Text is underlined by default.
</p>
<p class="overline mb-6 hover:no-underline">
Text has an overline by default.
</p>
<p class="line-through mb-6 hover:underline">
Text has a line through it by default.
</p>
<p class="no-underline mb-4 hover:underline">
Text has no underline by default.
</p>
</body>
</html>
廣告