tailwind中的修饰符

tailwind中的修饰符

修饰符就是描述元素的某个状态时的样式，可以链式使用

<p class="hover:scale-150">鼠标放上去变大</p>

<input class="focus:hover:scale-150" value="获得焦点且鼠标放上去会变大" >

伪元素

伪元素的修饰符均改为名称后面加一个冒号的形式

::before()
    before:content-['内容'] ：设置content的内容，不设置默认为空字符串
    before:className：设置样式
::after()：同 ::before

::first-letter      ::first-line
::selection         ::placeholder
::marker            ::cue
::file-selector-button  ：使用file代替

::part()  ：无效     ::slotted() ：无效

用于表单元素的伪类

:checked        :default ：无效
:disabled       :enabled
:in-range       :indeterminate
:out-of-range   :invalid
:valid          :optional
:read-only      :read-write
:required       :focus

超链接相关伪类

:link ：无效     :visited ：无效
:hover          :active
:target

位置选择相关的伪类

该类修饰符要要放在子元素上，在父元素上使用仅针对父元素

:nth-child(n)      ：无效
:nth-child(odd)    ：使用odd代替
:nth-child(even)   ：使用even代替
:nth-last-child(n) ：无效
:first-child       ：使用first代替
:last-child        ：使用last代替
:nth-of-type(n)    ：无效
:nth-last-of-type(n)：无效
:first-of-type
:last-of-type

其他伪类

:only-of-type    :empty

以下为无效的伪类：
:only-child         :not(selector)
:has(selector)      :root
:lang(language)     :fullscreen
:is(selectors)      :where(selectors)

分组修饰符

group-*用于基于父元素来设置子元素样式

首先在父元素的class中使用group类名，表示该元素为一个组合

在子元素中使用“group-*:”(*为修饰符)来根据整个父元素的某个修饰符设定子元素的样式

<div class="group">
    <p class="group-hover:scale-150">111</p>
    <p class="group-last:scale-150">222</p>
</div>

第一个p元素表示鼠标移动至整个div元素上任意位置时都放大
第二个p元素表示如果父元素div是同级元素中的最后一个元素，则放大

使用的修饰符是基于父元素而言的，如子元素中使用group-first并非针对子元素，而是针对父元素

嵌套命名分组修饰符

在父元素中使用 group/<name> 格式来定义命名分组

在子元素或孙元素中使用 “group-xxx/<name>:” 来根据定义分组的状态设定子孙元素的样式

<div class="group/one">
    <div class="group/two">
        <p class="group-hover/one:scale-150">one</p>
        <p class="group-hover/two:scale-150">two</p>
    </div>
</div>

兄弟元素修饰符

兄弟修饰符和分组修饰符使用方法相同，使用的是“peer-*:”来设置，用来根据兄弟元素的状态来设置样式

同样需要在需要监听的兄弟元素中设置group类名

然后再需要改变样式的元素中使用“peer-*:”来设置样式

<div>
    <p class="peer">111</p>
    <p>222</p>
    <p class="peer-hover:scale-150">333</p>
</div>

需要注意的是：监控的兄弟元素只能是改变样式元素之前的同级元素

兄弟元素命名修饰符

使用方法和嵌套命名分组修饰符相同

<div>
    <p class="peer/one">one</p>
    <p class="peer/two">two</p>
    <p class="peer-hover/one:scale-150">111</p>
    <p class="peer-hover/two:scale-150">222</p>
</div>

媒体查询

tailwind为我们预设了几个修饰符用来匹配各个尺寸的显示

常用的媒体查询修饰符

sm         @media (min-width: 640px)
md         @media (min-width: 768px)
lg         @media (min-width: 1024px)
xl         @media (min-width: 1280px)
2xl        @media (min-width: 1536px)
max-sm     @media (max-width: 640px)
max-md     @media (max-width: 768px)
max-lg     @media (max-width: 1024px)
max-xl     @media (max-width: 1280px)
max-2xl    @media (max-width: 1536px)

在tailwind.config.js文件的theme.screens部分为项目中设定的常见媒体查询规则快捷命令

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'mymedia': '640px',
    },
  }
}

使用非预设的任意值作为媒体查询

min-[*] 和 max-[*]

其中星号是一个包含单位的长度

<div class="min-[320px]:text-center max-[600px]:bg-sky-300"></div>

配色方案修饰符

dark 修饰符用于匹配夜间模式

不使用修饰符默认使用的是白天模式

视口方向

portrait ：纵向
landscape ：横向

打印样式

print 修饰符

浏览器特性

可以根据浏览器是否支持某个或某些CSS样式来设定样式

格式：supports-[style1,style2,...]:

中括号中放入一个或多个css属性及值，多个为逻辑与判断

只写属性值不写值则表示仅判断支不支持该属性

<div class="supports-[display:grid]:grid" >...</div>

<div class="supports-[backdrop-filter]:bg-black/25" >...</div>

在tailwind.config.js文件的theme.supports部分为项目中使用的常见supports规则快捷命令

// tailwind.config.js
module.exports = {
  theme: {
    supports: {
      mygrid: 'display: grid',
    },
  },
}

// 项目中使用
<div class="supports-mygrid:grid">...</div>

data-* 数据属性

格式 data-[name[~*^$]=val]:

中括号中的格式和属性选择器相同

<p data-ming="sanqian" class="data-[ming]:scale-150">111</p>

在tailwind.config.js文件的theme.data部分为项目中使用的常见数据属性规则快捷命令

// tailwind.config.js
module.exports = {
  theme: {
    data: {
      myimg: 'name$="jpg"',
    },
  },
}

// 项目中使用
<div class="data-myimg:scale-150">...</div>

自定义修饰符

自定义修饰符是表示选择器就是在方括号中的格式字符串，符号&表示所在的元素

如果方括号中的的选择器中有空格，需要替换成下划线

<li class="[&:nth-child(3)]:hover:scale-150">第三个同级元素</li>

<div class="[&_p]:scale-150">
  <p>i am p</p>
  <div>i am div</div>
</div>