如何使用JIT在顺风css中使用布局变体？

沃梦达教程前端问题

2022-01-01

How to use layout variants in tailwind-css using jit?(如何使用JIT在顺风css中使用布局变体？)

本文介绍了如何使用JIT在顺风css中使用布局变体？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

Youtube.com或twitch.tv等网站有一项我称之为替代视图的功能，与默认视图相比，玩家使用了更多的屏幕空间。

如何使用Just In Time编译器在Tail Windcss中实现这一点？

<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>

如何做到这一点？

推荐答案

您可以创建新变量

trawind.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>

demohere-切换large-player类查看效果

这篇关于如何使用JIT在顺风css中使用布局变体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：如何使用JIT在顺风css中使用布局变体？