70k Star 的 Tailwind CSS 为何这么火?(上)

简介: 70k Star 的 Tailwind CSS 为何这么火?

近年来,Tailwind CSS 在前端开发领域备受关注,在GitHub上获得了70000+的Star。尽管市面上有众多的 CSS 框架可供选择,但 Tailwind CSS 凭借其独特的概念、强大的特性和灵活性越来越受到开发者的喜爱。那么,为何 Tailwind CSS 如此受欢迎呢?本文将深入探讨这个问题,并介绍 Tailwind CSS 的概念、特点、技巧和组件库,以更好地理解和使用它!


Tailwind CSS 概念


原子 CSS

在学习 Tailwind CSS 之前,先来了解一下什么是原子 CSS。

原子 CSS(Atomic CSS)是一种CSS 架构方法,旨在通过使用单一的、独立的类来构建样式,从而提供可重用且高度可组合的样式规则。

例如,使用以下 CSS 创建一个 bg-blue 类:

.bg-blue {
  background-color: rgb(81, 191, 255);
}

如果将此类添加到

标签中,它将获得蓝色背景,颜色如上面代码rgb(81, 191, 255)所示。

HTML 如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div><h1 class="bg-blue">Hello world!</h1></div>
  </body>
</html>

效果如下:1.webp.jpg我们可以编写这种单一用途的 CSS 规则并将它们全部保存在全局 CSS 文件中。这样就可以在任何地方使用这些单一用途的实用程序类。只需要在 HTML 中来使用这些全局 CSS 文件即可,还可以在单个 HTML 标签中使用这些类的组合。

来看另一个例子,有以下规则的 CSS:

.bg-blue {
  background-color: rgb(81, 191, 255);
}
.bg-green {
  background-color: rgb(81, 255, 90);
}
.text-underline {
  text-decoration: underline;
}
.text-center {
  text-align: center;
}
.font-weight-400 {
  font-weight: 400;
}

然后在 HTML 文件中使用它,如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div><h1 class="bg-blue">Hello world 1</h1></div>
    <div><h1 class="text-underline">Hello world 2</h1></div>
    <div class="text-center">
      <h1 class="bg-green font-weight-400 text-underline">Hello world 3</h1>
    </div>
  </body>
</html>

效果如下:3.webp.jpg可以看到:

  • **组合多个实用程序类:**第 14 行中组合了多个类,即bg-greenfont-weight-400text-underline。这些样式在 Hello world 3 文本中都生效了。
  • **实用程序类的可重用性:**第 12 行和第 14 行中多次使用了 text-underline 类。

当然,如果想遵循这种原子 CSS 架构,就需要创建多个单一用途的实用程序类。这就是 Tailwind CSS 的用武之地。原子 CSS 的概念并不新鲜,但 Tailwind CSS 将其提升到了另一个水平。


Tailwind CSS 是什么?


Tailwind CSS 是一个实用优先的 CSS 框架,旨在使用户能够更快、更轻松地创建应用。可以使用实用程序类来控制布局、颜色、间距、排版、阴影等,以创建完全自定义的组件设计,Tailwind CSS 在 Github 上有 70.6k Star,并且 npm 周安装量达到了 636w+。1.webp (1).jpg一开始对 Tailwind CSS 的印象并不太好,而更喜欢干净的 HTML 干净以及语义化的类名,后者在前端关注点分离中发挥着重要作用。使用 Tailwind 和这么多的类很奇怪,让我想起了内联样式。不过,随着时代的变化,HTML、CSS 和 JavaScript 之间的联系也在变化。这开启了改变类在项目中的角色的可能性,并且实用程序优先的方法非常适合现代的、基于 JavaScript 的时代。

Tailwind 是一个 CSS 框架,但它并不是新的 Bootstrap。Bootstrap 等传统 CSS 框架为用户提供了许多预定义的功能,如组件和布局系统。而 Tailwind 并非如此,因为它不附带预定义组件。两者的目标都是让开发更轻松,但实现方式有所不同:**传统框架试图避免CSS 及其复杂性,而 Tailwind CSS 希望改变编写 CSS 的方式。**因此,与其他 CSS 框架相比,它提供了更大的灵活性和控制力。

Tailwind CSS 有很多优势:

  • 编写的自定义 CSS 更少:使用 Tailwind,可以通过直接在HTML中应用预先存在的类来设置元素的样式。通过以这种方式使用实用程序类,可以构建自定义设计而无需编写 CSS。
  • **可以保持 CSS 文件较小:**如果没有像 Tailwind 这样的框架,就必须在添加新功能和组件时继续编写 CSS。这样 CSS 文件不断增长并变得越来越大。通过使用 Tailwind 的等实用程序,大多数样式都是可重用的,因此很少需要编写新的 CSS。
  • 不必定义类名:使用 Tailwind 时,可以从预定义的设计系统中选择类。这意味着无需为某些样式和组件选择“完美”的类名而烦恼,也无需记住像 sidebar-inner-wrapper 这样复杂的类名。
  • **可以做出更安全的更改:**使用传统方法,如果对 CSS 进行更改,则可能会破坏网站上的某些内容。不同于 CSS,在HTML中使用的实用类是局部的。这意味着可以更改它们而不必担心影响站点上其他部分的功能。


Tailwind CSS 核心理念


学习如何使用 Tailwind CSS 最重要的部分实际上是使用它的类,理解实用程序优先的方法。

假设想要设计一个简单的按钮样式:

html

复制代码

<buttonclass="btn"> 按钮 button>

传统的方法如下所示:

.btn {
  display: inline-block;
  border: 1px solid #34D399;
  background-color: transparent;
  border-radius: 0.375rem;
  padding: 0.5rem 1.5rem;
  color: #34D399;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 300ms, color 300ms;
}
.btn:hover {
  background-color: #34D399;
  color: #FFF;
}

使用 Tailwind CSS,无需编写一行 CSS 即可重新创建此按钮,而是使用一堆低级实用程序类:

html

复制代码

<buttonclass="inline-block border border-green-400 bg-transparent rounded-md py-2 px-6 text-green-400 leading-none cursor-pointer hover:bg-green-400 hover:text-white transition-colors duration-300">  Examplebutton>

可以看到,这里使用了很多类来为之前相同的按钮样式设置样式,但每个类只管理一个或几个经常一起使用的CSS属性。这些类的命名描述了它们的功能:inline-block将CSS的display属性设置为display: inline-block;bg-transparentbackground-color属性设置为background-color: transparent;,而cursor-pointer则将cursor属性设置为cursor: pointer;

有些类看起来不太直观,比如py-2用于管理垂直内边距,而px-6用于管理水平内边距。还有一些类同时设置多个属性,比如transition-colors

.transition-colors {
  transition-property: background-color,border-color,color,fill,stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: 150ms;
}

尽管有些类不太容易理解,但基本概念始终是相同的。除了基础知识、自定义和插件外,官方文档的所有章节都致力于解释Tailwind生成的类的名称和默认值,几乎涵盖了每个常用的CSS属性,甚至一些不太常见的属性。


Tailwind CSS 特性


响应式设计

Tailwind CSS默认支持响应式设计,这意味着它生成的每个类都有对应的变体,只在特定的媒体查询匹配时才应用。默认情况下,Tailwind是以移动设备优先的方式进行设计的:它的所有媒体查询都是基于**min-width**的类型。每个类都会根据每个断点生成一个对应的变体,例如,可以使用sm断点来表示640px。因此,如果想要在屏幕宽度达到640px及以上时应用text-white类,可以写作sm:text-white。 还可以结合响应式和状态变体,例如使用sm:hover:text-white表示在屏幕宽度达到640px及以上且处于 hover 状态时应用text-white类。

函数和指令

通过使用指令和函数,可以更灵活地定制和扩展你的CSS样式,并结合Tailwind的强大功能实现更高效的开发。

指令

Tailwind 指令是用于执行各种操作的特殊声明,比如使用@variants指令生成一些类的变体,或者使用带有 @screen 指令的 Tailwind 媒体查询。对于@apply指令需要特别注意,这个指令允许在自定义样式中使用 Tailwind的 实用类:

css

复制代码

.custom-button {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;}

这里使用@apply指令将Tailwind的实用类应用到.custom-button类上,以快速设置背景颜色、文字颜色、字体加粗、内边距和圆角等样式。

函数

Tailwind还提供了一些函数,用于在CSS中动态生成样式。例如,可以使用theme函数来获取配置文件中的颜色值:

css

复制代码

.btn-primary {
  background-color: theme('colors.blue.500');}

这里使用theme函数来获取配置文件中blue.500定义的颜色,并将其作为背景颜色应用到.btn-primary类。

定制化

默认的 Tailwind CSS 设置非常适合非常通用的用例,但如果项目需要,也可以根据需要调整和自定义实用程序类。 Tailwind 项目中通常有两个配置文件:框架内部使用的一个,以及可以在项目根目录下创建的 tailwind.config.js 文件。 每次构建项目时,在生成所有实用程序类之前,Tailwind 都会查找自定义配置文件,找到后它会尝试将其与内部配置合并,作为未指定的参数的后备。 因此,自定义配置文件可以指定仅生成几个类的设置,但如果没有指定任何相关内容,则所有 Tailwind 默认类都将继续工作。

文件结构

每个 Tailwind CSS 配置文件至少有以下参数:

module.exports = {
  purge: [],
  presets: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {},
    colors: {},
    spacing: {},
  },
  variantOrder: [
    'first',
    'last',
    'odd',
  ],
  variants: {
    accessibility: ['responsive', 'focus-within', 'focus'],
    alignContent: ['responsive'],
    alignItems: ['responsive'],   /* etc. */
  },
  plugins: [],
}

某些设置(例如presets)与实用程序类自定义无关。 darkMode 参数为类启用暗模式变体,插件允许使用更多功能和实用程序类(例如 Tailwind Typography)来扩展 Tailwind,这对于 Markdown 生成的内容样式非常有用。还有更多设置,官方文档有详细描述,但最重要的是themevariantspurge

theme

在 theme 中能够自定义调色板、响应能力和容器设置、间距实用程序甚至占位符不透明度实用程序。最常见的更改实用程序是断点、调色板和间距。

自定义断点

项目的断点在screens对象中进行管理:

module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
}

默认情况下,Tailwind 不仅生成实用程序的普通版本,例如 text-white,而且还为screens对象内指定的每个断点生成响应变体:sm:text-whitemd:text-whitexl:text-white。这里可以包含更多或更少的断点,并且screens对象支持各种程度的自定义,例如,使用桌面优先最大宽度媒体查询,或使用最小和最大宽度的范围媒体查询。

自定义调色板

调色板在颜色colors内部进行管理:

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      teal: {
        50: '#f0fdfa',
        100: '#ccfbf1',
        200: '#99f6e4',
      },
      emerald: {
        50: '#ecfdf5',
        100: '#d1fae5',
        200: '#a7f3d0',
      },
    },
  },
}

当提供字符串参数时,Tailwind 将为该颜色生成所有与颜色相关的实用程序,例如 bg-transparentborder-transparent 等。当提供对象时,实用程序将像 bg-teal-50text-emerald-200 中那样“嵌套”。还可以在对象内提供特殊的 DEFAULT 值,Tailwind 将生成该颜色的“非嵌套”版本:

module.exports = {
  theme: {
    colors: {
      emerald: {
        DEFAULT: '#059669', // Generates bg-emerald, text-emerald, border-emerald...
        50: '#ecfdf5',
        100: '#d1fae5',
        200: '#a7f3d0',
      },
    },
  },
}

这样的嵌套逻辑适用于 Tailwind 支持的几乎所有实用程序。注意,一切都是基于对象的:这就是为什么在使用 theme() 函数从自定义 CSS 访问嵌套实用程序时必须使用点表示法。

自定义间距

Tailwind 配置中的间距对象本身不会生成任何实用程序。它是许多实际实用程序默认继承的设置对象,正如在默认配置中看到的那样:

module.exports = {
  theme: {
    margin: (theme, { negative }) => ({
      auto: 'auto',
      ...theme('spacing'),
      ...negative(theme('spacing')),
    }),
    padding: (theme) => theme('spacing'),
    width: (theme) => ({
      auto: 'auto',
      ...theme('spacing'),
      '1/2': '50%',
      /* ...and so on */
    }),
  },
}

它的使用非常简单,只需根据需要修改键/值对,所有与间距相关的实用程序(例如 paddingmargin)将默认继承这些值。

module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0px',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      /* ...and so on */
    },
  },
}

覆盖或扩展

自定义主题时,可以为自定义的每个实用程序扩展或覆盖 Tailwind 的默认值。默认情况下,当在theme对象内设置实用程序时,将覆盖默认值。 以过渡持续时间为例。 在默认配置文件中,其值为:

module.exports = {
  theme: {
    transitionDuration: {
      DEFAULT: '150ms',
      75: '75ms',
      100: '100ms',
      150: '150ms',
      200: '200ms',
      300: '300ms',
      500: '500ms',
      700: '700ms',
      1000: '1000ms',
    },
  },
}

这将使用诸如duration-300之类的类来声明300ms的过渡持续时间。 如果在自定义 tailwind.config.js 文件中声明:

module.exports = {
  theme: {
    transitionDuration: {
      2000: '2000ms',
    },
  },
}

Tailwind会生成一个名为duration-2000的类,将过渡时长设置为2000毫秒。但是,将失去其他类,如duration-300或用于过渡时长为150毫秒的默认类。实际上,这种方法可能更好,因为这样 Tailwind CSS 只会生成实际使用的类,这在开发模式下可以提高性能。

如果在上面的示例中,默认值已经满足需求,可以进行扩展。想扩展的每个工具都必须放在特殊的extend对象内。下面通过扩展默认工具来添加一个2000毫秒的过渡时长,而不是替换它们:

module.exports = {
  theme: {
    extend: {
      transitionDuration: {
        2000: '2000ms',
      },
    }
  },
}

这样就可以使用duration-2000类,而不会丢失duration-300和所有其他默认实用程序。


变体


可以为每个实用程序生成许多变体:hovervisitedfocuscheckedactiveoddeven等,为每个工具生成所有可能的变体会导致生成成千上万个无用的类,构建过程缓慢,开发模式下生成巨大的CSS文件,并且需要清理许多无用的样式以进行生产。因此,默认情况下,只有响应式变体是始终启用的,而其他所有变体只有在你期望找到它们的地方才会被默认激活(例如,backgroundColor工具的hover变体)。

变体对象中的每个属性都必须有一个实用程序名称作为键,并以一组启用的变体作为值:

module.exports = {
  variants: {
    accessibility: ['responsive', 'focus-within', 'focus'],
    alignContent: ['responsive'],
    alignItems: ['responsive'],
  },
}

theme 一样,在自定义变体时,可以覆盖或扩展实用程序的设置:

module.exports = {
  variants: {
    // 除了默认值之外,还将生成“active”变体
    extend: {
      backgroundColor: ['active']
    }
  },
}

指定变体的顺序很重要。变体是由数组定义的,它们在数组中的顺序决定了相对类在最终样式表中的位置。这很重要,因为一个元素可以同时处于活动和焦点状态下:优先使用的类别不是由在HTML元素中输入它们的顺序决定的,而是由这些类在最终CSS中的顺序决定的。

当覆盖变体时,对于给定的工具,可以完全控制数组,但在扩展它们时则不能。通过扩展添加的变体会被Tailwind自动排序,遵循一个内部顺序,可以使用variantOrder参数自定义该顺序。


70k Star 的 Tailwind CSS 为何这么火?(下)https://developer.aliyun.com/article/1411599

相关文章
|
前端开发 JavaScript
Tailwind CSS:基础使用/vue3+ts+Tailwind
Tailwind CSS:基础使用/vue3+ts+Tailwind
253 0
|
资源调度 前端开发 JavaScript
Tailwind CSS那些事儿
Tailwind CSS那些事儿
813 1
|
7月前
|
资源调度 前端开发 JavaScript
Tailwind CSS如何在vue项目中使用
Tailwind CSS如何在vue项目中使用
226 8
|
7月前
|
前端开发 JavaScript API
Tailwind CSS:快速打造美观网页的秘密武器
Tailwind CSS:快速打造美观网页的秘密武器
|
7月前
|
前端开发 UED 开发者
【第19期】一文用Tailwind CSS写自己的网站
【第19期】一文用Tailwind CSS写自己的网站
173 0
|
7月前
|
前端开发 JavaScript IDE
70k Star 的 Tailwind CSS 为何这么火?(下)
70k Star 的 Tailwind CSS 为何这么火?
182 0
|
7月前
|
前端开发 小程序
【CSS当红框架】你必须得认识 Tailwind CSS 框架
【CSS当红框架】你必须得认识 Tailwind CSS 框架
60 0
|
前端开发 JavaScript 程序员
Tailwind 生成的 CSS文件竟然有 3.7 Mb 这么巨大!这还能用?
Tailwind 是最近国外大火的 Utility CSS 框架,形态上有点类似以前的 Bootstrap,潮流是一种轮回。 用它来写一个卡片,大概是这样的体验,只用到了工具 class,而不用写任何额外的样式:
|
前端开发 JavaScript
Vue3配置Tailwind CSS
Tailwind CSS Tailwind是由Adam Wathan领导的TailwindLabs开发的 CSS 框架。