TailWind CSS 文档伪类变体

Posted 2023-03-21

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TailWind CSS 文档伪类变体相关的知识，希望对你有一定的参考价值。

参考技术A

说明：此系列文章是个人对 Tailwind CSS官方文档的翻译，不是很严谨，请谅解。

用适合的伪类，可以定义元素hover、focus等情况的样式。

支持的元素包括：hover, focus, active, disabled, visited, first-child, last-child, old-child, even-child, group-hover, group-focus, focus-widthin

注：当需要tailwind 不能支持的伪类时，可以自己对变体进行扩展（详见后面）

用法：在父元素上添加 group 类，在子元素中使用group-hover: , group-focus: 前缀

注意：在低于79.版本IE或Edge浏览器中不支持

用法：直接将focus-width: 前缀加在父元素上就好了

用法：将响应式前缀放在变体前缀前面如 sm:hover:

在CSS中使用 @variants 指令将其包裹

例：添加disabled伪类变体的支持

如何使用 jit 在 tailwind-css 中使用布局变体？

【中文标题】如何使用 jit 在 tailwind-css 中使用布局变体？【英文标题】：How to use layout variants in tailwind-css using jit? 【发布时间】：2021-09-17 04:18:06 【问题描述】：

像 youtube.com 或 twitch.tv 这样的网站有一个我称之为替代视图的功能，与默认视图相比，播放器使用更多的屏幕空间。

如何使用即时编译器在 tailwindcss 中实现？

<html class="player-large">
<body>
    <!-- like using the build in darkMode: 'class' feature -->
  </div>
</body>
</html>

布局将使用顺风网格功能完成，html 标签上的“player-large”类用于切换视图。

我希望像这样使用它：

<video class="lg:col-span-2 lg:large-player:col-span-full">...</video>

如何做到这一点？

【问题讨论】：

【参考方案1】：

您可以创建新的变体

tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = 
  mode: 'jit',
  theme: 
    extend: ,
  ,
  variants: ,
  plugins: [

    plugin(function( addVariant, e ) 
      addVariant('large-player', ( modifySelectors, separator ) => 
        modifySelectors(( className ) => 
          return `.large-player .$e(`large-player$separator$className`)` // this is CSS selector
        )
      )
    )

  ],

布局

<div class="large-player">

<div class="grid grid-cols-3 gap-6">
  <div class="h-32 bg-red-500 lg:col-span-2 lg:col-span-2 lg:large-player:col-span-full"></div>
  <div class="h-32 bg-red-500"></div>
</div>

</div>

DEMO here - 切换large-player 类以查看效果

【讨论】：

哇，这很容易添加。感谢您的快速答复

以上是关于TailWind CSS 文档伪类变体的主要内容，如果未能解决你的问题，请参考以下文章

TailWind CSS 文档 伪类变体

如何使用 jit 在 tailwind-css 中使用布局变体？

TailWind CSS 文档伪类变体