dark: not working in @apply (tailwind 2.0.1)

[bhatsudo]

I have some markdown styling in a separate .css file. After upgrading to Tailwind 2.0, I added some dark: for @apply's like so:

.markdown h2 {
  @apply text-3xl text-gray-800 dark:text-gray-200 mt-12 mb-4 leading-snug;
}

But, the text staystext-gray-800color and is not changed to text-gray-200 with mode switching.

Tailwind version: 2.0.1
@tailwind/typography: 0.3.1
Tailwind.config.json has darkMode: 'class' as I am using a custom button to switch to dark mode.

I am not sure if some additional configuration/imports are necessary or it is not yet implemented to work with @apply.

Kindly support. Thanks!

[simonswiss]

Hey! 👋

Are you sure that the dark class is being applied on a parent element with your custom button implementation? Because what you're describing should definitely work. 👍

Here's a Tailwind Play example that shows both the text-gray-800 and text-gray-200 styling based on a parent wrapper with a dark class:

https://play.tailwindcss.com/RpfeDooXVs

Hope it helps you troubleshoot!

[kirkbushell]

I'm not seeing that working, actually - even when dark mode is enabled.

[shuangbofu]

When I use a nested CSS, the dark mod in the nested internal CSS does not work.

[bhatsudo]

Hello,

Thanks a lot for the response.
I was doing it the exact same way as your example, but in markdown-styles.module.css and I am importing and using it as className={markdownStyles['markdown']}.

I copied the same markdown styles to global.css file, and it works.

What is the right way to do it? and why does it not work in module.css file?

[Jak3b0]

I too have the same issue. I am using Tailwind in an Angular 11 application and when using @apply dark:bg-gray-700 inside the component's css file, the dark variant is not applied whereas if I set dark:bg-gray-700 directly in the component's html file, it's working.

Note that this seems to only apply to the dark variant. Other variants are working fine.

[ncovercash]

Same issue here

[tim-corley]

Having the same issue here. I am setting dark mode manually via the class strategy (class is being applied to the html tag) and then
attempting to apply gradientColorStops to the body element (one for light & one for dark) but getting this error:

Syntax error: myprojectpath/styles/index.css The `dark:bg-gradient-to-b` class does not exist

Here is my index.css:

@tailwind components;

body {
  @apply bg-gradient-to-b from-green-100 to-blue-400 dark:bg-gradient-to-b from-indigo-900 to-gray-500 h-screen;
}

Using bg-gradient-to-b from-green-100 to-blue-400 dark:bg-gradient-to-b from-indigo-900 to-gray-500 in the component itself does not trigger the syntax error but the gradientColorStop utility does not take effect in dark. The IDE is showing the following warning:

'from-blue-500' applies the same CSS properties as 'from-red-500'.(cssConflict)

this approach is working correctly for the other default utilities (with dark) - just seeing the issue with gradientColorStop.

[felixbeer]

I too have the same issue. I am using Tailwind in an Angular 11 application and when using @apply dark:bg-gray-700 inside the component's css file, the dark variant is not applied whereas if I set dark:bg-gray-700 directly in the component's html file, it's working.

Note that this seems to only apply to the dark variant. Other variants are working fine.

@Jak3b0 Have you got a fix for that with Angular?

[Rgeelen]

@felixbeer I believe the issues exists because of the CSS scope. You can change the ViewEncapsulation of the component. This makes the CSS of the component global.

@Component({
  encapsulation: ViewEncapsulation.None,
})

[ncovercash]

I've been able to make it work using nested prefixes (postcss-nested does this if you aren't using Sass or similar) which makes it super easy to something as simple as:

@layer base {
	body {
		@apply bg-white;

		&.dark {
			@apply bg-grey-800;
		}
	}
}

[ncovercash]

Certainly a workaround, but gets it done in a non-ugly way in the meantime.

[adharshmk96]

I'm also experiencing the issue with my project.

Here's an elaborate example of the issue

The following code works.

index.js ( main js )

import 'global.css'
....
<div className="container">
 <Random Element/>
</div>

global.css

.container {
  @apply bg-black dark:bg-white;
}

Please note that this is working in index page or the main page only

The following code doesn't work.

randomElement.js

import styles from './element.module.css'
...
<div className={styles.elem}>
 Random Content
</div>

element.module.css

.elem {
  @apply bg-white dark:bg-black;
}

Please note that this is in another folder /components and used in main js. but this is not working.

PS: I tried by adding the following as well and it didn't work. ( I'm using next js )

randomElement.js

<div className={"dark"}>
  <div className={styles.elem}>
     Random Content
  </div>
</div>

[adharshmk96]

I make it work by using the following in my project right now.

 <div className={`${styles.elem} dark:bg-black`}>

[fredericrous]

hi @adharshmk96 , are you using nextjs? I believe so. I'm facing the same issue. I opened an issue there vercel/next.js#22439
EDIT: this has been moved to a discussion here => vercel/next.js#22461

[njarraud]

Same issue as well. dark: doesn't work in imported modules with nextjs.

[yogiindia]

I am experiencing the same issue with svelte. In media mode, its working but not with class mode. If I am applying direct class, then it works but not with @apply. Applying direct class is not a problem, that can resolved, but when using nested hover I need to use @apply.

.item:hover, .item.active, .item:hover div.details, .item.active div.details { @apply bg-blue-200 dark:bg-navy-500; }

[asif-mahmud]

dark: doesn't work with css-modules in projects created by create-react-app either. i have been facing this. looks like the class has to be something like this - .dark .dark\: in order for it to work. but @apply doesn't add those classes/properties when used with css-modules. didn't try with global css. i am currently using className="" directly for now. sometimes along with classnames library.

[jessycormier]

This was resolved for me by reviewing this page (https://tailwindcss.com/docs/dark-mode) and noticing that Tailwind will only activate darkMode when the tailwind.config has it enabled in some way. Without it enabled in the tailwind.config file there is no dark:xxxxx that can be found and thus an error output..

[asif-mahmud]

i have enabled it using darkMode: 'class', but it didnt work. did i miss anything else ? i came to the above conclusion after checking out the css.

[felixcatto]

this can fix it
#3258 (comment)

[ar4hc]

Svelte component example with the same issue:
(some stuff omitted for brevity..)

<script>
  $: highlightMe = $page.path && $page.path.includes(url) && selectedNav === label ;
</script>

<a class="
          text-black
          hover:bg-hover
          dark:text-white
          dark:hover:bg-dark-hover
          dark:hover:text-grey
          "
   class:selected={highlightMe}
   href="{url}">
  <span class="mx-4 font-medium">{label}</span>
</a>

<style>
    .selected {
        @apply dark:bg-dark bg-light 
    }
</style>

[asif-mahmud]

hi, this fragments code too much. just to style a tag you have to put classes in 3 places in your source. may become a headache for maintenance.

[chongruei]

any update?

[erksmaas]

We're unable to get this working either thus far

[erksmaas]

Actually, we're finding it does work w/Angular and scss, but only if you turn encapsulation off:

encapsulation: ViewEncapsulation.None

Preferably this would also work when using encapsulation. Should we open a new discussion about that specifically?

[justingolden21]

Having trouble in 2022 with using the @apply directive for a dark: class in svelte. Works inline such as class="dark: but not with @apply

[tqwewe]

@justingolden21 did you manage to get it working in the end? I'm also struggling to have it work with svelte.

[justingolden21]

I think it worked inline as a class, just not with @apply. But I don't have anything to add, sorry.

[syedgufran1997]

Hi facing the same as dark: with @apply works only in global import App.scss but not with the imported component.module.scss.
Let us know if there is any way we can do as many of them are facing this issue..!
Using React typescript

[afraser]

For folks using css-modules who land here: #3258

[MarkoCen]

I am using Next.js, and seems like dark: variant does not work in a scss module file

// button.module.scss

.button-container {
  button {
    @apply bg-gray-100 dark:bg-gray-800;
  }
}

import styles from './button.module.scss';

const Button = () => {
  return <div className={styles.buttonContainer}>
    <button>{...}</button>
  </div>
}

[email protected]
[email protected]

[ankitsinghvisionias]

I'm using nested module dark: is working on global.scss but not working inside module.scss

[maxkrv]

I'm using nested module dark: is working on global.scss but not working inside module.scss

Same

[fjcero]

#3258

[Tosinkoa]

Hello, mine is not working at all. Whenever I use dark: in my code, it's not working.

[nextrapi]

I believe its formatter that is messing up my global.css file, which throws the following error:

Syntax error: frontend\src\styles\globals.css The `dark:` class does not exist. If `dark:` is a custom class, make sure it is defined within a `@layer` directive.

The issue is the space between dark: and the classnames. WRONG:

CORRECT:

the tailwind intellisense is also deceiving as it looks like the space is not really there:

[EvilasioAnisio]

Currently facing the same issues working with tailwind and astro. Even safelisting doesn't solve the problem

[chriswep]

@bhatsudo would you mind re-opening this question or even convert it to an issue? looks like a lot of people have this issue still. i also just stumbled upon this in sveltekit (dark classes not being applied when used with @apply)

[mihirpaldhikar]

I was facing the same issue in Next.JS too. But darkMode: "class" in tailwind.config.js fixed the issue. I think the dark class is not being generated by the tailwind if we don't explicitly tell to make dark mode strictly with the classes insted of media.

[dzonerzy]

I'm facing the same issue, using astro + svelte + tailwindcss dark only works if parent element have dark class but don't work if html element have it

[itsjavi]

I was having the same issue with Next 13.3 and TailwindCSS 3.3,
but I fixed it by explicitly setting the dark class selector in the tailwind config:

before:

darkMode: 'class' // "dark:" classes styles not applied

after:

darkMode: ['class', "[class~='dark']"] // "dark:*" classes working!

[haneulcho]

Works like a charm! 👍

[rafaelpoa]

Man, may God bless you for bringing us this solution! Thanks.

[oroalej]

Thanks dude.

[luisfrocha]

I just tried this this morning and it didn't work. Using Vue 3.3.4, Vite 4.4.10, and Tailwind 3.3.3

[Filigs]

worked for me aswell!!

using "tailwindcss": "^3.4.1"

[ImadMachi]

I am having the same issue with Nextjs 13.3

[cuboost]

I found out that when I saved my global.css file in Next.js, the formatter that came with VS Code would automatically format my code and add a space after dark:, which resulted in an error in the @apply section. That is why everything works fine in tailwind labs, since they don't have the VS Code format on save enabled.

There is two ways that I found to fix that:

1. One way is to tweak the VS Code CSS formatter settings, but the only thing you can do to make it work is to disable it completely.
2. Another way that works for me is to install another formatter, I installed Prettier and it started working...

[wsw70]

Thanks for that hint.

For the ones like me searching how to change the default formatter: Ctrl+P, then >, search Format Document With ... and Configure default formatter

[justingolden21]

I will usually do something like this (in sveltekit)

<style lang="postcss">
  .mything {
    @apply bg-red-100;
  }
  :global(.dark) .mything {
    @apply bg-red-900;
  }
</style>

But of course this is a lot messier than just using @apply on a dark: class and it scales horrifically.

[TheoIsDumb]

thank you for this, sir! God bless you!

[felixcatto]

There is a problem with cssModules, and especially with css-loader, because it rewrite .dark class applied by tailwind to version with hash. Solution - change hash algorithm

webpack.config.js

import crypto from 'crypto';

const generateScopedName = (localName, resourcePath) => {
  if (localName === 'dark') return 'dark'; // <- Do not modify 'dark' class
  const getHash = value => crypto.createHash('sha256').update(value).digest('hex');
  const hash = getHash(`${resourcePath}${localName}`).slice(0, 4);
  return `${localName}--${hash}`;
};

export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: {
                getLocalIdent: (context, _, localName) =>
                  generateScopedName(localName, context.resourcePath),
              },
            },
          },
        ],
      },
    ],
  },
};

[imprisonedmind]

Hi,

Also ran into this issue this week when upgrading tailwind. This used to work in globabls.css and now all of a sudden not.

::-webkit-scrollbar-thumb {
    border-radius: 100vh;
    z-index: 50 !important;
    @apply bg-gray-300 dark:bg-dark-quinary;
}

Package

"dependencies": {
    "@apollo/client": "^3.7.16",
    "@heroicons/react": "^2.0.18",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.6",
    "@mui/x-date-pickers": "^5.0.20",
    "apollo-upload-client": "^17.0.0",
    "axios": "^1.4.0",
    "dayjs": "^1.11.8",
    "formik": "^2.4.2",
    "framer-motion": "^4.1.17",
    "graphql": "^15.8.0",
    "js-cookie": "^3.0.5",
    "js-file-download": "^0.4.12",
    "luxon": "^2.5.2",
    "moment": "^2.29.4",
    "next": "^12.3.4",
    "next-auth": "^3.29.10",
    "next-themes": "^0.2.1",
    "npm-check-updates": "^16.10.13",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-chartjs-2": "^4.3.1",
    "react-cookie": "^4.1.1",
    "react-dom": "^17.0.2",
    "react-hotjar": "^4.0.0",
    "react-hotkeys-hook": "^3.4.7",
    "sharp": "^0.32.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "eslint": "^8.43.0",
    "eslint-config-next": "^12.3.4",
    "postcss": "^8.4.24",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.3.2"
  }

[imprisonedmind]

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 100vh;
    z-index: 50 !important;
    @apply bg-gray-300;
}

.dark ::-webkit-scrollbar-thumb{
    @apply bg-dark-quaternary;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: theme('colors.gray.500');
    cursor: grabbing;
    @apply bg-dark-secondary
}

.dark ::-webkit-scrollbar-thumb:hover{
    @apply bg-dark-quinary;
}

This works^^

[chrissound]

Seeing as a lot of people saying the darkMode: "class" fixes it for them, does this not change the way dark mode functions (it would have to be toggled manually as opposed to being automatically detected)?