CSS框架Tailwind CSS上手初体验

XingChao
2,104 阅读5分钟

image.png

Tailwindcss是什么

Tailwindcss 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

先来看个官网示例，写一个下图的卡片样式

使用传统方式，定制的设计需要定制的css，这也是我们目前的开发方式

image.png

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

要完成一个名片的样式开发，我们通常会这样写：在html或jsx结构中添加赋有语义化的class类名，随后在css中写入对应类的样式。

这是最常见、最常规的写法，被称作Semantic CSS（语义化CSS）规范。在这种规范下，我们追求关注点分离，让结构与样式各司其职，使结构更具语义化。但这样一来，在很多场景下也面临着许多问题，比如：

  • 每一个标签都有一个专有的class，但就算是给标签添加一个小小的样式时，我们都得绞尽脑汁想出一个类名，既要求有语义化、符合代码规范，还要和与它作用相似的标签类名有区分；

  • 每个类中往往会有很多个样式规则，在结构的语义、样式完全相同时才能做到真正的复用，若存在一点差异，就难以实现样式复用；

  • 可以通过在html或jsx中删除类名的方式去掉相应的样式，但此时我们无法轻易的删除该类下的css样式，因为我们无法保证该类在别处也使用过，而在修改某个类中的样式时也存在同样的问题；

  • 如果将html或jsx结构做迁移，我们还要将相应css同时迁移，即使这样，迁移后的样式也可能会根据上下文环境变得错乱；

Tailwind CSS，用法与Bootstrap类似，都是通过类名来引用样式。但最大的区别，也是Tailwind CSS的核心，即它是一套以Atomic/Utility-First CSS为基础CSS框架。同样是名片的样式开发，Tailwind CSS 这样做：通过直接在 HTML 中应用预先存在的类来设置元素的样式。

image.png

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

在上面的示例中，我们使用了：

  • 使用 Tailwind 的 flexbox 和 padding 功能类 (flex, flex-shrink-0, 和 p-6) 来控制整体的卡片布局

  • 使用 max-width 和 margin 功能类 (max-w-sm 和 mx-auto) 来设置卡片的宽度和水平居中

  • 使用 background color, border radius, 和 box-shadow 功能类 (bg-white, rounded-xl, 和 shadow-md) 设置卡片的外观样式

  • 使用 width 和 height 功能类 (w-12 and h-12) 来设置 logo 图片的大小

  • 使用 space-between 功能类 (space-x-4) 来处理 logo 和文本之间的间距

  • 使用 font size，text color，和 font-weight 功能类 (text-xl，text-black，font-medium 等等) 给卡片文字设置样式

这种方法使我们无需编写一行自定义的 CSS 即可实现一个完全定制的组件设计。这样一对比，就可以明显看出Tailwindcss 的优点

  • 不用花时间想类名

  • 结构与样式紧密耦合，不用来回切换html与css，更专注于html

  • 修改某个样式，不影响其他结构样式，保证全局样式统一，不存在全局样式污染问题

  • 丰富的功能类，覆盖大多数的开发场景

  • 功能越简单的类，复用率越高

Tailwindcss 核心概念

功能类优先

在一组受约束的原始功能类的基础上构建复杂的组件。

通过上面的示例，可以看出使用Tailwindcss内置的功能类，可以快速的构建我们的卡片。

响应式设计

使用响应式功能变体构建自适应的用户界面。

Tailwind 中的每个功能类都可以有条件的应用于不同的断点，这使得您可以轻松的构建复杂的响应式界面而不用离开 HTML。

根据常用的设备分辨率方案，默认内置了 5 个断点：

断点前缀最小宽度CSS
sm640px@media (min-width: 640px) { ... }
md768px@media (min-width: 768px) { ... }
lg1024px@media (min-width: 1024px) { ... }
xl1280px@media (min-width: 1280px) { ... }
2xl1536px@media (min-width: 1536px) { ... }

要添加一个仅在特定断点生效的功能类，只需要在该功能类前加上断点名称，后面跟 : 字符。

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="/store.jpeg" alt="Man looking at item at a store" />
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers for your new business</a>
      <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
    </div>
  </div>
</div>

image.pngimage.png

悬停、焦点和其它状态

使用功能类为处于悬停、焦点和其它状态的元素设置样式。

深色模式

使用 Tailwind CSS 在深色模式下为您的网站设置样式。

添加基础样式

可以在 Tailwind 的基础上添加自己的全局基础样式。

提取组件

处理复用并且保持功能优先项目的可维护性。

添加新的功能类

使用您的自定义功能类来扩展 Tailwind。

函数与指令

Tailwind 向您的 CSS 的暴露的函数和指令。

兼容性

框架兼容性，vue、React 等均支持，或者使用 PostCSS 插件形式安装

image.png

浏览器兼容性

从 v2.0 开始，Tailwind CSS 专为 Chrome，Firefox，Edge 和 Safari 的最新稳定版本设计并在其上经过了测试。 Tailwind CSS v2.0 不支持任何版本的 IE，包括 IE 11。

总结

一开始使用 TailwindCSS 确实会有一些别扭，但是当我们在开发一些无法使用 UI 库的项目是就不得不面临编写大量 css 文件，还得考虑响应式布局，黑暗模式等等，但是这些对于 TailwindCSS 来说将是简单的。 结合vscode 插件，开发起来更方便

  • Tailwind CSS IntelliSense支持自动完成、语法高亮、悬停预览、语法分析功能。

  • PostCSS Language Support支持css未知规则如tailwind中的 @tailwind、@apply、@screen。

更多内容，可参考官网，提供的示例以及配置比较全面

avatar
文章
阅读
粉丝