question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Missing support for stacking pseudo classes

See original GitHub issue

Environment:

  • TailwindCSS version: ^3.0.15
  • tailwindcss-classnames version: ^3.0.2
  • Node.js version: 14.17

Current Behavior

Using a multiple pseudo classes together throws a type error. In this case, I attempted to combine hover:… and active:…. image

Expected Behavior

I should be able to stack pseudo classes in this way with no type-errors.

  • I’ve searched the issues list and this is not a duplicate
  • I’m willing to fix this error

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
bstrocommented, Jan 20, 2022

also p.s. thanks for building this, i’m finding it super helpful. 💚

1reaction
muhammadsammycommented, Jan 19, 2022

yes, you can cast the string to TTailwindString type:

backgroundColor('bg-gray-100', 'active:hover:bg-gray-200' as TTailwindString)
Read more comments on GitHub >

github_iconTop Results From Across the Web

Why is a pseudo-class so called? - Stack Overflow
A pseudo class is "not quite a real one" as the user agent defines when and/or how much content qualifies (like :hover ,...
Read more >
Pseudo-classes - CSS: Cascading Style Sheets | MDN
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class...
Read more >
An Ultimate Guide To CSS Pseudo Classes And Pseudo ...
CSS pseudo-classes and pseudo-elements can certainly be a handful. This guide will help you to learn about all the things you need to...
Read more >
Pseudo-classes - web.dev
Pseudo -classes let you apply CSS based on state changes. This means that your design can react to user input such as an...
Read more >
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
Rather than insert extra non-semantic markup to clear the float on container elements, we can use a pseudo-element to do that for us....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found