How to Use: Not() in Tailwind.CSS

How to use :not() in tailwind.css?

The answer is in the link to last in the docs, that you shared.

Just add last:border-b-0 to all list items, and it will remove the border-bottom if it is the last-child.

<ul>
  <li
    v-for="(item, index) in items"
    :key="`item-${index}`"
    class="border-solid border-b border-black last:border-b-0"
  >
    Item
  </li>
</ul>

Nested Brackets and Ampersand usage in Tailwind UI examples

What you are seeing is the usage of Tailwind's arbitrary variants feature.

Inside the square brackets is a CSS selector (or media query, I won't be talking about that here), with the ampersand (&) a substitute for the element that the class is being applied to. The nested brackets are attribute selectors, like with standard CSS selectors, as you correctly inferred in your Stacked Overflow question. Underscore is used instead of spaces in a CSS selector.

To give a few examples:

<div class="foo">
  <div class="[.foo_&]:text-white"></div>
</div>

is conceptually like:

<div class="foo">
  <div class="bar"></div>
</div>
<style>
/**
 * .foo .bar
 *   ↓
 * .foo &
 *   ↓
 * .foo_&
 */
.foo .bar {
  color: white;
}
</style>

With .bar now &, since .bar is the element we are applying the class/style to.

Another example:

<div class="foo"></div><div class="[.foo+&]:text-white"></div>

is conceptually like:

<div class="foo"></div><div class="bar"></div>
<style>
/**
 * .foo + .bar
 *   ↓
 * .foo + &
 *   ↓
 * .foo+&
 */
.foo + .bar {
  color: white;
}
</style>

The + grammar in CSS selectors does not strictly need spaces around it, so we can remove them for a more concise arbitrary variant syntax.

<div data-foo class="[&[data-foo]]:text-white"></div>

is conceptually like:

<div data-foo class="bar"></div>
<style>
/**
 * .bar[data-foo]
 *   ↓
 *    &[data-foo]
 */
.bar[data-foo] {
  color: white;
}
</style>

Hopefully this example makes the nested brackets clear.

TailwindCSS - is there a way to not write multiple times the same prefix? like `hover:` for example

like he said @diego in the comment, this is technically not possible with tailwind only.

tailwind framework alternative

maybe you use a tailwind framework like windiCSS https://windicss.org/features/variant-groups.html

that have this functionality:

<div class="hover:(bg-gray-400 font-medium) bg-white font-light"/>

javascript vanilla (simple script)

want tailwind only?

so I think that maybe we can create a simple JS script to solve this problem.

Sample Image

twHover();

function twHover() {
  // get only the elements that have the hover attribute
  let hoverEls = document.querySelectorAll("[data-hover]");

  // loop through the elements that have the hover attribute
  hoverEls.forEach((el) => {
    // we get the string inside the attribute
    // and then make it into a array
    let twHoverClasses = `${el.dataset.hover}`.split(" ");

    // loop through the classes inside the element's attributes
    twHoverClasses.forEach((className) => {
      // add the class for you `hover:className`
      el.classList.add(`hover:${className}`);
    });
  });
}

<script src="https://cdn.tailwindcss.com"></script>

<body class="flex h-screen">
  <!-- original -->
  <button class="m-auto p-4 rounded-md  bg-blue-200 transition hover:bg-blue-400 hover:-translate-y-2 hover:-translate-x-2 hover:scale-110 hover:shadow-2xl hover:shadow-blue-40 hover:text-white">original</button>
  <!-- with script -->
  <button data-hover="bg-blue-400 -translate-y-2 -translate-x-2 scale-110 shadow-2xl shadow-blue-40 text-white" class="m-auto p-4 rounded-md  bg-blue-200 transition">with script</button>
</body>

Tailwind CSS @apply not working with pseudo classes

For those having the same issue this forum helped. Thank you ChenBr!

https://github.com/tailwindlabs/tailwindcss/discussions/6284

Go to settings (File > Preferences > Settings).
Under Text Editor > Files.
Click Add Item.
Enter *.css for the item, and tailwindcss for the value

Css pseudo-class 'after' not working with tailwindcss

I created a working example using Tailwind following your desired result.

You can check the live demo here: stackblitz

The environment is installed following Tailwind official guide.

Hope this will help!

Example:

<div className="flex flex-col gap-6 justify-center items-center">
  <a
    href="#"
    className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-center after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
    aria-current="current item"
  >
    Hover effect center
  </a>
  <a
    href="#"
    className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-left after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
    aria-current="current item"
  >
    Hover effect left
  </a>
  <a
    href="#"
    className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-right after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
    aria-current="current item"
  >
    Hover effect right
  </a>
</div>

How to Use: Not() in Tailwind.CSS