在顺风中一次将效果应用于多个伪类

Question

I am looking for a good shorthand to apply the same effect to multiple pseudo classes in tailwind.

For example, I may want to apply a blue background to both:hover and:focus states on a div.

Currently I'd have to write the following:

<div className="hover:bg-blue focus:bg-blue>Text<div>

OR, i could use apply to build out a custom class like this:

.hover-focus-bg-blue {
  @apply hover:bg-blue focus:bg-blue
}

But neither of these are great options when i have to apply complex states (in my current project I need to cover 11 states on one element (rest/hover/active/focus/focus-visible/focus-visible && hover etc).

The apply method only saves code if there are multiple uses of it.

What I would like to see is something like:

<div className="[hover, focus]:bg-blue">Text</div>

Does anyone know of some syntax like that? Can't find it anywhere.

Answer 1

This is a question that is asked frequently. Mostly it's about grouping classes into one grouped syntax (for example, hover:(bg-red-500 border-2) .

This is the answer I received after searching for a solution to this question. In short, this functionality doesn't exist for now. Even though this answer refers to the grouping of utilities into one selector, the same logic should apply to the grouping of pseudo-selectors:

The Tailwind maintainers did look at this feature at one point but ultimately decided to put it on hold for now. See this Twitter thread: https://twitter.com/adamwathan/status/1461519820411789314

So, as you can see from the answer and the Twitter feed, it's currently on hold. In the Twitter thread, the developers were testing this feature regarding performance, and it looks like this feature, at its current state duplicates CSS compared to using individual utilities:

So we did a test where we converted every single Tailwind UI template (over 500 files) to use the grouped syntax to see how much bandwidth grouping would save you when serving HTML.

This makes sense when you think about it, because using the grouped syntax (like focus:(font-bold,underline) ) leads to fewer repeated symbols in the document, because there are now more unique class names.

Using the non-grouped syntax, every instance of focus:font-bold can be compressed out and replaced with a short placeholder (say %). Using grouped syntax, focus:font-bold and focus:(font-bold,underline) can't be compressed out, because they are no longer the same. Plot twist: After compression, the files are actually bigger , not smaller!

Bottom line:

So the takeaway here is that although the grouped syntax looks like less code when you're authoring it, it actually creates both a bigger CSS file and a bigger HTML file in production, making it a very black and white performance anti-pattern.

It's nicer to write though, and the performance cost isn't a huge one, so still a chance we develop it further just for the developer experience for the people who like it. But admittedly hesitant to encourage anything that's bad for performance.

Answer 2

I recently provided an answer in another question for grouping classes here but your question is a bit different so here's an improved version to the previous function:

const pseudoJoin = (selectors, str) => {
  let result = "";
  selectors.forEach(selector=> result+=selector+":"+str.split(" ").join(" "+selector+":")+" ")
  return result;
}

Now you can call it anywhere like:

<div className=`${pseudoJoin(['hover','focus'],"classes you want on hover & focus")} some more classes here ${pseudoJoin(['focus'],"classes when focused")}`>Hello World!</div>

Or when you are using classnames framework:

<div className={ classnames(
   pseudoJoin(['hover','focused'], "classes you want on hover & focused"),
   "Other classes here",
   pseudoJoin(['focused'], "classes when focused")
)}>Hello World!</div>

For making it shorter even further, you can replace pseudoJoin with a shorter name because I couldn't think of a better name.

Answer 3

My previous answer was a lightweight, fast function, but this one doesn't focus on perfomance but rather accounts for ease.

const pseudoJoin = (str) => {
  let result= [];
  let storedvar;
  str=str.split(" ");

  str.forEach(function(s,i){
      if((/\:\(/).test(s)) storedvar=i;
      if(!storedvar) result.push(s);
      if(s.endsWith(")")){
          result.push(str.slice(storedvar,i+1).join(" "))
          storedvar=null;
      }
  })
  
  str=[]
  result.forEach(function(s,i){
    if((/\w\:/).test(s)){
      storedvar = s.split(/\:(.*)/s);
      
      if(s.endsWith(")")){
        storedvar[1].slice(1,-1).split(" ").forEach(function(t){
          storedvar[0].split("+").forEach(function(x){str.push(x+":"+t)})
        })
      } else {
        storedvar[0].split("+").forEach(function(x){
          str.push(x+":"+storedvar[1])
        })
      }
    } else {
      str.push(s)
    }
  })
  return str.join(" ");
}

Here's example of how to use the new function:

pseudoJoin("hover:text-black hover+focus+active:(bg-white margin-[3.2rem] underline) before+after:content-[Hello_\+_I_am_groot] sm:hidden"));