Tailwind CSS - 简介

---

---

Tailwind CSS是一个实用优先的框架，这意味着它是一种CSS架构方法，它使用预定义的实用类来设置HTML元素的样式，而不是编写自定义CSS，无需离开HTML文档文件。

内容目录

 

什么是Tailwind CSS？

它是一个实用优先的框架，目前是最好的CSS框架。它拥有大量的预定义类、自定义选项以及删除HTML元素预定义的不必要CSS的能力。

实用优先方法的优势

• 一致性：通过创建有限的样式集供使用，开发人员可以保持一致性。
• 自定义：通过从配置文件生成实用类，您可以自定义现有样式或创建自己的类。
• 效率：通过避免使用不必要的样式膨胀CSS，易于保持效率。
• 快速UI开发：通过将预先设计的实用类直接应用于HTML元素。
• 节省时间：通过重用相同的尺寸和颜色，这也可以改进UI。

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是一个高度可定制且实用优先的CSS框架。其自定义选项包括可配置的'tailwind.config.js'文件、可主题化架构和插件架构。其自定义允许配置内容、主题、屏幕、间距、插件等等。

• Tailwind CSS - 配置
• Tailwind CSS - 内容
• Tailwind CSS - 主题
• Tailwind CSS - 屏幕尺寸
• Tailwind CSS - 颜色
• Tailwind CSS - 间距
• Tailwind CSS - 插件
• Tailwind CSS - 预设

Tailwind CSS 的局限性

如果您计划通过CDN链接使用Tailwind CSS，则存在某些限制。

• 无法使用插件。
• 无法使用指令。
• 无法自定义Tailwind的默认主题。

Tailwind CSS 的优势

• 响应式布局：Tailwind CSS提供了一系列实用类；其中一个类用于格式化响应式布局。只需在文档中插入一行类，我们就可以实现组织良好的响应式布局。
• 效用优先的基本原则：Tailwind CSS是一个效用优先的CSS框架，“效用优先”意味着该框架专注于提供效用类。这使我们能够直接在HTML文档上使用效用类。
• 高度可定制：由于其可扩展性和效用优先的方法，Tailwind CSS高度可定制。您可以轻松自定义调色板、间距、排版和断点。
• 更少的自定义代码：Tailwind CSS使我们能够通过向HTML文档添加效用类来直接向HTML文档添加设计，从而无需使用自定义CSS。

Tailwind CSS 的劣势

• Tailwind CSS包含大量的效用类，因此开发人员需要花费更多时间学习如何有效地使用该框架。
• 缺少标题和导航组件。