placeholder-shown variant for input styling
Use the placeholder-shown variant to style an input when the placeholder is shown. Example: placeholder-shown:border-gray-500 applies a gray border to an input displaying its placeholder text.
Tailwind CSS v4 · all subjects
custom-variants
74 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
details-content variant for details element
Use the details-content variant to style the content of a details element. Example: details-content:bg-gray-100 applies a gray background to the content inside a details element.
autofill variant for input styling
Use the autofill variant to style an input when it has been autofilled by the browser. Example: autofill:bg-yellow-200 applies a yellow background to an autofilled input.
read-only variant for input styling
Use the read-only variant to style an input when it is read-only. Example: read-only:bg-gray-100 applies a gray background to a read-only input.
motion-safe and motion-reduce variants in v1.6
Tailwind CSS v1.6 added motion-safe and motion-reduce variants that apply CSS conditionally based on the prefers-reduced-motion media feature. These variants must be explicitly enabled in the variants section of tailwind.config.js for specific utilities.
Combining motion variants with responsive and pseudo-class variants
The motion-safe and motion-reduce variants in v1.6 can be combined with responsive variants and pseudo-class variants. Examples: sm:motion-reduce:translate-y-0, motion-reduce:hover:translate-y-0, and sm:motion-reduce:hover:translate-y-0.
v3.1 enabled variant for form elements
Tailwind CSS v3.1 adds an enabled variant that targets form elements when they are enabled. This allows combining enabled with other variants like hover: hover:enabled:bg-indigo-400 applies hover styles only when the element is enabled, avoiding the need to override styles for disabled elements.
v3.1 optional variant for form elements
Tailwind CSS v3.1 adds an optional variant that targets form elements when they are optional. Can be combined with peer state features, for example peer-optional:hidden hides an element when a sibling form input is optional.
v3.1 prefers-contrast variants
Tailwind CSS v3.1 adds contrast-more and contrast-less variants to target the prefers-contrast media query. These modify the design when a user has requested more or less contrast through operating system accessibility preferences.
Dynamic group-* and peer-* variants with square brackets
You can create custom group-* and peer-* variants on the fly by passing a selector in square brackets, such as group-[.is-published]:block. Use the & character to control where .group or .peer appears in the final selector relative to your custom selector, for example peer-[:nth-of-type(3)_&]:block.
Variant modifiers for nested groups and multiple peers
Variant modifiers allow disambiguation of nested group and peer elements using the syntax group/identifier or peer/identifier. For example: group/sidebar and group/navitem create distinct groups, which are then targeted with group-hover/sidebar:opacity-75 or group-hover/navitem:bg-black/75. This also works with container queries as @container/main and @lg/main:flex.
:has() variant added in v3.4 for parent styling
Tailwind CSS v3.4 added the :has() pseudo-class variant, allowing you to style parent elements based on their children. Example: has-[:checked]:bg-indigo-50 will apply styles to a parent when a checked input is inside it. This variant is supported in all major browsers as of v3.4's release date.
Universal child selector * variant in v3.4
Tailwind CSS v3.4 added a * variant that targets direct children, allowing you to style children from the parent using utility classes. Example: *:rounded-full *:border *:bg-sky-50 will apply those styles to all direct children. It can be composed with other variants like hover:*:underline.
forced-colors variant added in v3.4
Tailwind CSS v3.4 added a forced-colors variant for adjusting styles in forced colors mode. Example: forced-colors:appearance-auto can be used on custom controls to ensure proper appearance in forced colors mode.