邂逅Tailwind(一)

本文正在参加「金石计划」

Tailwind CSS 提供了一组预定义的 CSS 类,这些类对应了常见的样式规则,例如宽度、高度、颜色、字体、边框、间距等等

开发者可以在 HTML 文件、JavaScript 组件和其他模板文件中使用这些类名来描述元素的样式,而不需要手动编写 CSS 样式表

当使用这些类名时,Tailwind CSS 会根据其对应的规则生成对应的 CSS 样式,并将其保存到一个静态的 CSS 文件中

由于 Tailwind CSS 是基于类名的样式生成工具,因此它可以与各种前端框架和库(例如 React、Vue.js、Angular 等)无缝集成

并提供了丰富的定制化选项,以便开发者可以根据自己的需求对其进行配置和扩展

Tailwind CSS 会在编译时 将类名转换为样式表 并对样式进行压缩处理。这都是在编译时完成的,并不是在运行时动态生成

为了可以在vscode中 支持编写Tailwind CSS语法,需要安装插件Tailwind CSS IntelliSense

Tailwind CSS 以性能优先,在生成CSS的时候,会进行tree-shaking, 来生成尽可能小的 CSS 文件

结合构建压缩和网络压缩,可以生成非常小的CSS文件,而不需要额外的code-splitting配置

由于 Tailwind CSS 生成的 CSS 文件非常小,该文件通常只需要下载一次,然后可以被浏览器缓存

直到该文件被更新或者用户清除浏览器缓存为止

核心概念

功能类优先

Tailwind CSS 是一种基于 Utility-First Fundamentals(功能类优先) 的 CSS 框架,其中包含大量的功能类,用于快速实现常见的样式效果

Tailwind CSS 将常见的样式抽离成一个个预先设置的功能类,以便于在 HTML 中直接应用这些样式

使用 Tailwind CSS,您可以通过将功能类应用于 HTML 元素来快速实现样式效果,而无需编写自定义 CSS

  • 减少定义 CSS 类名的时间

    使用 Tailwind CSS,可以将常见的样式抽象成为预定义的功能类,从而避免了手动编写 CSS 类名的过程,减少了定义类名的时间

  • 随着业务扩张,CSS 文件的大小不会增长

    Tailwind CSS 的功能类是原子化的,这意味着每个功能类仅包含最基本的功能和属性,而不是一组复杂的样式规则

    因此,随着业务扩张,CSS 文件的大小不会显著增长,这有助于提高性能和可维护性

  • 使用功能类可以提高网页的可读性和可维护性

    由于使用 Tailwind CSS 的功能类,是从预定义的设计系统中选择样式,而不是每次都手动编写样式

    这使得代码更易于理解和修改,从而提高了开发效率和代码质量

  • 使用功能类可以确保网页中不同组件的样式风格更加统一

    因为是从预定义的设计系统中选择样式,而不是每次都手动编写样式

    因此可以确保不同组件之间的样式风格一致,从而使整个网页的视觉效果更加统一和协调

处理元素的各种状态

伪类

在Tailwind中,每个实用类都可以通过在类名的开头添加一个修饰词来在不同状态下有条件地应用功能类

Tailwind提供了lg:、hover:、focus:、active:、dark:、visited:、first:、last:、odd:、even:等修饰符,以更精确地控制实用类的应用条件,从而实现更具灵活性的样式

在 Tailwind 中,使用功能类来表示特定状态或行为的样式,功能类只会在满足特定条件时应用对应的样式,在不满足对应条件的时候,对应的样式会被移除

例如,.hover:bg-blue-500类只在鼠标悬停在元素上时应用背景颜色为蓝色的样式,而在默认状态下不会应用任何样式

 <!-- 
   在div处于hover状态时 将样式从bg-blue-500修改到bg-blue-700
   即在原生css中 xxxx::hover -> tailwind中的 hover:xxx
 -->
 <div class="bg-blue-500 hover:bg-blue-700">
   Hover me!
 </div>
 ​
 <!-- 
   对应的修饰词可以被叠加, 解析规则是从右到左
   虽然绝大多数情况下,顺序是不重要的,但是不排除依赖于顺序的情况发生
   dark:focus:opacity-100 => dark(focus('opacity-100'))
 -->
 <button class="dark:md:hover:bg-fuchsia-600 ...">
   Save changes
 </button>
基于父组件的样式设计(group-{modifier})
 <!-- 为div标记个名字group -->
 <div class="group">
   <!-- 
     group-hover:bg-blue-700 表示的是
     当div.group处于hover状态时
     为button添加功能类bg-blue-7000
   -->
   <button class="group-hover:bg-blue-700">Click me</button>
 </div>

当嵌套多个 .group 元素时,就需要给父类添加具体的名称 group/{name},并在子类中使用group-hover/{name}来引用该名称

 <!-- 为div起名为group/parent -->
 <div class="group/parent">
   <!-- 为buttton起名为 group/child -->
   <!-- group-hover/parent:bg-blue-700 -- 当div处于hover状态时,添加bg-blue-700 -->
   <button class="group/child group-hover/parent:bg-blue-700">
     <!-- group-hover/child:text-white -- 当button处于hover状态时, 添加text-white -->
     <span class="group-hover/child:text-white">Click me</span>
   </button>
 </div>

group-[css选择器]:功能类 表示当 .group 父元素包含指定的 CSS 选择器时,为子元素添加对应的功能类,从而实现特定的样式效果。

 <div class="group dark-mode">
   <!--
     当div.group有样式dark-mode 且 处于hover状态
     为button添加功能类text-white
   -->
   <button class="group-[.dark-mode]:group-hover:text-white">Click me</button>
 </div>
 <!-- 
   :nth-of-type(1) .group .group-[:nth-of-type(1)_&]:text-red-500
   =>
   :nth-of-type(1) 表示的是任意层级 任意元素中的 第一个元素 -- 可以不指定n,默认值为1
   div::nth-of-type(1) 表示的是任意层级 任意元素中的 第一个div元素 -- 可以不指定n,默认值为1
 -->
 <body>
   <div class="group">
     <div>First child</div>
     <div>Second child</div>
     <div class="group-[:nth-of-type(1)_&]:text-red-500">Third child</div>
   </div>
 </body>
基于兄弟组件的样式设计(peer-{modifier})

当需要根据同级元素的状态来样式化一个元素时,可以给这个同级元素加上 peer 类名,并使用 peer-* 的修饰符来样式化目标元素

peer模式适用于所有伪类修饰符,如 peer-focuspeer-requiredpeer-disabled

由于通用兄弟选择器在 CSS 中的工作原理,peer 标记只能用于前面的兄弟元素

 <!-- 使用peer进行标记, 当input处于focus状态时,div文本颜色变红 -->
 <input class="peer border bg-gray-200" />
 <div class="peer-focus:text-red-500">This field is required</div>
 <div>
   <input type="checkbox" class="peer/agree">同意选项
   <!-- 当input.checkbox被选中时 才会显示下面的内容 -->
   <div class="hidden peer-checked/agree:block">请先同意协议</div>
 </div>
 <div>
   <input class="is-agree peer border bg-gray-200" />
   <div class="peer-[.is-agree]:text-red-500">This field is required</div>
 </div>
 <!-- 
   会被解析为 ==> :last-child .peer ~ .peer-[:last-child_&]:text-red-500 
   :last-child --- 任意层级中 最后一个子元素
   div:last-child --- 任意层级中,最后一个div元素
 -->
 <div class="wrapper">
   <input class="peer border bg-gray-200" />
   <div class="peer-[:last-child_&]:text-red-500">This field is required</div>
 </div>

伪元素

伪元素不是 DOM 元素的一部分,它们只是在 DOM 元素的前面或者后面生成的虚拟元素,用于在元素的外观上添加额外的样式或者内容

伪元素不能被选中,也不能被复制或者修改,也不能通过JavaScript来操作伪元素

before/after

使用 beforeafter 修饰符来样式化 ::before::after 伪元素

在使用这些修饰符时,Tailwind 会自动添加默认值 content: '',因此除非需要不同的值,否则不必指定它

在关闭了Tailwind的预设基础样式(preflight)的时候,就必须需要手动设置对应的content值

因为在preflight模式下,Tailwind会对全局进行一系列基本的重置,并设置默认值

 <!-- 
   使用before:xxx 和 after:xxx 来设置before和after伪类 
   伪元素的默认值是空字符串 可以使用before/after:content-[xxx]来设置具体的值
 -->
 <span class="after:ml-0.5 after:text-red-500 after:content-['*']"> Email </span>
其它伪元素
 <!-- 使用placeholder:xxx 来修饰::placeholder -->
 <input class="border placeholder:text-red-400" type="text" placeholder="this is a placeholder" />
 ​
 <!-- 使用file:xxx 来修饰::file-selector-button -->
 <!-- 注意: input[type="file"]的边框样式并不会被preflight重置,需要显示设置 -->
 <input type="file" class="file:border file:bg-violet-500">上传文件</input>
 ​
 <!-- 使用 marker 修改器来样式化列表中的计数器或标志符号 --- 本质是为::marker来设置对应样式 -->
 <!-- 和原生::marker 不一致的是 Tailwind中的::marker是可以继承的 -->
 <ul role="list" class="marker:text-sky-400 list-disc pl-5 space-y-3 text-slate-400">
   <!-- ... -->
 </ul>
 ​
 <!-- 使用selection::xxx 来修改文本被选中时候的样式 --- 即设置::selection -->
 <!-- 和原生::selection不同的是,selection:xxx是可以被继承的 -->
 <div class="selection:text-red-700 selection:bg-yellow-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, ullam.</div>
 ​
 <!-- 使用 first-line 和 first-letter 修改器来分别设置内容块中的首行和首字母样式 -->
 <div class="first-letter:font-bold first-line:text-red-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque provident tempore hic, placeat deleniti unde eligendi, nulla earum in, aperiam ratione consequatur aspernatur aliquid illo quae minima assumenda ex pariatur!</div>

响应式设计

使用工具类来构建响应式界面,而不需要离开HTML, 去编写CSS

Tailwind提供了五个响应式断点,这些断点会在合适的情况下被自动添加和移除

Tailwind中的响应式断点功能类前缀可以被添加到任何一个Tailwind所提供的工具类上

前缀 最小宽度 举例
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }
前缀 最大宽度 举例
max-sm 640px @media (min-width: 640px) { ... }
max-md 768px @media (min-width: 768px) { ... }
max-lg 1024px @media (min-width: 1024px) { ... }
max-xl 1280px @media (min-width: 1280px) { ... }
max-2xl 1536px @media (min-width: 1536px) { ... }

默认情况下,Tailwind 中的未带响应式前缀的类将在任何尺寸的屏幕下生效

由于 Tailwind 采用了类似于Bootstrap的移动优先的设计, 其中默认的移动屏幕尺寸(也就是手机端对应的屏幕尺寸)为 640px 或更小

因此在移动端添加的类不需要添加任何响应式前缀,只有需要在某个特定断点或以上更改样式,才需要添加对应的响应式前缀

当在多个屏幕尺寸下使用相同的类名时,后面的响应式前缀会覆盖前面的响应式前缀,从而在更大的屏幕上应用新的样式

 <!-- 
   如果只添加了响应式前缀而没有无响应式前缀的功能类
   那么这些类只会在指定的屏幕尺寸及其以上生效,而在其他屏幕尺寸上不会生效
   例如: 下述div只会在宽度在640px及以上尺寸的时候,靠左显示
         其余屏幕宽度 该div都会居中显示
 -->
 <div class="text-center sm:text-left"></div>
 ​
 <!-- 
   仅仅只在[768px, 1024px]屏幕尺寸下 会添加display: flex
   ps: 在Tailwind中,任何的功能类前缀都可以叠加
 -->
 <div class="md:max-lg:flex"></div>
 <!-- 使用 min-[] 和 max-[] 来自定义 一次性的响应式断点 -->
 <div class="min-[320px]:text-center max-[600px]:bg-sky-300"></div>

黑夜模式

使用dark:前缀 设置仅仅只在黑夜模式下 所需要使用的样式

黑夜模式下的样式和普通模式下的样式冲突时,黑夜模式下的样式会覆盖普通模式下的样式

在默认模式下,Tailwind使用CSS原生媒体查询条件 prefers-color-scheme 来判断是否需要添加dark前缀

prefers-color-scheme

prefers-color-scheme 是一个 CSS 媒体查询条件,用于查询用户系统是否启用了暗黑模式(黑夜模式)

如果用户系统启用了暗黑模式,该媒体查询条件将返回 dark,否则将返回 light

因为浅色模式是许多操作系统的默认模式,所以如果没有显式地为黑夜模式设置样式,那么默认样式将在浅色模式下生效

 body {
   background-color: white;
   color: black;
 }
 ​
 @media (prefers-color-scheme: dark) {
   body {
     background-color: black;
     color: white;
   }
 }

类模式

Tailwind的黑夜模式默认情况下,使用媒体查询来检测是否需要启动黑夜模式,也就是prefers-color-scheme

可以在修改配置文件配置以修改Tailwind应用黑夜模式的规则为 通过类名来检测 也就是类模式

 module.exports = {
   // darkmode: 'class' | 'media'
   darkMode: 'class',
   // ...
 }
 <div>
   <div class="dark:bg-red-500 bg-white">Lorem ipsum dolor sit amet.</div>
 </div>
 ​
 <!-- 
   当启用类名模式的时候,如果一个元素上有名为dark的类
   则该元素及其子元素都会应用黑夜模式
 -->
 <div class="dark">
   <div class="dark:bg-red-500 bg-white">Lorem ipsum dolor sit amet.</div>
 </div>

支持系统偏好和手动选择

使用类的策略可以通过使用 window.matchMedia() API来支持用户的系统偏好或手动选择模式

 // localStorage.theme === 'dark' --- 黑夜模式
 // localStorage.theme === 'light' --- 亮色模式
 //  (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches --- 跟随系统
 if (localStorage.theme === 'dark' 
     || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
   document.documentElement.classList.add('dark')
 } else {
   document.documentElement.classList.remove('dark')
 }
matchMedia
// matchMedia是一个用于判断当前视口是否符合某个媒体查询条件的JS API
//  -- 参数为字符串形式的媒体查询条件 (ps: 媒体查询条件需要假设小括号)
//  -- 返回值是一个MediaQueryList 对象,该对象中有两个属性,一个方法
//     -- metches 当前视口是否符合传入的媒体查询条件
//     -- meida 传入的媒体查询条件 字符串格式 也就是传入的参数
//     -- onChange方法 当视口运行媒体查询的结果发生变化时 会触发这个方法 - 参数为MediaQueryList 对象
const mediaQuery = matchMedia(`(min-width: 700px)`)
const body = document.body

function handleMediaChange(query) {
  body.innerHTML = `${query.matches ? '大于' : '小于'} 700px`
}

console.log(mediaQuery.media) // => (min-width: 700px)

handleMediaChange(mediaQuery)
mediaQuery.addEventListener('change', handleMediaChange)

自定义类名

// tailwind.config.js
module.exports = {
  // 参数一 表示使用class模式
  // 参数二 表示自定义选择器 (ps: 类选择器需要加上点)
  darkMode: ['class', '.-dark'],
}
<div>
  <div class="dark:bg-red-500 bg-white">Lorem ipsum dolor sit amet.</div>
</div>

<!-- 此时下面的元素就会以红色背景显示 -->
<div class="-dark">
  <div class="dark:bg-red-500 bg-white">Lorem ipsum dolor sit amet.</div>
</div>

指令

Tailwind是使用@规则来定义对应的指令名,为Tailwind CSS项目提供特殊功能

@tailwind

 /*  
   以下样式模块 提供的样式 可以来自于 Tailwind本身 也可以 来自于 Tailwind插件
 */
 ​
 /*
   样式重置 和 设置默认样式
   确保应用程序在不同的浏览器和设备上具有一致的外观,并为使用Tailwind的应用程序提供一致的基础样式
   base中提供的都是一系列的基础样式
   components 和 utilities中提供的都是 一组样式 用于实现某个具体样式功能
 */
 @tailwind base;
 ​
 /* 提供Tailwind风格的UI组件样式 */
 @tailwind components;
 ​
 /* UI组件之外的功能类,如背景类、边框类、文本类和布局类 */
 @tailwind utilities;
 ​
 /* @tailwind variants提供了实用类在不同环境下的样式变体,其中包括响应式前缀、伪类前缀、状态前缀、dark mode前缀等等 */
 @tailwind variants;

@layer

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 ​
 /*
   @layer用于对样式桶(bucket)进行样式扩展
   样式桶就是一组类似功能的CSS类
   例如: @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; 等都是样式桶
   一个样式桶 包含了许多小桶,每个小桶都包含了一组类似功能的CSS类
   例如: 文本样式、布局、背景、边框、间距等都是 @tailwind utilities中的小桶
 */
 @layer base {
   h1 {
     /* 扩展样式的是可以使用原生css 也可以使用tailwind中提供的功能类 */
     @apply text-2xl;
   }
   h2 {
     @apply text-xl;
   }
 }
 ​
 @layer components {
   /* 
     扩展的样式:
     1. 会自动移动到合适的位置 进行样式插入
     2. 扩展的样式在构建的时候 会使用tree shaking
     3. 可以和hover:,focus: 之类的修饰符一起使用
   */
   .btn-blue {
     @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
   }
 }
 ​
 @layer utilities {
   .filter-none {
     filter: none;
   }
   .filter-grayscale {
     filter: grayscale(100%);
   }
 }
 ​
 /*
   定义css样式的时候,也可以不使用@layer
   区别是@layer会tree shaking 
   而不使用@layer无论用不用,都会存在于编译后的css中
 */
 .user-none {
   user-select: none;
 }

@apply

用于将多个功能类组合在一起,形成一个新的功能类,可以用于复用功能类, 也可以用于覆盖第三方库中的样式

如果过渡使用@apply指令,会导致生成大量的CSS规则,增加CSS作用域的数量,从而导致文件体积过大

所以过度使用@apply会增加最终生成的样式表的大小,所以在复用功能类的时候优先选择抽取成组件

只有在一些小的功能中复用功能类时,才应该使用@apply指令

/* 
	CSS选择器 + { ... } = 一个css作用域
*/
.btn-custom {
  @apply px-4 py-2 text-white bg-blue-500 rounded-md;
}

/* 
	可以使用!important 来提升自定义样式的优先级
	font-bold py-2 px-4 rounded 对应转换后的样式 都会被加上!important
*/
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

如果在一个组件中使用@apply定义了功能类,将只能在该组件中使用 也就是说@apply也遵循模块化原则

如果需要再组件化开发中使用@apply 需要以插件的方式在配置文件中进行注册

使用@apply抽取可复用的功能类组合会减低可维护性并增加最终生成的css体积,所以并不推荐

如果需要复用样式,优先应该尝试抽离组件以进行复用

 const plugin = require('tailwindcss/plugin')
 ​
 module.exports = {
   // ...
   plugins: [
     // plugin函数 参数是一个函数
     // 参数一 -- addComponents 用于添加添加样式组件的函数
     // 参数二 -- 一个用于获取实际样式值的功能函数
     // 定义后 就可以在全局使用@card功能类
     plugin(function ({ addComponents, theme }) {
       addComponents({
         '.card': {
           backgroundColor: theme('colors.white'),
           borderRadius: theme('borderRadius.lg'),
           padding: theme('spacing.6'),
           boxShadow: theme('boxShadow.xl'),
         }
       })
     })
   ]
 }

@config

使用@config指令来指定Tailwind在编译CSS文件时应该使用哪个配置文件

 /* 
   如果@import 和 @config 同时存在,需要将@import 放置在 @config之前
   因为CSS规范要求@import语句在文件中出现在其他规则之前,也就是位于css文件的最上边
 */
 @import "./custom.css";
 ​
 /* 
   @config指令后面的路径是相对于当前CSS文件所在的路径的 
   @config必须位于 @tailwind 指令之前 @import 指令之后
 */
 @config "./tailwind.config.js";
 ​
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

函数

在安装了 Tailwind 的项目中,可以使用 Tailwind 提供的一些自定义函数来访问特定的值

这些函数会在项目构建的时候,被Tailwind转换为实际使用的静态值

theme

通过 theme() 函数可以使用点语法或中括号语法来访问 Tailwind 配置值

.btn-blue {
  /* color-blue-500 会被转换为 color.blue.500  */
  background-color: theme(colors.blue.500);
  
  /* 使用 斜杠 来设置 透明度 */
  color: theme(colors.red.500 / 75%);
  
  /* padding.left[2.5] --- padding-left: 2.5px */
  padding: theme(padding.left[2.5] );
}

screen

screen函数用于创建媒体查询条件

 /*
   在屏幕在[640, 780]px的时候 加上了query类的组件 会变红
 */
 @media screen(sm) {
   .query {
     background-color: red;
   }
 }

自定义样式

可以通过tailwind.config.js文件中的theme字段来进行主题自定义,也就是样式的自定义

 <!-- 
   可以使用方括号语法 设置自定义值 
   使用了中括号语法 后 可以和 任何的修饰符一起使用 
 -->
 <div class="top-[117px] lg:top-[344px]">
   Lorem ipsum dolor sit amet.
 </div>
 ​
 <!--
   方括号中的值 可以使用theme函数获取 也可以使用 css变量
   如果在方括号中需要使用css变量,不需要加上var函数 直接使用css变量即可
   例如下边的案例中
   :root {
     --bg-color: #bada55;
   }
 -->
 <div class="bg-[--bg-color]">
   Lorem ipsum dolor sit amet.
 </div>
 ​
 <!--
   在方括号中  也可以编写完整的css属性 
   相比较@apply,方括号中完整的css属性会经过tailwind的丑化和压缩
   即使在方括号中编写完整的css属性 也可以使用修饰符
   ps: 编写完整的css的时候不要加空格 即[color:red]
       如果写成[color: red]是不起任何作用的
 -->
 <div class="[color:red] hover:[color:white] bg-gray-400">
   Lorem ipsum dolor sit amet.
 </div>
 ​
 <!--
   也可以使用方括号定义css变量 
   以便于在不同情况下 加载不同的变量值
 -->
 <div class="bg-gray-400 [--color:#f00] [color:--color] hover:[--color:#0f0]">
   Lorem ipsum dolor sit amet.
 </div>
 ​
 <!-- 
   方括号也可以用于自定义修饰符 
   例如下例的表示方式等价于:
   <ul class="last-child">
     <li>1</li>
     <li>2</li>
     <li class="sm:bg-red-500">3</li>
   </ul>
 -->
 <ul>
   <li>1</li>
   <li>2</li>
   <li class="sm:[&:last-child]:bg-red-500">3</li>
 </ul>
 ​
 <!-- 
   如果方括号中的值需要有空格,使用下划线进行表示
 ​
   如果转换后的值中只能使用下划线,不能使用空格 那么Tailwind会自动保留下划线,
   如值是表示一个url地址的时候
   bg-[url('at_example.png')] 
   会被转换为
   backgroud: url('cat_example.png')
   
   如果转换后的值中既可以使用下划线或空格 
   如伪元素的content属性值 那么tailwind会选择转换为空格 
   before:content-['hello_world']
   会被转换为
   :before {
     content: 'hello world
   }
   如果需要保留对应的下划线 可以使用 斜杠 作为转义字符
   before:content-['hello_world']
   会被转换为
   :before {
     content: 'hello_world
   }
 ​
   在JSX中解析模板的时候 会自动移除 转义字符
   所以在JSX中需要将对应值使用String.raw``包裹
   ps: String.raw`` 是一个标签模板字符串函数
       例如 String.raw`before:content-['hello_world']`
 ​
       String.raw('\n') === '\n' -> 最终结果是一样的
       所以也可以使用 before:content-['hello\_world']
 -->
 <div class="after:content-['hello_world']">
   Lorem, ipsum dolor.
 </div>
 ​
 <!-- 
   一般情况下,Tailwind会自动将自定义样式(也就是在方括号中编写的样式)添加到合适的位置
   如 text-[22px] -> font-size: 22px text-[#bada55] -> color: #bada55
   
   但是依旧可能出现歧义的情况
   如 text-[var(--my-var)] tailwind并不知道--my-var的具体值 所以可能出现编译错误
   
   此时就需要添加属性名前缀来进行区别
     text-[length:var(--my-var)] -> length: var(--my-var)
     text-[color:var(--my-var)] -> color: var(--my-var)
 -->
 ​
 <!--
   可以在方括号中添加媒体查询@media 或 css样式支持查询@support
 -->
 <div class="text-red-500 [@media(max-width:600px)]:text-blue-500">
   Lorem, ipsum dolor.
 </div>
 ​
 <!-- 
   在方括号中 使用媒体查询或@support的时候 可以在后边通过大括号来限定触发条件
   例如: 本例 仅仅只会在宽度小于600px 且元素处于hover状态的时候 才会将文本渲染为蓝色
 -->
 <div class="text-red-500 [@media(max-width:600px){&:hover}]:text-blue-500">
   Lorem, ipsum dolor.
 </div>
 <!-- 
   将全局样式 全部统一定义到 html元素或body元素上,可以方便维护和管理
   如果要扩展单独元素的样式 需要使用@layer
 -->
 <html lang="en" class="text-gray-900 bg-gray-100 font-serif">
   <!-- ... -->
 </html>

原文链接:https://juejin.cn/post/7216624116336934972 作者:coderklaus

(0)
上一篇 2023年4月3日 下午4:37
下一篇 2023年4月3日 下午4:47

相关推荐

发表评论

登录后才能评论