建设网站的预算,农产品网站开发方案,邢台123最新求职招聘信息,wordpress主题 百度云Tailwindcss Hover, Focus, Other States (悬停、聚焦和其他状态) Limitations
背景
项目代码有需求是仅在hover状态下显示滚动条#xff0c;在集成css之前的做法是定义一个css类#xff0c;编写类的样式如下
.container {height: 300px;overflow-y: hidden;
}.cont…Tailwindcss Hover, Focus, Other States (悬停、聚焦和其他状态) Limitations
背景
项目代码有需求是仅在hover状态下显示滚动条在集成css之前的做法是定义一个css类编写类的样式如下
.container {height: 300px;overflow-y: hidden;
}.container:hover {overflow-y: auto;
}问题
在集成tailwindcss时由于未仔细查看文档直接写成
div classoverflow-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-hoverhover当标记的父元素与伪类匹配时定位该元素。group-focusfocus当标记的父元素与伪类匹配时定位该元素。focus-within针对focus-within伪类。hover针对hover伪类。focus针对focus伪类。focus-visible针对focus-visible伪类。active针对active伪类。disabled针对disabled伪类。
来源
悬停、焦点和其他状态变体
配置变体文档
