Closed J61n closed 1 year ago
Looks like an issue with styled-component 6.
If you install styled-components@5.3.6 and @babel/core@7.21.0, the hover modifier works as expected.
Downgrading styled components and installing babel core as mentioned indeed solves the problem. It also doesn't seem to cause any problems with server-side rendering.
The CSS-in-JS Guide by Next.js mentioned "styled-components@v6.0.0-rc.1
or greater", why I supposed that Next.js 13 with app router requires styled components 6.
It seems like the problem I mentioned in the beginning still with v6.0.0-rc.3
.
I just figured out, that the problem can also be solved by setting sassyPseudo: true
in the twin config as described in the docs.
Interesting stuff and well done finding a fix. Looks like the new styled-components requires the pesudo selector now. May have to look at changing the default once a proper release is out.
I have set up a project with Twin, Next.js (App Router), Styled Components and Typescript by following these guides:
788.
When using modifiers such as
hover:
oractive:
, I noticed that Tailwind classes with these modifiers have no effect. Using the browser tools, I found out that the generated styles do not have the proper selectors. Mind the space between the class and the pseudo-class:In fact, when I nest elements inside the component that the styles apply to, I see the expected behavor on these nested elements. For example, a button that has the tailwind classes
bg-blue-500
andhover:bg-blue-400
does not change its background color when hovered. However, a nestedcode
element inside that button changes its background color tobg-blue-400
when the containing button is hovered:I reproduced this behavior in this repository.