Closed afewell closed 1 year ago
I think this is because tailwind internal generates .dark .text-theme-dark-secondary
in the style tag but because it doesn't match any element that matches the selector, it gets treeshaken away. That is unless tailwindcss generates :global(.dark) .text-theme-dark-secondary
but i don't think that's possible.
Looks like this is a known issue (https://github.com/tailwindlabs/tailwindcss/issues/7395 & https://github.com/tailwindlabs/tailwindcss/discussions/2917), for tailwindcss, you might have to stick with inline classes.
Closing as it's a usage issue with tailwindcss. I'll update the astro tailwind docs to provide some info of these edge cases as there have been multiple similar reports recently.
What version of
astro
are you using?1.6.7
Are you using an SSR adapter? If so, which one?
no
What package manager are you using?
npm
What operating system are you using?
linux
Describe the Bug
I am using the astro ink theme, and discovered that the dark theme does not apply correctly unless it is specified in the class and also specified in the html tag.
For example, in the Header.astro file, the home page header specifies both the
header_title
class and thedark:text-theme-dark-secondary
:This seems strange because in the style section of the same Header.astro file, the
header_title
class also specifies the same dark theme:If i remove the
dark:text-theme-dark-secondary
class from the h3 tag, the dark theme no longer works, it has to be specified in both places. I am not a super expert, but it seems to me it should only need to be specified in the style.Also not the astro ink repo package.json specifies packages that are pretty old, so I updated them to the latest, and still have this same issue. Here is my package.json:
Thank you so much!
Link to Minimal Reproducible Example
https://github.com/one-aalam/astro-ink/
Participation