Tailwind CSS 分享

最新推荐文章于 2024-07-11 15:15:03 发布

Kang Tao

最新推荐文章于 2024-07-11 15:15:03 发布

阅读量411

点赞数

分类专栏： QuickStart 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/u011352988/article/details/127725227

版权

本文介绍了Tailwind CSS，一个utility-first的CSS框架，用于快速构建定制用户界面。它提供了原子化的工具类，允许开发者以积木方式组装样式。文章详细讨论了Tailwind CSS的特点，如完备的设计系统、状态控制、自定义和小型化。还通过瀑布流卡片的实践案例展示了其应用，并总结了Tailwind CSS的优缺点。

摘要由CSDN通过智能技术生成

What is Tailwind CSS

NPM Downloads Trending

Npm Downloads

Official Definition

A utility-first CSS framework for rapidly building custom user interfaces.

Utility First

Utility First 这个概念是相对于 Semantic First 而言的。后者即通过多个样式共同构建出描述特征、具有含义的某个类的常规用法。

举个例子，常规语义化表达下的一个朴素的卡片：

See the Pen Card Example by Allen Tao ( @boring-plans) on CodePen.

而使用 Tailwind CSS：

See the Pen Card Example Tailwind by Allen Tao ( @boring-plans) on CodePen.

从这个例子中可以看出，Tailwind CSS 不再强调 Class 的语义性，而是提供尽可能原子化的工具类，让用户能基于此，以一种搭积木的方式快速组装样式，构建组件、页面。

何为原子化？👇

从中不难看出，最终每一个 Class 大都仅包含一条既定样式，这也是所谓“积木”的含义。

CSS Framework

简单来说，我们可以把样式的表达形式按照细粒度分为：

内联

<div
  style="border: 1px solid #f0f0f0; border-radius: 8px; color: #a0a0a0"
></div>

原子化

<div class="rounded border text-[#a0a0a0]"></div>
<style>
  .rounded {
     
    border-radius: 8px;
  }

  .border {
     
    border: 1px solid #f0f0f0;
  }