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

文章目录

tailwindcss 官网（五）核心概念：添加新的功能类、函数与指令（@tailwind、@apply、!important、@layer、@variants、@responsive、 theme()、 @screen）、px、em、rem
- 1. 添加新的功能类
- - 使用 CSS
  - - 生成响应式变体
    - 生成深色模式变体
    - 生成状态变体
  - 使用插件
- 2. 函数与指令
- - @tailwind
  - @apply
  - @layer
  - @variants
  - @responsive
  - @screen
  - theme()
- 3. px、em、rem
- - PX
  - EM
  - REM
  - px 与 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等分辨率差别比较挺大的设备。

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

tailwindcss 官网（六）定制：配置（ `tailwind.config.js `、-p、important、核心插件、`resolveConfig`）、主题 `theme` 配置
tailwindcss 官网(六)定制:配置( tailwind.config.js.-p.important.核心插件.resolveConfig).主题 theme 配置文章目录 tailwin ...
Vue3核心概念、新特性及与Vue2的区别
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue中组件的应用(三)>,今天主要跟大家分享我整理的vue3的相关核心概念及其新特性,与Vue3的区别,主要包括 ...
tailwindcss 官网（二）生产优化（purge）、浏览器支持、智能感知
tailwindcss 官网(二)生产优化(purge).浏览器支持.智能感知文章目录 tailwindcss 官网(二)生产优化(purge).浏览器支持.智能感知 1. 生产优化概览编写可清 ...
爬虫实战6：爬取英雄联盟官网五个位置的综合排行榜保存到excel
申明:资料来源于网络及书本,通过理解.实践.整理成学习笔记. 文章目录英雄联盟官网获取一个位置的综合排行榜所有数据(上单为例) 获取所有位置的综合排行榜所有数据英雄联盟官网获取一个位置的综合排 ...
vue2 + vuex 高度还原饿了么 App，用真实数据登陆官网，并实现购物车、下单功能
前言 vue2的发布后自己也研究了一段时间,奈何公司的技术栈是以react为主,没有机会好好利用vue2去做一个完整的项目.虽然写了几个demo,但和写一个完整的项目还是有很大差别的.于是自己想着用空 ...
Objective-C 编程语言官网文档（二）-对象，类以及消息
声明:本文档仅为个人学习过程中顺手翻译之作,方便开发的同胞借鉴参考.如有觉得译的不好不到位的地方,欢迎指正,将及时做出更正尽量尊重原文档,因为首次Objective-C,有些地方可能直译了没有注意该 ...
官网消息【iPlayer外挂字幕】功能开发中！有图
刚才逛着官方网看到的,发现iPlayer官网更新了首页.增加了新闻动态的版块.以下是官网原文 ,该来的还是会来的,偶刚刚买了一周感觉字幕的确需要个清晰的,不然有些大分辨率的电影看起来字幕还是有点吃力. ...
linux系统内核官网,五年26个版本：Linux系统内核全程回顾
五年26个版本:Linux系统内核全程回顾出处:快科技 2010-11-04 16:53:56 作者:上方文Q 编辑:上方文Q[爆料] 收藏文章 Phoronix.com今天将他们对Linu ...
博弈Ai官网ChatGPT4和3.5的真实功能测评
生活是我们每个人都必须面对的现实.它涵盖了各种方面,包括我们的工作.家庭.朋友和爱好等等.在这个充满挑战和机遇的世界中,我们必须学会如何平衡自己的需求和责任,并适应不断变化的环境.无论你处于生命的哪个 ...

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