Tailwind CSS核心功能介绍以及高级用法

Tailwind CSS 是一个用于构建 Web 项目的 CSS 框架，它提供了一系列预定义的原子CSS类，可以帮助开发人员快速构建 Web 界面，并且可以通过自定义主题和扩展来满足不同的需求。一个用 Tailwind 编写的 HTML 代码一般长这样。

<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512" />

可以看出，Tailwind提供了各种 CSS 工具集，方便我们快速编写样式，每个工具类都是语义化，方便我们快速上手，如果你想尝试下自己体验下编写 Tailwind ，可以进入 Tailwind Play 在线体验下。

为什么不直接用内联样式？

通常刚接触的时候，可能会觉得 Tailwind 写一大堆 class 跟一坨💩一样，还不如直接用 style 来编写，然而以下情况，内联样式是无法做到的。

设计约束

使用内联样式，每个值都是一个特殊的值，而使用原子样式，我们可以从一些预设的类中选择，这使得构建一致性UI更容易。

以下是内联样式和原子CSS的代码区别：

<button style="background-color: #3490dc; color: white; padding: 12px 24px;">Button</button>
<button class="bg-blue-500 text-white px-6 py-3">Button</button>

可以看出，用原子CSS代码风格更统一。

响应式设计

使用内联样式无法实现响应式布局，需要单独在外部编码实现，而 Tailwind 可以简单做到这点。

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

鼠标悬停、焦点和其他状态

内联样式不能针对悬停、焦点等状态进行样式设置，但使用 Tailwind CSS 的状态变体可以轻松地使用实用程序类为这些状态设置样式。

<button class="bg-blue-500 hover:bg-blue-400 text-white px-6 py-3">Button</button>
<!-- 主题 -->
<div class="bg-white dark:bg-slate-800></div>

说了一堆废话，接下里直接进入主题，Tailwind 除了基本的一些内置样式外，还提供了很多额外的功能，例如自定义主题，插件，变体等等。

主题（Theme）

Tailwind CSS允许我们定制全局主题，例如颜色，字体，间距，透明度等等。只需要在 tailwind.config.js 配置，下面是一个完整的示例：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#ff7f50', // 自定义颜色名称 "primary"
        secondary: '#6495ed',
        blue: {
          lighter: '#b3e5fc', // 修改默认蓝色调 "blue"
          default: '#2196f3',
          darker: '#0d47a1',
        },
      },
      fontFamily: {
        sans: ['Roboto', 'sans-serif'], // 添加一个自定义字体族 "sans"
        display: ['Playfair Display', 'serif'],
      },
      spacing: {
        '8xl': '72rem', // 添加一个新的间距大小 "8xl"
      },
      animation: {
        fadeInUpBig: 'fadeInUpBig 1s ease both', // 添加一个自定义动画 "fadeInUpBig"
      },
    },
  },
}

变体（Variants）

除了一些基本样式之外，我们需要给元素添加状态，例如 hover，focus，active，响应式，暗黑模式等功能，这时候 variants 就可以派上用场了。Tailwind 也内置了一些 variants，例如：

<p class="bg-gray-200 hover:bg-red-500 text-black">kelen.cc</p>

这段代码的 hover:bg-red-500 可以实现鼠标悬浮背景色变红。

如果内置的 variants 不满足需求，可以通过 plugin 自定义变体，例如新增一个 !important 变体。

module.exports = {
  plugins: [
    function importantPlugin({ addVariant, e }) {
      addVariant('important', ({ container }) => {
        container.walkRules(rule => {
          rule.selector = `.\\!${e(rule.selector.slice(1))}`
          rule.walkDecls(decl => {
            decl.important = true
          })
        })
      })
    },
  ]
}

然后在 vartains 配置项可以使用自定义的 important。

module.exports = {
  variants: {
    extend: {
      backgroundColor: ['important'],
      textColor: ['important'],
    },
  },
}

这样使用即可：

<div class="!bg-red-500 !text-white">This has important styles!</div>

推荐一款工具：Tailwind Variants，方便我们自己扩展了更多丰富的 variants，功能更加强大。

插件（Plugin）

Tailwind 提供了自定义插件来扩展默认的样式或者添加全新的实用类。在原子类不满足的情况下，我们可以自定义自己的原子类，例如创建一个 .bg-striptes ，来实现背景条纹。

// tailwind-plugins/bg-stripes.js
module.exports = function ({ addUtilities, e }) {
  const newUtilities = {
    [`.${e('bg-stripes')}`]: {
      backgroundImage: 'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)',
      backgroundSize: '10px 10px',
    },
  }

  addUtilities(newUtilities)
}

在 tailwind.config.js 引入该插件。

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('./tailwind-plugins/bg-stripes'),
  ],
}

<div class="bg-gray-200 bg-stripes"></div>

插件参数

上述例子看到，插件暴露除了 addUtilities，e 函数之外，还暴露了其他的变量和函数，含义分别如下：

• addBase: 添加新的基础样式，这些样式将应用于所有元素。
• addComponents: 添加新的可复用组件样式，如按钮、卡片、表单元素等。
• addVariant: 添加新的变异（variant）或者修改现有变异的行为。变异是 Tailwind CSS 中的一种功能，用于在不同的状态或条件（如 hover、focus、active、responsive 等）下应用不同的样式。
• e: 这是一个 helper 函数，全称为 escapeClassName。在创建类名时，使用这个函数可以确保生成的类名是安全的，不会与 Tailwind CSS 的其他类名冲突。例如，如果你想要创建一个名为 myUtility 的实用类，你应该使用 e('myUtility')，这将确保类名被正确地转义和命名。
• theme: 提供对当前主题配置的访问和修改。
• variants: 提供对当前变异配置的访问和修改。
• corePlugins: 提供对核心插件启用/禁用状态的访问和修改。
• config: 提供对完整 Tailwind CSS 配置对象的访问。

如果你自己不会写插件，这里整理了一些比较有用的插件，你可以尝试使用他们。

• 💙🧩 Typography - Adds a prose class for beautiful typographic defaults.
• 💙💼 Container queries - Provides utilities for container queries.
• 💙 Forms - Adds better default styles to form elements.
• 🎨🧬 Theme Variants - Adds theme variants based on media queries and/or CSS selectors.
• 🎨🧬 Theme Swapper - Theming using CSS variables, with media queries support.
• 🎨🧬 Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
• 🎨🧩 Tailwind Elements - Extends Tailwind CSS with 500+ interactive components (datepickers, modals, forms, tables, darkmode).
• 🎨🧩 CSS Variables - Exports custom CSS variables.
• 🎨💼 Accent - Adds accent colors for more dynamic and flexible color utilization.
• 💼🧬 Radix - Adds utilities and variants for styling Radix UI state.
• 💼 Image Rendering - Adds image-rendering utilities.
• 💼 Elevation - Adds Material UI elevation utilities.
• 💼 RFS - Adds RFS utilities.
• 💼 Bidirectional - Adds utilities for creating multilingual bidirectional layouts.
• 💼 Background SVG - Inject SVGs as background images with color variants.
• 💼 Background Unsplash - Apply unsplash.com images as background.
• 💼 Brand Colors - Adds various brand colors for background, border and text.
• 💼 Bootstrap Grid - Generates Bootstrap's style flexbox grid system.
• 💼 Leading Trim - Adds utilities to trim text whitespace, using Capsize.
• 💼 Scrollbar Hide - Adds scrollbar-hide class for visual hide scrollbar.
• 💼 Fluid Type - Adds fluid type (font-size) utilities.
• 💼 Grid Areas - Adds grid-areas and grid-area utilities.
• 💼 Full bleed background and borders - Provides utilities for extended backgrounds and borders.
• 💼 CSS Filter Order - Adds filter-order utilities for changing the order of filters in the generated CSS.
• 💼 Tailwind CSS 3D - Adds 3D transform utilities and animations.
• 💼 Claymorphism - Adds clay utilities for creating claymorphism style.
• 🧬 FormKit - Adds variants for input and form states for FormKit.
• 🧬 Htmx - Adds variants for styling on htmx events.
• 🧩 Debug screens - Adds a component that shows the currently active screen (responsive breakpoint).
• 🛑💼💙 Line Clamp - Provides utilities for visually truncating text after a fixed number of lines.
• 🛑🧩💙 Custom Forms - Adds better default styles to form elements.
• 🛑💙💼 Aspect Ratio - Adds composable aspect ratio utilities.