tailwindcss 官网（五）核心概念：添加新的功能类、函数与指令（@tailwind、@apply、!important、@layer、@variants、 theme()）、px、em、rem

tailwindcss 官网（五）核心概念：添加新的功能类、函数与指令（@tailwind、@apply、!important、@layer、@variants、@responsive、 theme()、 @screen）、px、em、rem

官网：安装 - Tailwind CSS 中文文档

• !important
  • 这个属性可以让浏览器优选执行这个语句，加上!importanrt可以覆盖父级的样式。

1. 添加新的功能类

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

尽管 Tailwind 提供了相当全面的开箱即用的功能类集，您仍可能会遇到需要添加一些自己的功能类的情况。

确定扩展框架的最佳方法非常不易，因此这里有一些最佳实践，可以帮助您以最惯用的方式添加自己的功能类。

---

使用 CSS

将自己的功能类添加到 Tailwind 的最简单的方式是直接添加到您的 CSS 中。

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

@layer utilities {
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x;
  }
  .scroll-snap-y {
    scroll-snap-type: y;
  }
}

通过使用 @layer 指令， Tailwind 将自动把这些样式移动到 @tailwind utilities 相同的位置，以避免出现意外的未知问题。

使用 @layer 指令也会指示 Tailwind 在清除 功能类 层时考虑这些样式。阅读我们的 生产优化文档以了解更多信息。

生成响应式变体

如果您想根据您的 tailwind.config.js 定义的断点创建功能类的变体，请将您的功能类放在 @variants 指令中，并把 responsive 添加到变体列表中。

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

@layer utilities {
  @variants responsive {
    .scroll-snap-none {
      scroll-snap-type: none;
    }
    .scroll-snap-x {
      scroll-snap-type: x;
    }
    .scroll-snap-y {
      scroll-snap-type: y;
    }
  }
}

Tailwind 将自动生成每个自定义功能类的前缀版本，您可以有条件地应用这些样式到不同的断点上：

<!-- Use `scroll-snap-type: none` by default, then use `scroll-snap-type: x` on medium screens and up -->
<div class="scroll-snap-none md:scroll-snap-x"></div>

在 响应式设计文档 了解更多响应式功能类的信息。

生成深色模式变体

如果您想生成您自己的功能类的 dark mode variants，首先确保在您的 tailwind.config.js 文件中 darkMode 被设置为 media 或者 class。

// tailwind.config.js
module.exports = {
  darkMode: 'media'
  // ...
}

下一步，将您的功能类放在 @variants 指令中，并且把 dark 添加到变体列表中。

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

@layer utilities {
  @variants dark {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind 将自动生成每个自定义功能类的前缀版本，您可以有条件地应用这些样式到不同的状态上：

<div class="filter-grayscale dark:filter-none"></div>

在 响应式设计文档 中了解更多关于响应式功能类的信息。

生成状态变体

如果您想为您的功能类生成 状态变体，请将您的功能类放在 @variants 指令中，并列出您想启用的变体：

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

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind 将自动生成每个自定义功能类的前缀版本，您可以有条件地应用这些样式到不同的状态上：

<div class="filter-grayscale hover:filter-none"></div>

状态变体的生成顺序与您在 @variants 指令中列出的顺序相同，因此，如果您希望一个变体优先于另一个变体，请确保这个变体最后被列出：

/* Focus will take precedence over hover */
@variants hover, focus {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

/* Hover will take precedence over focus */
@variants focus, hover {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

在 状态变体文档 中了解更多关于状态变体的信息。

---

使用插件

除了直接在 CSS 文件中添加新的功能类外，您还可以通过编写自己的插件将功能类添加到 Tailwind ：

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

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.filter-none': {
          filter: 'none',
        },
        '.filter-grayscale': {
          filter: 'grayscale(100%)',
        },
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

如果您想把您的自定义功能类作为一个库发布，或者使其更容易跨项目分享，这是一个不错的选择。

在 功能插件文档 中了解更多信息。

2. 函数与指令

Tailwind 向您的 CSS 的暴露的函数和指令的参考说明。

@tailwind

使用 @tailwind 指令向您的 CSS 添加 Tailwind 的 base, components, utilities 和 screens 样式。

/**
 * 这会注入 Tailwind 的基本样式和插件注册的任何基本样式。
 */
@tailwind base;

/**
 * 这会注入 Tailwind 的组件类和插件注册的任何组件类。
 */
@tailwind components;

/**
 * 这会注入 Tailwind 的实用程序类和插件注册的任何实用程序类。
 */
@tailwind utilities;

/**
 * 使用此指令来控制 Tailwind 在何处注入每个实用程序的响应变体。
 * 如果省略，Tailwind 将默认将这些类附加到样式表的最后。
 */
@tailwind screens;

---

@apply

使用 @apply 将任何现存的功能类内联到您的自定义 CSS 中。

当您在您的 HTML 里找到您想要提取到一个新组件的通用的功能模式时，这非常有用。

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}

注意，类是根据其在原始 CSS 中的位置而不是根据在 @apply 指令之后列出它们的顺序来应用的。这是为了确保使用 @apply 提取类列表时得到的行为与直接在 HTML 中列出的类的行为相匹配。

/* Input */
.btn {
  @apply py-2 p-4;
}

/* Output */
.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

如果您要对功能类的应用顺序进行细粒度的控制，请使用多个 @apply 语句：

/* Input */
.btn {
  @apply py-2;
  @apply p-4;
}

/* Output */
.btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding: 1rem;
}

您还可以将 @apply 声明与常规 CSS 声明混合使用：

/* Input */
.btn {
  transform: translateY(-1px);
  @apply bg-black;
}

/* Output */
.btn {
  background-color: #000;
  transform: translateY(-1px);
}

默认情况下，任何使用 @apply 内联的规则中的 !important 将被删除，以避免出现特异性问题。

/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

如果您想使用 @apply 内联一个已经存在的类，并且为其设置 !important，只需要把 !important 添加到声明的结尾即可。

/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

/* Output */
.btn {
  font-weight: 700 !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  border-radius: .25rem !important;
}

注意，如果您使用的是 Sass/SCSS，则您需要使用 Sass 的插值功能才能使其正常工作。

.btn {
  @apply font-bold py-2 px-4 rounded #{!important};
}

---

@layer

使用 @layer 指令告诉 Tailwind 一组自定义样式应该属于哪个 “bucket”。可用的层有 base, components 和 utilities。

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind会自动将 @layer 指令中的所有 CSS 移至与相应 @tailwind 规则相同的位置，因此您不必担心以特定顺序编写 CSS 来避免特定性问题。

在 @layer 指令中包装的任何自定义 CSS 也会告诉 Tailwind 在清除该层时考虑那些样式。阅读 关于生产优化的文档 来了解更多详情。

---

@variants

您可以通过在 @variants 指令中声明自己的功能类来生成他们的 responsive, hover, focus, active 及其它 变体。

@variants focus, hover {
  .rotate-0 {
    transform: rotate(0deg);
  }
  .rotate-90 {
    transform: rotate(90deg);
  }
}

这将生成以下 CSS：

.rotate-0 {
  transform: rotate(0deg);
}
.rotate-90 {
  transform: rotate(90deg);
}

.focus\:rotate-0:focus {
  transform: rotate(0deg);
}
.focus\:rotate-90:focus {
  transform: rotate(90deg);
}

.hover\:rotate-0:hover {
  transform: rotate(0deg);
}
.hover\:rotate-90:hover {
  transform: rotate(90deg);
}

请务必注意，变体是按照您指定的顺序生成的。

例如，如果您希望 focus 功能类优先于 hover 功能类，请确保列表中的 focus 应该在 hover 之后：

/* Input */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Output */
.banana {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}

该 @variants 规则支持您配置文件中 variants 部分支持的所有值，以及通过插件添加的 自定义变体。

---

@responsive

您可以通过在 @responsive 指令中声明他们的定义来生成您自己的类的响应式变体。

@responsive {
  .bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
}

这是 @variants responsive { ... } 的简写方式，同样起作用。

使用默认断点，这将生成以下类：

.bg-gradient-brand {
  background-image: linear-gradient(blue, green);
}

/* ... */

@media (min-width: 640px) {
  .sm\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media  (min-width: 768px) {
  .md\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1024px) {
  .lg\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

@media (min-width: 1280px) {
  .xl\:bg-gradient-brand {
    background-image: linear-gradient(blue, green);
  }
  /* ... */
}

响应式变体将在您的样式表的结尾被添加到 Tailwind 的已经存在的媒体查询中。这将确保那些带有响应式前缀的类优先级会高于同样 CSS 属性的非响应式的类。

---

@screen

@screen 指令允许您创建通过名称引用断点的媒体查询，而不是在您的 CSS 中复制他们的值。

例如，假设有一个名为 sm 的 640px 的断点，您只需要写一些自定义的指向这个断点的 CSS。

而不是编写一个复制那些值的原始的媒体查询，如下所示：

@media (min-width: 640px) {
  /* ... */
}

…您可以使用 @screen 指令，然后根据名称引用这个断点：

@screen sm {
  /* ... */
}

---

theme()

使用 theme() 函数可以通过点符号来获取 Tailwind 配置的值。

当您想要引用一个您主题配置中的一部分声明的值时，这是一个 @apply 的有用的替代方式。

.content-area {
  height: calc(100vh - theme('spacing.12'));
}

如果您想获取一个含有点的值（像间距比例中的 2.5），则可以使用方括号。

.content-area {
  height: calc(100vh - theme('spacing[2.5]'));
}

因为 Tailwind 使用 嵌套对象语法 来定义其默认调色板，因此请确保使用点符号来访问嵌套的颜色。

获取嵌套的颜色值时不要使用破折号语法

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

使用点符号获取嵌套的颜色值

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

3. px、em、rem

PX

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

• \1. IE无法调整那些使用px作为单位的字体大小；
• \2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
• \3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特点

• \1. em的值并不是固定的；
• \2. em会继承父级元素的字体大小。

**注意：**任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

• \1. body选择器中声明Font-size=62.5%；
• \2. 将你的原来的px数值除以10，然后换上em作为单位；
• \3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。