本篇是结合 tailwindcss 的断点在 CSS 层面隐藏元素。如果需要 JS 层隐藏（即完成移除）见我的另一篇文章：写一个 hook 将自适应断点判断逻辑引入 JS - tailwindcss 系列。
🤕 问题和背景
在响应式设计中，我们经常会遇到一个元素在移动端隐藏在 PC 端展现，或反之。
我们可以通过 hidden md:xx 来实现，比如将一个 div 元素隐藏可以使用 hidden md:block：
<div className="hidden md:block">
如果要将一个 span 隐藏呢？hidden md:inline，以此类推我们将会出现类似的重复结构，出现重复就意味着“坏味道”，可能违反了 DRY 原则。
解决 DRY 问题
我们可以通过 tailwind css 的 plugin 帮我们解决。
方式一 addUtilities
addUtilities 适合生成静态固定可枚举的 className。由浅入深我们先添加一个 class：
// tailwind-plugins\hidden-on-mobile.js
// @ts-check
const plugin = require('tailwindcss/plugin')
module.exports = plugin(function ({ addUtilities, matchUtilities, theme }) {
addUtilities({
'.hidden-mobilex': {
'@apply hidden': {},
'@apply md:block': {},
},
})
})
以上实现了一个 hidden md:block 的替代品 hidden-mobilex(命名随便取的演示用)。
应用后的效果：
批量添加
改造上述代码一次性添加 4 个：'inline', 'inline-block', 'block', 'flex'：
// tailwind-plugins\hidden-on-mobile.js
// @ts-check
const plugin = require('tailwindcss/plugin')
/** @typedef {import('react').CSSProperties['display']} IDisplay */
/** @type {IDisplay[]} */
const values = ['inline', 'inline-block', 'block', 'flex']
module.exports = plugin(function ({ addUtilities, matchUtilities, theme }) {
const batch = values.reduce((acc, display) => {
return {
...acc,
[`.hidden-mobile-${display}`]: {
'@apply hidden': {},
[`@apply md:${display}`]: {},
},
}
}, {})
// console.log('batch:', batch)
addUtilities(batch)
})
batch 长这样：
{
".hidden-mobile-inline": {
"@apply hidden": {},
"@apply md:inline": {}
},
".hidden-mobile-inline-block": {
"@apply hidden": {},
"@apply md:inline-block": {}
},
".hidden-mobile-block": {
"@apply hidden": {},
"@apply md:block": {}
},
".hidden-mobile-flex": {
"@apply hidden": {},
"@apply md:flex": {}
}
}
我们加了一个“奇怪”的类型 IDisplay，作用仅为了智能提示，以此也可以管中窥豹看到实际我们的 display 远不止这四个，所以接下来引入我们本文的重点支持任意 display 值。
方式二 matchUtilities
我们能否像 tailwind 的 padding 既支持 px-1/2/3/4 又支持 px-[14px] 这种动态值，这也是 tailwind 的精髓之一。
matchUtilities：适合动态值，其实“能动能静”。
我们要实现的效果是：
hidden-mobile-flex最后生成hidden md:flexhidden-mobile-[inline-flex]最后生成hidden md:inline-flex
// tailwind-plugins\hidden-on-mobile.js
// @ts-check
const plugin = require('tailwindcss/plugin')
/** @typedef {import('react').CSSProperties['display']} IDisplay */
/** @type {IDisplay[]} */
const values = ['inline', 'inline-block', 'block', 'flex']
module.exports = plugin(function ({ matchUtilities }) {
matchUtilities(
{
'hidden-mobile': (value) => {
// console.log('value:', value)
return {
'@apply hidden': {},
[`@apply md:${value}`]: {},
}
},
},
{
values: mirror(values),
},
)
})
function mirror(arr) {
return arr.reduce((acc, curr) => {
acc[curr] = curr
return acc
}, {})
}
通过 values 在 VSCode 安装 tailwind 插件后，能智能提示 values 中列举的值，同时我们输入的动态值，也能应用（当然此处没有禁止非法值，也无需因为应用后 CSS 不生效）。
注意 values 的结构是对象：
{ inline: 'inline', ... }
key 是 className 中的动态部分，value 为生成时插件函数的入参。
应用后的效果：
👆 `hidden-mobile-flex` 最后生成 `hidden md:flex`
👆 `hidden-mobile-[inline-flex]` 最后生成 `hidden md:inline-flex`
你还可以这么写，即手写 md:xx 部分，实际不推荐，但是这种写法可以帮助我们了解 tailwind 的生成机制。
const plugin = require('tailwindcss/plugin')
/** @typedef {import('react').CSSProperties['display']} IDisplay */
/** @type {IDisplay[]} */
const values = ['inline', 'inline-block', 'block', 'flex']
module.exports = plugin(function ({ matchUtilities, theme }) {
matchUtilities(
{
'hidden-mobile': (value) => {
console.log('value:', value)
return {
'@apply hidden': {},
+ [`@media (min-width: ${theme('screens.md')})`]: {
+ display: value,
+ },
}
},
},
{
values,
},
)
})
这里很巧妙的用到了 ${theme('screens.md') 而非写死 768px，值得大家体会。
🧐 存在的问题和改善
我们需要知道当前元素的 display 值才能使用，要是能自动识别就好。比如 span 上应用 class hidden-mobile 自动生成 hidden-mobile-inline，div 则 block。
但并插件还没有如此强大并不能“反射”拿到当前 class 附着的元素，而且有时候拿到元素不一定就能判断其 display，因为父元素或者自己本身增加的 className 也会影响自己，这就需要运行时动态计算了，并非插件能力范围（假设可以拿到附着的元素，可以将其在 Node.js 无头浏览器渲染或者在实际 DOM 渲染完毕后动态添加样式）。
移动端隐藏其他展现使用 hidden md:block 这是基于 tailwind 移动端优先的设计理念而来。但是却会导致我们需要基于当前元素在非隐藏状态下的 display 值来写 md:xxx 的后半部分，麻烦易出错。
我们还有更好的办法吗？有，详见 tailwind“移动端优先”在隐藏元素方面的问题 - tailwindcss 系列。
