Support for :not(:placeholder-shown)

[aberonni]

Hi! I'd like to be able to do the following with tailwind classes but currently can't find a way to do so:

input:not(:placeholder-shown) ~ label,
    @apply transform -translate-y-3 scale-75;
}

[olets]

Generally speaking, in Tailwind you can do :not() by specifying the default and the special case. Instead of :not(<special case>) you can do <something> placeholder-shown:<opposite of something>.

:not(<special case>) {
  <some style>;
}

you can do

<some style>;

<special case> {
  <oppose of some style>;
}

With JIT mode there's an undocumented peer-placeholder-shown variant that works like a combination of the peer variant https://blog.tailwindcss.com/tailwindcss-2-2#sibling-selector-variants and the placeholder-shown variant https://tailwindcss.com/docs/just-in-time-mode#exhaustive-pseudo-class-support.

[columk1]

This issue was at the top of my Google search results when looking for help with this, so even though the solution is easy to find in the docs now, I'll add it here:

You can use an arbitrary variant for :not() selectors.

[&:not(:placeholder-shown)]:

Or in the specific case of this issue, you can add a peer class to the input and then add a peer-[:not(:placeholder-shown)]:translate-y-3 class to the label.

[UtkarshK95]

To use :not(:placeholder-shown) with Tailwind classes, you can utilize Tailwind’s @apply directive in a custom CSS file. Tailwind doesn’t directly support :not() pseudo-classes, but you can achieve this with custom CSS or JIT mode's support for arbitrary selectors.

Here’s how to set it up:

1. Using Custom CSS with @apply

Add custom CSS with @apply in your CSS file:

/* custom.css */
input:not(:placeholder-shown) ~ label {
  @apply transform -translate-y-3 scale-75;
}

This custom CSS applies Tailwind's transform, -translate-y-3, and scale-75 classes when the :not(:placeholder-shown) selector is matched.

2. Using Arbitrary Variants (if available)

If you’re using a version of Tailwind that supports JIT and arbitrary variants, you can apply styles directly to specific elements with custom modifiers. Here’s how you could add the effect in a label tag based on the state of an input field:

<div class="relative">
  <input type="text" class="peer" placeholder=" " />
  <label class="absolute top-0 left-0 transform scale-100 transition-all peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-not-placeholder-shown:-translate-y-3 peer-not-placeholder-shown:scale-75">
    Label Text
  </label>
</div>

In this example:

• peer is used on the input to let label access its state with peer-* modifiers.
• peer-placeholder-shown:translate-y-0 scale-100 applies when the placeholder is shown.
• peer-not-placeholder-shown:-translate-y-3 scale-75 applies the transformation when the placeholder is hidden.

3. Tailwind Configuration (Optional for Reusability)

If you need to use this effect across multiple inputs and labels, consider creating a custom class in your Tailwind configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addVariant }) {
      addVariant('not-placeholder-shown', '&:not(:placeholder-shown)'); // Adds support for `not-placeholder-shown:`
    },
  ],
};

Then in your HTML:

<input type="text" class="not-placeholder-shown:-translate-y-3 not-placeholder-shown:scale-75" />

This way, you gain more flexibility in using :not(:placeholder-shown) directly with Tailwind classes.

[GibzClt]

You can use not-placeholder-shown
https://tailwindcss.com/docs/hover-focus-and-other-states#not