BlankParticle / tailwind-plugin-realtime-colors

A Tailwind CSS plugin that allows you to load colors from URL of Realtime Colors
https://www.npmjs.com/package/tailwind-plugin-realtime-colors
MIT License
7 stars 2 forks source link

Dark theme variants not included in the stylesheet! #6

Closed SabirKhanek closed 1 month ago

SabirKhanek commented 1 month ago

Hi,

First, I want to thank you for the incredible work on the tailwind-plugin-realtime-colors library. It has been very useful!

I've encountered an issue where the dark theme variants are not being included in the generated stylesheet. Specifically, I would like the following CSS to be included:

:root {
  /* light theme variables */
}

.dark {
  /* dark theme variables */
}

Steps to Reproduce:

  1. Install and configure the plugin as per the documentation.
  2. Enable dark mode (adding dark class in the body).

Expected Behavior: The generated stylesheet should include dark theme variants within a .dark class.

Actual Behavior: The dark theme variants are missing from the stylesheet.

Configuration:

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        poppins: "var(--font-poppins)",
        inter: "var(--font-inter)",
        montserrat: "var(--font-montserrat)",
      },
      colors: {
        contrast: "var(--background-contrast)",
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        text: "var(--text)",
        background: "var(--background)"
      },
      screens: {
        ml: "425px",
        xsm: "375px",
      },
    },
  },
  darkMode: "class",
  plugins: [
    realtimeColors(
      "https://www.realtimecolors.com/?colors=140507-fefbfb-9a00bd-fab7f0-ffa600&fonts=Inter-Poppins",
      {
        theme: true,
        shades: ["text", "accent", "background", "primary", "secondary"],
      }
    ),
  ],
};

Thank you for your assistance!

BlankParticle commented 1 month ago

I think it is being purged out, you should add safelist: ["dark"] to your tailwind config, that should fix it

SabirKhanek commented 1 month ago

Thank you, it solved my issue. One more thing I did was adding the 'dark' class to the instead of the .