SuperAPI AI 工具集

tailwind-syntax-state-modifiers

前端与建站

查看项目

更新于 10-15 22:18

技能介绍

用途:本技能用于 Tailwind CSS 中除 hover、focus、active 之外的状态与伪元素变体,包括结构位置、伪元素、表单输入状态、动效偏好、URL 片段、open 与 empty。需与 tailwind-syntax-variants、tailwind-syntax-responsive、tailwind-syntax-dark-mode 配合使用。

主要能力:结构位置变体有 first:、last:、only:、odd:、even:、first-of-type:、last-of-type:、only-of-type:、nth-[...]:、empty:;伪元素变体有 before:、after:、placeholder:、file:、marker:、selection:、first-letter:、first-line:、backdrop:;表单状态有 required:、optional:、valid:、invalid:、user-valid:、user-invalid:、disabled:、enabled:、checked:、indeterminate:、default:、in-range:、out-of-range:、placeholder-shown:、autofill:、read-only:;另有 motion-safe:、motion-reduce:、target:、open:。

使用方式:变体可叠加,如 first:hover:bg-gray-100、md:first:pt-4、dark:invalid:border-red-300。before:/after: 在 Preflight 启用时自动插入 content: '';若关闭 Preflight,必须显式写 content-[''],否则伪元素不渲染。content-[...] 中不能有字面空格,需用下划线或双引号。

限制与差异:user-valid: 与 user-invalid: 仅 v4 提供,v3 需用 :placeholder-shown 技巧或 JS 变通。v4 的 open: 可匹配 details、dialog 与 popover,v3 仅匹配 [open]。invalid: 会在页面加载时即对必填字段生效,v4 建议优先用 user-invalid:。结构变体需注意 first: 统计所有兄弟元素,first-of-type: 只统计同标签。empty: 中空白也算文本。动效应使用 motion-safe: 或提供 motion-reduce: 回退。

适用场景:表单校验样式、列表首尾与奇偶样式、伪元素装饰、无障碍动效控制、锚点高亮、details/dialog/popover 展开态、空列表占位折叠。

资料未提供具体安装命令、收费与平台信息。