Tailwind CSS

Tailwind CSS是一个高度可定制的实用类优先 CSS 框架，专为快速构建现代用户界面而设计。通过直接在 HTML 中应用预定义的实用类，开发者可以快速设置样式，而无需编写大量自定义 CSS。组合这些类可以灵活地创建复杂的设计，使开发过程更高效，维护也更加简便。

Tailwind CSS是由Adam Wathan和Jonathan Reinink于2017年创立的。它起初是作为一个实验性项目开始的，目的是探讨一种新的、实用类优先的CSS方法。这种方法强调使用预先定义的实用类直接在HTML中设置样式，而不是编写传统的CSS代码。随着时间的推移，这个项目逐渐发展壮大，形成了现在的Tailwind CSS框架。

在Tailwind CSS的早期版本中，它主要关注创建响应式布局，提供了一组实用类用于快速构建响应式网站。随着项目的发展，Tailwind CSS不断扩展，添加了更多的实用类和功能，例如定制性、插件支持和与现代构建工具的集成。自推出以来，Tailwind CSS获得了广泛的关注和支持，迅速成为了一种受欢迎的CSS框架。开发者社区也逐渐壮大，为框架的发展提供了持续的动力。

实用类优先方法。Tailwind CSS提倡实用类优先的方法，这意味着您将使用预定义的实用类直接在HTML标记中应用样式。这种方法鼓励组合性，避免过度定制，这可能导致臃肿且难以维护的CSS。
响应式设计。Tailwind CSS内置了响应式设计支持，允许为不同屏幕尺寸定义不同的样式。通过使用响应式变体，如sm、md、lg和xl，可以轻松应用仅在特定断点生效的样式。
定制性。Tailwind CSS设计为高度可定制化，可以根据项目需求修改默认配置，例如颜色、字体、间距、断点等，还可以通过添加自定义的实用类或使用插件来扩展框架。
集成PurgeCSS。为了使最终的CSS文件保持小巧和优化，Tailwind CSS集成了PurgeCSS，这是一个从生产构建中删除未使用CSS的工具。这样，只需包含在项目中实际使用的实用类，从而使CSS文件更小、加载时间更快。
活跃的社区。Tailwind CSS拥有一个活跃的开发者社区，这意味着可以在线找到丰富的资源、教程和支持，社区还为Tailwind CSS的插件和工具的开发做出了贡献。
日益增长的采用率。Tailwind CSS在开发者和公司中越来越受欢迎，许多项目已经开始采用它，取代了旧的CSS框架或方法。其实用类优先的方法和易于定制的特性使其成为现代Web开发的首选。

基本使用

yarn add tailwindcss -D

生成配置文件：

npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

引入基本样式：

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

base: 这个指定表示导入TailwindCSS 的基本样式，里面会包含一些预设样式，主要目的是重置浏览器的样式，重置了浏览器样式之后，可以保证所有的浏览器中的外观是一致的。
components：组件样式，默认情况下没有任何的组件样式，可以在配置文件里面自定义组件样式，以及使用第三方插件添加一些组件样式，这一条指令是为了让自定义组件样式以及其他第三方组件样式能够生效。
utilities：这个指令就是导入实用的原子类。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <!-- 使用实用类 -->
    <div class="flex items-center justify-center">
      <button>Click Me</button>
    </div>
</body>
</html>

样式扩展

扩展现有主题

自定义样式类，可在配置文件中theme下面的extend进行配置：

module.exports = {
  theme: {
    extend: {
      backgroundColors: {
        // bg-custom-gray
        "custom-gray":"#333"
      },
      height: {
        // h-40
        40: '40px'
      },
    },
  },
}

自定义样式的优先级高于内置样式类的优先级。

添加新主题

module.exports = {
  theme: {
    boxShadow: {
      'custom': '0 4px 6px rgba(0, 0, 0, 0.1)',
    },
    extend: {
      // Your other configurations go here
    },
  }
};

在这种情况下将完全替换默认预设，而不仅仅是扩展它们，谨慎使用此方法，因为它会删除所有其他预定义的相关预设。

配置动画

动画需要在配置文件中配置，分为两个方面：keyframes和animation：

module.exports = {
  theme: {
    extend: {
      keyframes: {
        slide: {
          "0%": {
            transform: "translateX(0)",
            filter: "brightness(1)",
          },
          "100%": {
            transform: "translateX(236px)",
            filter: "brightness(1.45)",
          },
        },
      },
      animation: {
        slide:"slide 1.5s ease-in-out infinite alternate",
      }
    },
  }
};

自定义插件

Tailwind CSS中是允许开发者自定义插件，可实现某一个具体的功能。

插件的本质就是一个函数，创建自定义插件非常简单，只需要在配置文件中配置plugins配置项，该配置项对应的是一个数组，数组的每一项就是一个插件。

module.exports = {
  plugins: [
    // addUtilities 方法将这些样式类添加到项目中
    function ({ addUtilities }) {
      const newUtilities = {
        '.bg-skew-12': {
          transform: 'skewY(-12deg)',
        },
        '.bg-skew-6': {
          transform: 'skewY(-6deg)',
        },
        '.bg-skew-0': {
          transform: 'skewY(0deg)',
        },
        '.bg-skew-6-reverse': {
          transform: 'skewY(6deg)',
        },
        '.bg-skew-12-reverse': {
          transform: 'skewY(12deg)',
        },
      };
      addUtilities(newUtilities);
    },
  ],
};

Tailwind CSS也有一些社区的插件，只需安装并引入即可：

yarn add @tailwindcss/typography -D

module.exports = {
  plugins: [
    require('@tailwindcss/typography')
  ]
}

Tailwind CSS官方插件。
Awesome Tailwind CSS。

组件

在使用Tailwind CSS时，会发现很多时候一些标签所应用的原子类是一样的

<div class="float-left text-center flex items-center bg-blue-100 block"></div>
<div class="float-left text-center flex items-center bg-blue-100 block"></div>
<div class="float-left text-center flex items-center bg-blue-100 block"></div>
<div class="float-left text-center flex items-center bg-blue-100 block"></div>
<div class="float-left text-center flex items-center bg-blue-100 block"></div>

这种情况下可将涉及的原子类封装为一个组件。

要封装一个组件可以使用@apply指令，该指令后面可跟上一组原子类，然后给这个指令取一个名字即可：

.item {
  @apply float-right text-center flex items-center bg-blue-100 block
}

/**
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
 */

响应式设计

Tailwind CSS默认提供了一组预设的断点，即屏幕尺寸范围，用于管理响应式样式。默认的断点包括：

sm: 640px及以上。
md: 768px及以上。
lg: 1024px及以上。
xl: 1280px及以上。
2xl: 1536px及以上。

<img class="w-16 md:w-32 lg:w-48" src="...">

开发者还可以根据需要在tailwind.config.js文件中自定义断点：

module.exports = {
  theme: {
    // 完全覆盖默认断点
    screens: {
      'xs': '480px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },

    // 如果你只是想新增一两个断点，那么还是建议在 extend 里面进行扩展
    extend: {
      screens: {
        'xs': '480px',
      }
    }
  }
};

<div class="w-full xs:w-1/2"></div>

夜间模式

在Tailwind CSS中，要开启夜间模式非常简单，只需要使用dark:变体即可，dark:后面跟上原子类，表示夜间模式下面需要应用的原子类。

<body class="bg-gray-100 dark:bg-gray-900"></body>

跟随系统

在配置文件中将darkMode配置项配置为media即可：

module.exports = {
  darkMode: 'media',
}

手动切换

将配置文件中的darkMode配置为class：

module.exports = {
  darkMode: 'class',
}

通过切换html根元素的dark样式类来达到切换夜间模式的效果。

生产构建优化

Tailwind CSS中包含了大量的原子类，但是在实际开发中，并不是说所有的原子类都会用到，因此在最终构建CSSS的时候应该将没有使用到的原子类移除，从而优化构建产物。

Tree shaking

Tailwind CSS内置了PurgeCSS，可用于Tree shaking优化，如果要保留某个原子类，可通过safelist来做配置：

module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
    // ...
  ],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
}

限制变体

变体和原子类之间是可以产生数量非常巨大的组合，早期版本中需要手动限制变体的生成，但目前Tailwind CSS变体默认按需生成，无需手动配置。

PostCSS后处理

Tailwind CSS是基于PostCSS进行构建的，因此可以和其他的PostCSS插件一起使用，进一步的优化生成构建。

// postcss.config.js
const tailwindcss = require("tailwindcss");
const cssnano = require("cssnano");

module.exports = {
  plugins: [
    tailwindcss,
    cssnano({
      preset: "default",
    }),
  ].filter(Boolean),
};

总结

Tailwind CSS 的大流行和现代前端的开发模式有很大的关系。如果把时间拨回到现代前端框架出现之前，那个时候流行的还是多页应用，书写的也是原生CSS，如果在那个时候出现Tailwind CSS或者和Tailwind CSS类似的技术，意义其实不大，因为开发者并不能从Tailwind CSS里面感受到多大的便利，反而还增加了学习成本，因为里面有大量的新的样式类。

但是如果把时间快进到现在，现在的前端开发发生了巨大的变化，现在流行的是组件化开发以及数据驱动视图。

相比一个整体的页面，一个组件的HTML和CSS的量减少了很多，因此相比原生的CSS，Tailwind CSS这种开发方式，哪怕不说是多优秀，但是至少是打个平手。

在现代前端框架里面，都是使用状态来驱动视图，期望使用状态来控制视图里面的一切，而Tailwind CSS提供了一堆的原子类，那么在组件里面要控制具体的某一条样式就非常的得心应手了，能够达到一个非常细粒度的控制。

v4.0 更新

TailwindCSS v4.0 更新说明。

Installing

v4.0 进行了安装上的简化：

v3安装步骤。
v4安装步骤。

v4.0 特点：

不再需要 @tailwind 指令，导入 tailwindcss 即可开始构建。
无需配置任何内容即可开始使用框架，甚至无需模板文件的路径。
提供了开箱即用 @import 规则，并在后台使用 Lightning CSS 进行供应商前缀和现代语法转换。
不再与框架进行绑定，而是作为一个独立的三方库。
采用全新的高性能引擎。
去 JS 化配置，可基于 CSS 进行配置。

CSS优先配置

v4.0 中最大的变化之一是从 JavaScript 中配置项目转变为在 CSS 中配置项目。

@theme 所有这些值都将作为常规自定义属性添加 CSS 中，可以轻松地将这些值作为内联样式重复使用，与原生 CSS 结合更容易。

Oxide

Tailwind CSS 4.0 的最大亮点之一是其全新的高性能引擎 Oxide，该引擎从零开始重构，以提升构建速度。

根据基准测试：

新的全量构建速度提升超过 3.5 倍。
增量构建速度提升超过 8 倍。
增量构建时无新 CSS 的情况下速度更是提高了 182 倍。

这一改变极大缩短了开发时间，提高了工作效率，尤其适合需要频繁迭代和修改设计的项目。

Oxide 旨在统一工具链、提高性能和简化配置。构建方面，底层使用基于 Rust 的 CSS 转换工具 Lightning CSS。

内置 @import 处理。
CSS 优先配置。
构建性能提升。
更好的支持现代 CSS 功能。

Dark Mode

v4.0 在配置深色模式上有所改变：

v4.0
v3.0

// 1. @custom-variant dark (&:where(.dark, .dark *));
// 2. dark:bg-black伪类
// 3. class="dark"

// style.css
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

// html
<html class='dark'>
  <div class='dark:bg-black dark:text-white'>
      hello world
  </div>
</html>

// 1. tailwind.config.js -> darkMode: 'class'
// 2. dark:bg-black
// 3. class="dark"

// tailwind.config.js
export default {
  darkMode: 'class',
}

// html
<html class='dark'>
  <div class='dark:bg-black dark:text-white'>
      hello world
  </div>
</html>

P3 调色板

P3 是 Apple 推出的一种较新的颜色配置文件。它基于相同的 RGB 颜色模型，但提供比 sRGB 更宽的色域。色域是指设备可以再现的颜色范围。P3 色域比 sRGB 大约 25%，可实现更生动、更准确的颜色表示。

调色板从 rgb 升级到 oklch，利用更宽的色域使颜色在以前受 sRGB 色彩空间限制的地方更加鲜艳。oklch() 是定义 CSS 颜色的一种新方法，L 是感知亮度，C 是色度，H 是色相角度。

更好的通过公式，生成统一颜色变化。
感知亮度均匀。
着色纯度对亮度的(影响亥姆霍兹-科尔劳施效应)。
尽可能修复了色相偏移(阿布尼效应)。
支持为更广的色域提供编码支持(P3、Rec.2020及更高版本)。
在线颜色选择器。

容器查询

容器查询可以实时匹配指定为容器元素的尺寸，开发者可以基于不同的尺寸范围，对内部的元素进行特定的样式设置与布局实现。

v3.0 版本需要通过 @tailwindcss/container-queries 插件才能启用，而 v4.0 版本内置了此功能：

<div class="@container resize overflow-auto">
  Hello World
</div>

3D 变换

v4.0 版本添加了用于执行 3D 转换的 API，如：

rotate-x-*
rotate-y-*
scale-z-*
translate-z-*

渐变

v4.0 版本支持设置旋转角度的渐变方式、圆锥渐变和径向渐变。

not-*

v4.0 新增了 not-* 变体，添加了对 CSS :not() 伪类的支持。

弃用与替换

Deprecated	Replacement
`bg-opacity-*`	Use opacity modifiers like `bg-black/50`
`text-opacity-*`	Use opacity modifiers like `text-black/50`
`border-opacity-*`	Use opacity modifiers like `border-black/50`
`divide-opacity-*`	Use opacity modifiers like `divide-black/50`
`ring-opacity-*`	Use opacity modifiers like `ring-black/50`
`placeholder-opacity-*`	Use opacity modifiers like `placeholder-black/50`
`flex-shrink-*`	`shrink-*`
`flex-grow-*`	`grow-*`
`overflow-ellipsis`	`text-ellipsis`
`decoration-slice`	`box-decoration-slice`
`decoration-clone`	`box-decoration-clone`

UnoCSS

UnoCSS 是由 Vite 团队成员所推出的原子类 CSS 库，相比 Tailwind CSS 有以下特点：

按需生成。
极具灵活性。UnoCSS 的定位是一个 CSS 引擎而非一个框架。
简化类名属性。

tailwindcss
unocss

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">Click</button>

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Click
</button>

支持预设。

import UnocssPlugin from '@unocss/vite'

import PresetTachyons from '@unocss/preset-tachyons'
import PresetBootstrap from '@unocss/preset-bootstrap'
import PresetTailwind from '@unocss/preset-tailwind'
import PresetWindi from '@unocss/preset-windi'
import PresetAntfu from '@antfu/oh-my-cool-unocss-preset'

export default {
 plugins: [
   UnocssPlugin({
     presets: [
       // PresetTachyons,
       PresetBootstrap,
       // PresetTailwind,
       // PresetWindi,
       // PresetAntfu
       // 选择其中一个...或多个！
     ]
   })
 ]
}

Tailwind CSS​

基本使用​

样式扩展​

扩展现有主题​

添加新主题​

配置动画​

自定义插件​

组件​

响应式设计​

夜间模式​

跟随系统​

手动切换​

生产构建优化​

Tree shaking​

限制变体​

PostCSS后处理​

总结​

v4.0 更新​

Installing​

CSS优先配置​

Oxide​

Dark Mode​

P3 调色板​

容器查询​

3D 变换​

渐变​

not-*​

弃用与替换​

UnoCSS​