像 youtube.com 或 twitch.tv 这样的网站有一个我称之为替代 View 的功能，与默认 View 相比，播放器使用更多的屏幕空间。
如何使用即时编译器在 tailwindcss 中实现这一点？
<html class="player-large">
<body>
<!-- like using the build in darkMode: 'class' feature -->
</div>
</body>
</html>
布局将使用顺风网格功能完成，html 标签上的“player-large”类用于切换 View 。
我的希望是像这样使用它:
<video class="lg:col-span-2 lg:large-player:col-span-full">...</video>
如何做到这一点？
最佳答案
您可以创建新变体
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>
演示 here - 切换large-player类以查看效果
关于css - 如何使用 jit 在 tailwind-css 中使用布局变体？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68272133/