Tailwindcss Hover, Focus, & Other States (悬停、聚焦和其他状态) Limitations

背景

项目代码有需求是仅在hover状态下显示滚动条，在集成css之前的做法是定义一个css类，编写类的样式如下

.container {height: 300px;overflow-y: hidden;
}.container:hover {overflow-y: auto;
}

问题

在集成tailwindcss时，由于未仔细查看文档，直接写成

<div class="overflow-hidden hover:overflow-auto"</div>

导致聚焦状态下，滚动条不显示的问题。

原因分析

Tailwindcss由于文件大小方面的考虑，并非所有实用程序都默认启用所有状态变体。有关默认启用的变体的完整列表，请参阅以下参考表。

// Default configuration
module.exports = {// ...variants: {accessibility: ['responsive', 'focus-within', 'focus'],alignContent: ['responsive'],alignItems: ['responsive'],alignSelf: ['responsive'],animation: ['responsive'],appearance: ['responsive'],backdropBlur: ['responsive'],backdropBrightness: ['responsive'],backdropContrast: ['responsive'],backdropFilter: ['responsive'],backdropGrayscale: ['responsive'],backdropHueRotate: ['responsive'],backdropInvert: ['responsive'],backdropOpacity: ['responsive'],backdropSaturate: ['responsive'],backdropSepia: ['responsive'],backgroundAttachment: ['responsive'],backgroundBlendMode: ['responsive'],backgroundClip: ['responsive'],backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],backgroundImage: ['responsive'],backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],backgroundPosition: ['responsive'],backgroundRepeat: ['responsive'],backgroundSize: ['responsive'],backgroundOrigin: ['responsive'],blur: ['responsive'],borderCollapse: ['responsive'],borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],borderRadius: ['responsive'],borderStyle: ['responsive'],borderWidth: ['responsive'],boxDecorationBreak: ['responsive'],boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],boxSizing: ['responsive'],brightness: ['responsive'],clear: ['responsive'],container: ['responsive'],contrast: ['responsive'],cursor: ['responsive'],display: ['responsive'],divideColor: ['responsive', 'dark'],divideOpacity: ['responsive', 'dark'],divideStyle: ['responsive'],divideWidth: ['responsive'],dropShadow: ['responsive'],fill: ['responsive'],filter: ['responsive'],flex: ['responsive'],flexDirection: ['responsive'],flexGrow: ['responsive'],flexShrink: ['responsive'],flexWrap: ['responsive'],float: ['responsive'],fontFamily: ['responsive'],fontSize: ['responsive'],fontSmoothing: ['responsive'],fontStyle: ['responsive'],fontVariantNumeric: ['responsive'],fontWeight: ['responsive'],gap: ['responsive'],gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],grayscale: ['responsive'],gridAutoColumns: ['responsive'],gridAutoFlow: ['responsive'],gridAutoRows: ['responsive'],gridColumn: ['responsive'],gridColumnEnd: ['responsive'],gridColumnStart: ['responsive'],gridRow: ['responsive'],gridRowEnd: ['responsive'],gridRowStart: ['responsive'],gridTemplateColumns: ['responsive'],gridTemplateRows: ['responsive'],height: ['responsive'],hueRotate: ['responsive'],inset: ['responsive'],invert: ['responsive'],isolation: ['responsive'],justifyContent: ['responsive'],justifyItems: ['responsive'],justifySelf: ['responsive'],letterSpacing: ['responsive'],lineHeight: ['responsive'],listStylePosition: ['responsive'],listStyleType: ['responsive'],margin: ['responsive'],maxHeight: ['responsive'],maxWidth: ['responsive'],minHeight: ['responsive'],minWidth: ['responsive'],mixBlendMode: ['responsive'],objectFit: ['responsive'],objectPosition: ['responsive'],opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],order: ['responsive'],outline: ['responsive', 'focus-within', 'focus'],overflow: ['responsive'],overscrollBehavior: ['responsive'],padding: ['responsive'],placeContent: ['responsive'],placeItems: ['responsive'],placeSelf: ['responsive'],placeholderColor: ['responsive', 'dark', 'focus'],placeholderOpacity: ['responsive', 'dark', 'focus'],pointerEvents: ['responsive'],position: ['responsive'],resize: ['responsive'],ringColor: ['responsive', 'dark', 'focus-within', 'focus'],ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],ringOffsetWidth: ['responsive', 'focus-within', 'focus'],ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],ringWidth: ['responsive', 'focus-within', 'focus'],rotate: ['responsive', 'hover', 'focus'],saturate: ['responsive'],scale: ['responsive', 'hover', 'focus'],sepia: ['responsive'],skew: ['responsive', 'hover', 'focus'],space: ['responsive'],stroke: ['responsive'],strokeWidth: ['responsive'],tableLayout: ['responsive'],textAlign: ['responsive'],textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],textOverflow: ['responsive'],textTransform: ['responsive'],transform: ['responsive'],transformOrigin: ['responsive'],transitionDelay: ['responsive'],transitionDuration: ['responsive'],transitionProperty: ['responsive'],transitionTimingFunction: ['responsive'],translate: ['responsive', 'hover', 'focus'],userSelect: ['responsive'],verticalAlign: ['responsive'],visibility: ['responsive'],whitespace: ['responsive'],width: ['responsive'],wordBreak: ['responsive'],zIndex: ['responsive', 'focus-within', 'focus']}
}

配置变体

要配置为您的项目启用哪些变体，请参阅配置变体文档
可以在tailwind.config.js文件的variants 部分，控制应为每个核心插件启用哪些变体

// tailwind.config.js
module.exports = {variants: {extend: {backgroundColor: ['active'],// ...borderColor: ['focus-visible', 'first'],// ...textColor: ['visited'],}},
}

每个属性都是一个核心插件名称，指向为该插件生成的变体数组。

支持以下现成的变体：

变体	描述
responsive	响应式变体，如sm、md、lg和xl。
dark	针对暗黑模式。
motion-safe	针对prefers-reduced-motion: no-preference媒体查询。
motion-reduce	针对prefers-reduced-motion: reduce媒体查询。
first	针对first-child伪类。
last	针对last-child伪类。
odd	针对odd-child伪类。
even	针对even-child伪类。
visited	针对visited伪类。
checked	针对checked伪类。
group-hover	hover当标记的父元素与伪类匹配时，定位该元素。
group-focus	focus当标记的父元素与伪类匹配时，定位该元素。
focus-within	针对focus-within伪类。
hover	针对hover伪类。
focus	针对focus伪类。
focus-visible	针对focus-visible伪类。
active	针对active伪类。
disabled	针对disabled伪类。

来源

悬停、焦点和其他状态变体

配置变体文档