dark theme font not recognized unless specified both in class and html tag

afewell commented 1 year ago

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 the dark:text-theme-dark-secondary:

        <h3 class="header__title dark:text-theme-dark-secondary">
            <a href="">{ SITE.name }</a>
        </h3>

This seems strange because in the style section of the same Header.astro file, the header_title class also specifies the same dark theme:

    .header__title {
        @apply text-4xl font-extrabold md:text-5xl text-theme-secondary dark:text-theme-dark-secondary
    }

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:

{
  "name": "astro-ink",
  "version": "1.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "check": "astro check",
    "postbuild": "node ./scripts/search/prepare-index.js",
    "preview": "astro preview"
  },
  "devDependencies": {
    "@astrojs/mdx": "^0.11.1",
    "@astrojs/rss": "^1.0.0",
    "@astrojs/sitemap": "^1.0.0",
    "@astrojs/svelte": "^1.0.0",
    "@astrojs/tailwind": "^2.1.2",
    "@fontsource/fira-sans": "^4.5.9",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.5.0",
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tailwindcss/typography": "^0.5.2",
    "@types/node": "^18.7.14",
    "astro": "^1.1.5",
    "globby": "^13.1.2",
    "gray-matter": "^4.0.3",
    "lunr": "^2.3.9",
    "mdx": "^0.2.3",
    "svelte": "^3.50.0",
    "tailwindcss": "^3.0.24",
    "typescript": "^4.3.5"
  }
}

Thank you so much!

Link to Minimal Reproducible Example

https://github.com/one-aalam/astro-ink/

Participation

[X] I am willing to submit a pull request for this issue.

bluwy commented 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.

bluwy commented 1 year ago

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.

withastro / astro