css - 如何使用 jit 在 tailwind-css 中使用布局变体?
问题描述
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>
如何才能做到这一点?
解决方案
您可以创建新变体
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
类以查看效果
推荐阅读
- c++ - 声明指向自定义优先级队列的指针
- android - 如何从我的视图模型更新元素的回收器视图?
- ruby-on-rails - 不推荐使用 Fixnum - 当我运行 rake db: seed
- python - 如何让我的运行长度编码脚本在 10 个字符后仍然起作用
- c++ - 排序数组仅适用于某些集合,不适用于其他集合
- ios - swift 5 中的本地化(更改语言按钮不起作用)
- javascript - 无法读取未定义 Firebase 函数的属性获取
- sql - 如何有效地比较两个数据集的差异?
- physics - 推导恒定加加速度的运动学方程
- java - 浏览 ISO 20022 电子存储库的内容