HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

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-Index

Tailwind CSS 弹性盒和网格

Tailwind CSS 弹性基础 Tailwind CSS 弹性方向 Tailwind CSS 弹性包裹 Tailwind CSS 弹性 Tailwind CSS 弹性增长 Tailwind CSS Flex Shrink 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 弹性框和网格 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 - Flexbox 和 Grid

Tailwind CSS Flexbox 和 Grid 是一个布局模块，可以有效地对齐 Flex 或网格容器内的项目。它包含一系列实用类，用于有效构建弹性和网格容器，例如 flex-basis、flex grow、flex shrink、grid-template-columns、grid-auto-rows、gap 等等。

Tailwind CSS 弹性框和网格参考

以下主题可用于创建有效的元素布局。

主题 描述 示例
Tailwind CSS - 弹性基础 Flex Basis 用于定义弹性项目的初始大小。
Tailwind CSS - 弹性方向 Flex Direction 用于设置弹性容器内弹性项目的方向。
Tailwind CSS - 弹性包裹 Flex Wrap 实用程序控制弹性项目是否包裹到新行或不是。
Tailwind CSS - Flex Flex 类指定弹性项目在弹性容器内如何增大和缩小。
Tailwind CSS - Flex Grow Flex Grow 类指定弹性项目在弹性容器内如何增大。
Tailwind CSS - Flex Shrink Flex Shrink 类指定了 Flex 项目在 Flex 容器内如何收缩。
Tailwind CSS - Order Order 类指定其容器内弹性项目和网格项目的顺序。
Tailwind CSS - 网格模板列 网格模板列类指定网格布局中列的数量和大小。
Tailwind CSS - 网格列起始/结束 网格列起始/结束类指定跨网格列的排列和大小
Tailwind CSS - 网格模板行 网格模板行指定网格布局中行的数量和大小。
Tailwind CSS - 网格行起始/结束 网格行起始/结束类指定跨网格行的排列和大小
Tailwind CSS - 网格自动流 网格自动流类指定网格布局中元素的自动对齐方式。
Tailwind CSS - 网格自动列 网格自动列类指定隐式创建的网格列的大小。
Tailwind CSS - 网格自动行 网格自动行指定隐式创建的网格行的大小。
Tailwind CSS - 间隙 间隙类用于在网格和弹性元素之间添加空间项。
Tailwind CSS - 内容对齐 内容对齐用于将弹性项目和网格项目沿主轴或水平面对齐。
Tailwind CSS - 内容对齐 内容对齐用于将网格项目沿其行内轴对齐，或 使网格项目在其网格单元格内水平对齐。
Tailwind CSS - Justify Self Justify self 类用于将各个网格项沿其内联轴对齐。
Tailwind CSS - 对齐内容 "对齐内容"用于沿横轴定位多行弹性容器和网格容器中的行。
Tailwind CSS - 对齐项目 "对齐项目"用于沿容器的横轴定位弹性项目和网格项目。
Tailwind CSS - Align Self Align Self 用于沿其容器的横轴对齐单个网格和弹性项目。
Tailwind CSS - Place Content Place content class 用于同时对齐内容
Tailwind CSS - Place Items Place Items类用于同时对齐和调整项目
Tailwind CSS - Place Self Place self 类用于同时对齐和调整各个项目

Tailwind CSS Flexbox 示例

在下面的示例中，我们将介绍一些上面提到的 Flexbox 类

<!DOCTYPE html>
<html>
<head>
        <script src="https://cdn.tailwindcss.com"></script>
</head>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-2">
        Tailwind CSS Flexbox Classes
    </h2>
    <p class="mb-2">
        The following example is illustrating the 
        combine use of Flex, Flex-wrap, Gap, and 
        Order classes. 
        
    </p>
    <div class="flex flex-wrap gap-2 mb-4">
        <div class="bg-red-500 p-4 w-32 h-28 order-5">Item 1</div>
        <div class="bg-blue-500 p-4 w-32 h-28 order-4">Item 2</div>
        <div class="bg-green-500 p-4 w-32 h-28 order-3">Item 3</div>
        <div class="bg-yellow-500 p-4 w-32 h-28 order-2">Item 4</div>
        <div class="bg-orange-500 p-4 w-32 h-28 order-1">Item 5</div>
    </div>
</body>
</html>

Tailwind CSS 网格示例

在下面的示例中，我们将介绍一些上面提到的网格类

<!DOCTYPE html>
<html>
<head>
        <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-2">
        Tailwind CSS Grid Classes
    </h2>
    <p class="mb-2">
        The following example is illustrating the 
        combine use of Grid, Grid-template-column, Gap, 
        and Place-items classes. 
    </p>
    <div class="grid grid-cols-3 gap-2 p-1 h-44">
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-orange-500 p-4">
                Item 1
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-blue-500 p-4">
                Item 2
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-pink-500 p-4">
                Item 3
            </div>
        </div>
    </div>
</body>
</html>
❮ ❯