Dark classes are not being recognized by the style system #11979

ezeamin · 2023-09-11T12:19:44Z

ezeamin
Sep 11, 2023

Hi! I'm using daisyUI along Tailwind CSS for styling my NextJS 13 project, with next-themes that toggles data-theme attr at root level (<html>).

I'm following Tailwind's guide for dark mode classes, using dark:[some_style], but it won't apply that style. My guess? Something wrong with the tailwind.config.ts file, but I've checked it 12 times already, changed whatever I found, and nothing helps.

I've tried taking this to a codesandbox env, and it did work fine, and I find no difference really between my code and configs with the sandbox I mounted. Any help is appretiated.

My tailwind.config.ts file:

/** @type {import('tailwindcss').Config} */
import daisyuiLib from 'daisyui';
import daisyuiTheme from 'daisyui/src/theming/themes';

export const content = ['./src/**/*.{js,ts,jsx,tsx,mdx}'];
export const darkMode = ['class', '[data-theme="dark"]'];
export const theme = {
  extend: {
    backgroundImage: {
      'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
      'gradient-conic':
        'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
    },
    boxShadow: {
      'center-blue': '0 0 10px 1px rgba(52, 55, 255, 0.2)',
    },
    colors: {
      accent: '#3fa9a6',
      'base-100': '#345ca8',
      error: '#dc2828',
      info: '#6366f1',
      neutral: '#3b8bc4',
      primary: '#3f75a8',
      secondary: '#723fa8',
      success: '#16a249',
      warning: '#fbbf24',
    },
  },
};
export const daisyui = {
  themes: [
    {
      light: {
        ...daisyuiTheme['[data-theme=light]'],
        primary: '#3f75a8',
        primaryContent: '#ffffff',
        secondary: '#723fa8',
        accent: '#3fa8a6',
        neutral: '#3b8bc4',
        'base-100': '#345ca8',
        info: '#6366f1',
        success: '#16a249',
        warning: '#fbbf24',
        error: '#dc2828',
        '.bg-skeleton': {
          'background-color': '#bcbdbe',
        },
      },
      dark: {
        ...daisyuiTheme['[data-theme=dark]'],
        primary: '#3f75a8',
        secondary: '#723fa8',
        accent: '#3fa8a6',
        neutral: '#3b8bc4',
        'base-100': '#345ca8',
        info: '#6366f1',
        success: '#16a249',
        warning: '#fbbf24',
        error: '#dc2828',
        '.bg-skeleton': {
          'background-color': '#2d3641',
        },
      },
    },
  ],
};
export const plugins = [daisyuiLib];

My problem:

(in the inspector, no dark:bg-gray-800 is applied)

Thanks!

ezeamin · 2023-09-13T15:20:54Z

ezeamin
Sep 13, 2023
Author

Solved. This was caused by dynamic classes. Tailwind doesn't send the styles of classes that aren't mentioned or included in the proyect. I was mixing up dark: with some className, but I wasn't using them together anywhere.

More info: https://www.codeconcisely.com/posts/tailwind-css-dynamic-class/
Tailwind: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

1 reply

lancejpollard Dec 3, 2024

Can you explain your solution?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dark classes are not being recognized by the style system #11979

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Dark classes are not being recognized by the style system #11979

ezeamin Sep 11, 2023

Replies: 1 comment · 1 reply

ezeamin Sep 13, 2023 Author

lancejpollard Dec 3, 2024

ezeamin
Sep 11, 2023

Replies: 1 comment 1 reply

ezeamin
Sep 13, 2023
Author