大项目之初识Tailwind CSS ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 6 天。在写大项

这是我参与「第五届青训营」伴学笔记创作活动的第 6 天
在写大项目的时候，要使用tailwind css，于便去学习了一下关于tailwind css的使用。

一、Tailwind CSS是什么？

Tailwind CSS 就是一个 CSS 框架，正如你所知道的 bootstrap，element ui，Antd，bulma。一样。将一些 css 样式封装好，用来加速我们开发的一个工具。

1.1 对比其他框架

对比上述所提到的框架来说，tailwindcss还是有区别的，上述框架大多是一种可复用性的组件，例如一个按钮、一个表单之类的常用的ui组件，但是tailwind css没有封装某个具体的组件，而是封装了大量css样式，这样在任何一个组件里都可以使用。虽然antd这样的组件库很方便，但是在你想要自定义一些样式时还是很不方便的。

二、使用

2.1 基础类

Tailwind 提供了多种默认基础类，如断点 bg 表示 background，这些基础类按照规则可以用横线 - 相连进行组合，构成特点的语义，例如 bg-black 表示背景色采用黑色，经过编译后生成相应的样式表，这样就可以将样式应用在 HTML 元素上。

2.2 重用样式

我们会在项目中发现，这样可能会出现一些基础类重复出现，这样无疑是我们不想看到的，但是我们也有解决办法，就是利用 @apply这个指令实现，具体实现代码如下

不使用这种方法的情况下

<!-- 原始的按钮元素 -->
<!-- 📄 index.html -->
<!-- Before extracting a custom class -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
  Save changes
</button>

使用之后，先看css部分

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

/* 应该指定这些自定义类应用到哪一个容器中 */
/* 由于先后顺序对于 CSS 的优先级很重要 */
/* 应用到 components 容器中，这样在 HTML 页面同时使用 btn-primary 和其他基础类，如 bg-sky-400 最终背景色还是以基础类 bg-sky-400 为准，由于 utilities 容器在更后的次序才添加到样式表中，它们的优先级更高 */
@layer components {
  /* 将基础类组合抽取出来 */
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

再看html部分

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

2.3 状态变量

在写样式时难免会遇到伪类选择器，伪元素选择器，媒体查询，特定元素专属特性等的使用，那么当我们遇见上述情况时，应该怎么办呢？

好消息是，Tailwind CSS提供了多种常见的状态变量

2.3.1具体使用

tailwind提供的所有状态变量可以去官网一看：官方文档

使用例子

<!-- 被选中时时，颜色变深 -->
<!-- 在暗夜模式开启且被选中，颜色会变更浅 -->
<button class="bg-teal-600 active:bg-teal-800 dark:active:bg-teal-200">ahhh...</button>

它们之间的层级顺序并无太大关系，但是也有特殊情况

示例：

在第一个例子中，dark元素需要是元素的父group元素，但在第二个例子中它是相反的。

/* dark:group-hover:opacity-100 */
.dark .group:hover .dark:group-hover:opacity-100 {
  opacity: 1;
}

/* group-hover:dark:opacity-100 */
.group:hover .dark .group-hover:dark:opacity-100 {
  opacity: 1;
}

在第一个示例中，当您将鼠标悬停在文章本身上时，每个标题都带有下划线，而在第二个示例中，当您将鼠标悬停在该标题上时，每个标题仅带有下划线。

/* prose-headings:hover:underline */
.prose-headings:hover:underline:hover :is(:where(h1, h2, h3, h4, th)) {
  text-decoration: underline;
}

/* hover:prose-headings:underline */
.hover:prose-headings:underline :is(:where(h1, h2, h3, h4, th)):hover {
  text-decoration: underline;
}

2.3.2 补充说明

所有基础类，包括自定义的基础类，都支持和状态变量配合使用

/* 📄 main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

<div class="lg:content-auto">
  <!-- ... -->
</div>

2.3.3 自定义状态变量

除了上面提到的内置的状态变量之外，tailwind还支持自定义状态变量

使用 plugins 模块在 Tailwind 的配置文件 tailwind.config.js 中定制 modifier，官网是这样说的

The first argument is the modifier name that users will use in their HTML, so the above example would make it possible to write classes like these:

// 📄 tailwind.config.js
// 导入插件模块
const plugin = require('tailwindcss/plugin');

module.exports = {
  // ...
  plugins: [
    plugin(function({ addVariant }) {
      addVariant('optional', '&:optional')
      addVariant('hocus', ['&:hover', '&:focus'])
      addVariant('inverted-colors', '@media (inverted-colors: inverted)')
    })
  ]
}

上面自定义的状态变量具体使用如下

<form class="flex inverted-colors:outline ...">
  <input class="optional:border-gray-300 ..." />
  <button class="bg-blue-500 hocus:bg-blue-600">...</button>
</form>

2.4 暗夜模式

在我们的项目中会有切换成暗夜模式的场景，所以专门说一下如何利用tailwind实现暗夜模式

默认是基于媒体查询 prefers-color-scheme 的结果为 dark 时（即系统开启了暗夜模式时），来决定是否采用暗夜模式下的样式。
如果希望给用户主动权，可以在页面手动切换日间或暗夜模式，可以在 Tailwind CSS 的配置文件 tailwind.config.js 中将属性 darkMode 设置为使用 class 策略.

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

2.4 自定义样式

2.4.1 自定义基础类

我们可以在 tailwind.config.js 配置文件中进行一些定义，其中可以通过覆写默认的预设值和扩展添加新值两种方式

module.exports = {
  theme: {
    // 直接在 theme 属性中设置的基础类会完全覆盖原有的预设基础类
    screens: {
      sm: '360px',
      md: '720px',
      lg: '1080px',
    },
    // 在 theme 属性的 extend 属性下添加的基础类会以扩展添加新值的方式来添加自定义基础类
    extend: {
      borderRadius: {
        '5xl': '3rem',
      }
    }
  }
}

2.4.2 使用任意值

语法：utility-[value]。

其中 utility表示基础类，value表示该样式的值。

<!-- 常用的是用于设置伪元素的 content 内容 -->
<div class="after:content-['*']">
  <!-- ... -->
</div>

ps: 如果样式值需要使用空格，把空格用_代替

2.4.2.1 注意

像 a标签的href属性里的url可能会有_，这个时候tailwind编译并不会把_编译成空格
如果一个基础类前缀可以对应许多不同属性，最好是用: 表明是对应哪个属性

<!-- Will generate a font-size utility -->
<div class="text-[length:var(--my-var)]">hello</div>

<!-- Will generate a color utility -->
<div class="text-[color:var(--my-var)]">world</div>

2.4.3 样式表添加CSS

我们还可以直接在样式表中添加自定义样式

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

.my-style {
  /* custom style */
}

2.4.3.1 样式表的注意事项

样式表中 CSS 代码的顺序对于样式的优先级影响很大，base、components、utilities 这三个模块一般是依次编译到样式表中的。
Tailwind 中使用 @layer 用以将自定义的样式代码添加到其三个模块/容器。
base 模块包含一些重置样式，以保证网页在不同浏览器中显示保持一致。可为页面整体添加一些默认的样式，例如font family、标题大小等，可以将这些自定义的样式代码添加到 base 容器中。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    font-size: 2rem;
  }
  h3 {
    /* 可以在样式表中通过指令 @apply 使用基础类来设置样式 */
    @apply text-xl;
  }
  /* ... */
}

components 模块十分简单，它包含的是一个类名为 container 类的样式。一般在该容器中添加复杂的样式，应用于页面的一些组件上，如按钮、表单、卡片之类的。4.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
     /* 通过 theme() 函数可以使用基础类的某个样式值 */
    border-radius: theme('borderRadius.lg');
  }
  .select-dropdown {
    /* 通过 @apply 可以使用基础类所对应的样式 */
    @apply rounded-b-lg shadow-md;
  }
  /* ... */
}

utilities 模块包含的是原子化的样式（每一个基础类都只实现一个基础的样式功能），在最后加载的。所以其中定义的样式有最高的优先级，可确保基础类应用到 HTML 页面时，覆盖其他样式。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

所有使用 @layer 添加的样式，都支持使用状态变量
如果希望自定义的样式最后总是编译到样式表中，则可以不使用指令 @layer 直接写在主样式表中，同时也需要注意 CSS 代码添加的顺序，一般应该保证 @tailwind utilities 模块最后引入。

@tailwind base;
@tailwind components;

.addClass {
  /* ... */
}

@tailwind utilities;

2.5 插件添加CSS

在 Tailwind 的配置文件 tailwind.config.js 中引入 tailwindcss/plugin 模块的 plugin 方法创建插件。tailwind提供了一些钩子函数，可以将自定的样式添加到 base、components 、 utilities 中。

// 📄 tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addBase, addComponents, addUtilities, theme }) {
      addBase({
        'h1': {
          fontSize: theme('fontSize.xl'),
        },
      })
      addComponents({
        '.btn': {
          borderRadius: theme('borderRadius.lg'),
        }
      })
      addUtilities({
        '.content-auto': {
          contentVisibility: 'auto',
        }
      })
    })
  ]
}

写在结尾

这是我对tailwind css初步使用的认识，希望后边借助写项目的机会对tailwind css的使用越来越熟练，对tailwind css的认识也更加深刻！

大项目之初识Tailwind CSS ｜ 青训营笔记