Giters

RyanClementsHax / tailwindcss-themer

An unopinionated, scalable, tailwindcss theming solution

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Theme variant classes aren't generated when using Tailwind's `important` config.

tupton opened this issue · comments

commented

Describe the bug

In certain situations, theme variant selectors do not work in combination with the important config in Tailwind.

We are currently migrating our components to be styled with Tailwind, and we use important to ensure that Tailwind styles take effect over our pre-existing style system. We use the selector strategy which prepends generated styles with the given selector (id) to increase specificity.

We have a default theme and a theme called legacy. The legacy theme is enabled by toggling a class on the document body; this behavior is encapsulated in a theme switcher component. The string legacy appears in this component is part of the configured Tailwind content.

Using legacy:text-red-50 does not compile the relevant styles for the legacy theme. A workaround for this is to add a wrapper element with a class of legacy around the elements that use the variant, but that defeats the purpose of a theme switcher component that just works by adding and removing classes from <body>.

Removing the important config from Tailwind seems to fix the issue.

Your minimal, reproducible example

Unable to get the linked examples to run in Codesandbox.

Steps to reproduce

  1. Add an important config with a selector to tailwind.config.js.
  2. Add a default theme and a new theme.
  3. Use a theme variant classname e.g. themeName:text-red-50.

Expected behavior

I expect that when the themeName theme is enabled (that is, when a root element has a class of themeName) the text-red-50 class will take effect.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Mac OS, Chrome

tailwindcss-themer version

2.0.3

Additional context

No response

commented

Hiya! Thanks for opening this issue. I followed the reproduction steps locally and I was unable to reproduce this. The classes worked fine for me.

Would you mind creating a minimal reproduction repo so I could dig in further?

commented

This issue has been automatically marked stale because it it received no activity for 60 days. If you wish to keep this open, please leave a comment. Thanks.

commented

This issue has been automatically closed because it received no activity for 60 days. If you think this was closed by accident, please leave a comment. Thanks.