Fix issue where dark mode experiment won't work if user has plugins array in config

[adamwathan]

Fixes #2319.

[brandonpittman]

@adamwathan I'm guessing this is Tailwind UI's fault, but including the UI plugin kills the dark variants. It’s because Tailwind UI sets a whole bunch of variants for you. I saw the same issue in my tailwindcss-plugin-fancy plugin where including @tailwindcss/ui overwrote variants I myself was trying to include. I'd be happy to remove the UI plugin, but I'm relying on the colored outline, solid shadow outlines, and the cool-gray colors.

[zaydek]

@brandonpittman I ran into the same issue. I can’t easily give up the Tailwind UI plugin right now because I’m relying on too many classes generated by it to simply remove it. That being said, I found this comment to be useful.

Instead of using the experimental dark mode support that (as of 0.8.3 for me) still breaks, this is working as expected and should be easy enough to adapt to a class if needed:

module.exports = {
  // ...
  theme: {
    screens: {
      // ...

      "dark": {
        "raw": "(prefers-color-scheme: dark)",
      },
    },
  },
  // ...
}

[brandonpittman]

@codex-zaydek I wound up requiring Tailwind UI and just grabbed the boxShadow and color bits I needed.

[adamwathan]

@codex-zaydek What error are you seeing when trying to enable dark mode with the Tailwind UI plugin? This builds no problem for me:

module.exports = {
  purge: ['./index.html'],
  future: 'all',
  experimental: 'all',
  plugins: [require('@tailwindcss/ui')],
}

[zaydek]

@adamwathan Hey Adam. It wasn’t an error; was missing classes. Try this config:

module.exports = {
  dark: "media",
  experimental: {
    darkModeVariant: true,
  },
  plugins: [
    require("@tailwindcss/ui"),
  ],
}

This curiously generated no dark:bg-* classes for me. I tried searching using this regex: \.dark\\\:bg-* and tried using classes like dark:bg-green-500 but nada.

I’m on tailwindcss@^1.8.3 and @tailwindcss/ui@^0.5.0 (from yarn.lock). Using the legacy dark mode technique @brandonpittman mentioned still works for me so I’m just using that for now.

Edit: I created this Gist to help you debug: https://gist.github.com/codex-zaydek/1538a0b6d34db7f8556b58a24b8c2b7b. Includes the raw output for reference.

Based on the presence of .pb-full in that output file, I can confirm Tailwind UI is working, since that class does not come with vanilla Tailwind CSS.

[brandonpittman]

⬆️ Just as I said.

The big issue is that there is no way to extend variants like you can with a theme. You have to just overwrite them. I’m guessing the PR from yesterday might actually solve this issue?

[adamwathan]

Yep yep yep I understand now, thanks! Will try to push out a fix today, will require a new version of the Tailwind UI plugin.

[zaydek]

Awesome — thanks! 🔥

[zaydek]

@adamwathan This config seems to fix it:

module.exports = {
  dark: "class",
  experimental: {
    darkModeVariant: true,
  },
  plugins: [
    require("@tailwindcss/ui"),
  ],
  variants: {
    // https://github.com/tailwindlabs/tailwindcss/releases#dark-mode-experimental
    backgroundColor: ({ after }) => after(["dark"]),
    borderColor: ({ after }) => after(["dark"]),
    divideColor: ({ after }) => after(["dark"]),
    gradientColorStops: ({ after }) => after(["dark"]),
    placeholderColor: ({ after }) => after(["dark"]),
    textColor: ({ after }) => after(["dark"]),
  },
}

Basically I copied over the default variants for 1.8.3 (not needed) and imported them, and then specifically for the dark mode variants, I added dark as an argument to the new after higher-order function.

cc @brandonpittman

[adamwathan]

Can you guys test out @tailwindcss/ui@0.6.0 and see if it works for you? Should solve this problem, but it's only compatible with Tailwind v1.8+.

[zaydek]

Sure. Will test this now! Thank you.

[zaydek]

Hey @adamwathan, still broken for my use-case. This is an improvement but it’s not working 100% as expected.

Here is the essence of my working config:

module.exports = {
  dark: "class",
  experimental: {
    darkModeVariant: true,
  },
  plugins: [
    require("@tailwindcss/ui"),
  ],
  variants: {
    opacity: ({ after }) => after(["group-hover", "group-focus"]),
    scale: ({ after }) => after(["group-hover", "group-focus"]),
    textColor: ({ after }) => after(["group-hover", "group-focus"]),
  },
}

And my code basically looks like this: ... dark:group-hover:text-purple-50 .... So I searched my generated Tailwind CSS file for this regex: dark\\\:group-hover\\\:text-purple-50 and I got this:

.dark .dark\:group:hover .dark .dark\:group-hover\:text-purple-50 {
  --text-opacity: 1;
  color: #f6f5ff;
  color: rgba(246, 245, 255, var(--text-opacity));
}

It looks like this almost works but the presence of the second .dark class, before .dark\:group-hover\:text-purple-50 is probably breaking the selector chain, which no-ops this CSS. I am getting the dark:bg-* classes now — thank you, but this is still failing for my group-hover CSS. Just to be clear, I’m not getting any warnings.

Let me know if I’m doing something wrong as well.

[adamwathan]

Ah this is actually a straight up bug, looks like the dark mode stuff does not play nicely with the class strategy at the moment. I'll open an issue for this and work on a fix, thank you!

[zaydek]

You bet. Feel free to follow-up with me for testing with a real-world app. 👍

[brandonpittman]

@adamwathan @codex-zaydek The @tailwindcss/ui update fixed the issue and the new variant extension feature solved the issue I had with variants and tailwindcss-plugin-fancy! 🌶