tailwind-syntax-state-modifiers

name	tailwind-syntax-state-modifiers
description	Use when styling element states (form input validity, checked, disabled, required, placeholder visibility), structural positions (first, last, even, odd, nth-child), pseudo-elements (before, after, placeholder, file, marker, selection, first-letter), or motion-preference (motion-safe, motion-reduce), or when wiring a Tailwind class to a CSS pseudo-element with the content utility. Prevents the empty-before-pseudo trap (the ::before disappears when Preflight is disabled), the structural-variant scope mistake (first: applied to grandchildren when it should be on direct children), the placeholder-styling mistake (placeholder: on the wrapper instead of the input), the form-state target mistake (invalid: triggers before user input via :user-invalid in v4), and the dialog/details open-state confusion (open: works for both via the :is() compound). Covers structural pseudo-class variants, all pseudo-element variants, the content-[...] utility for ::before and ::after, motion-preference media query variants, the full form-state variant set, and target/open variants. Keywords: tailwind state, first-child, last-child, nth-child, odd, even, before, after, placeholder, content-[], content utility, motion-safe, motion-reduce, prefers-reduced-motion, required, valid, invalid, user-valid, user-invalid, disabled, checked, indeterminate, autofill, read-only, placeholder-shown, in-range, out-of-range, target, open, details open, dialog open, empty, first-letter, first-line, marker, selection, backdrop, file-selector-button, my ::before is not showing, content empty string, preflight disabled, why is first: not working, how do I style placeholder text, how do I style disabled input, how to style checked checkbox, pseudo element variant, structural variant.
license	MIT
compatibility	Designed for Claude Code. Requires Tailwind CSS v3.4 or v4.0+.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Tailwind CSS State Modifiers

This skill covers variants that target CSS states and pseudo-elements other than interaction states (hover, focus, active). Use it together with :

• tailwind-syntax-variants : full variant grammar including hover/focus, group/peer, attribute, and arbitrary variants
• tailwind-syntax-responsive : breakpoint and container-query variants
• tailwind-syntax-dark-mode : the dark: variant configuration

Quick Reference : Variant Categories

Category	Examples
Structural position	first:, last:, only:, odd:, even:, first-of-type:, last-of-type:, only-of-type:, nth-[...]:, empty:
Pseudo-elements	before:, after:, placeholder:, file:, marker:, selection:, first-letter:, first-line:, backdrop:
Motion preference	motion-safe:, motion-reduce:
Form input state	required:, optional:, valid:, invalid:, user-valid:, user-invalid:, disabled:, enabled:, checked:, indeterminate:, default:, in-range:, out-of-range:, placeholder-shown:, autofill:, read-only:
Target / Open	target:, open:

All variants in this skill are SHARED between v3 and v4 unless flagged otherwise. The one divergence : and are v4-only (CSS-native, gated on browser support in v3).