Tailwind CSS - 介绍

Tailwind CSS 是一个以 utility first 为核心的框架，这意味着它是一种 CSS 架构方法，使用预定义的 utility classes 来为 HTML 元素添加样式，而不是编写自定义 CSS，且无需离开你的 HTML 文档文件。

目录

什么是 Tailwind CSS？

它是 utility first 的，目前市面上最好的 CSS 框架之一。拥有大量预定义的 classes、自定义选项，以及移除与 HTML 元素预定义的不必要 CSS 的能力。

Utility First 方法的优势

• 一致性 − 通过创建有限的样式集合，开发者可以保持一致性。
• 自定义性 − 通过从配置文件生成 utility classes，你可以自定义现有样式，或者创建自己的 classes。
• 效率 − 通过避免 CSS 中添加不必要的样式，易于保持高效性。
• 快速 UI 开发 − 通过直接将预设计的 utility classes 应用到 HTML 元素上。
• 节省时间 − 通过重用相同的尺寸和颜色，这也可以提升 UI。

Tailwind CSS 版本

下面提到的版本可以在官方网站上查看；这些版本之间还有许多小的更新。

Tailwind CSS 提供了什么？

Tailwind CSS 提供了许多功能，比如设计 layout、flexbox、grid、spacing、sizing、typography、backgrounds、borders、effects、filters、tables、transitions、animations、transforms 和 interactivity。在使用这些之前，你需要了解核心概念和自定义配置，这样才能充分发挥 Tailwind CSS 的潜力。

Tailwind CSS 核心概念

Tailwind CSS 核心概念涵盖了广泛的基础主题，例如 utility classes、自定义配置 等。

• Tailwind CSS - Utility-First Fundamentals
• Tailwind CSS - Hover, Focus, and Other States
• Tailwind CSS - Responsive Design
• Tailwind CSS - Dark Mode
• Tailwind CSS - Reusing Styles
• Tailwind CSS - Adding Custom Styles
• Tailwind CSS - Functions & Directives

Tailwind CSS 自定义配置

Tailwind CSS 是一个高度可自定义的 utility-first CSS 框架。其自定义选项包括可配置的 'tailwind.config.js' 文件、可主题化的架构和插件架构。其自定义功能允许配置 content、theme、screens、spacing、plugins 等。

• Tailwind CSS - Configuration
• Tailwind CSS - Content
• Tailwind CSS - Theme
• Tailwind CSS - Screens
• Tailwind CSS - Colors
• Tailwind CSS - Spacing
• Tailwind CSS - Plugins
• Tailwind CSS - Presets

Tailwind CSS 的限制

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

• 无法使用 Plugins。
• 无法使用 Directives。
• 无法自定义 Tailwind 的默认 theme。

Tailwind CSS 的优势

• 响应式布局 − Tailwind CSS 提供了一系列 utility classes；其中之一用于格式化响应式布局。只需在文档中插入一行 class，我们就能实现一个组织良好的响应式布局。
• Utility-First 基础 − Tailwind CSS 是一个 Utility-First CSS 框架，其中 “Utility-first” 表示该框架专注于提供 utility classes。这使我们能够直接在 HTML 文档中使用 utility classes。
• 高度可定制 − 由于其可扩展性和 utility-first 方法，Tailwind CSS 具有高度可定制性。您可以轻松自定义颜色调色板、间距、排版和断点。
• 更少的自定义代码 − Tailwind CSS 使我们能够通过向 HTML 文档添加 utility classes，直接为 HTML 文档添加设计，从而消除使用自定义 CSS 的需求。

Tailwind CSS 的劣势

• Tailwind CSS 包含大量 utility classes，因此开发者需要花费更多时间学习如何有效使用该框架。
• 缺少 headers 和 navigation 组件。