0

I'm using Tailwind CSS along with daisyUI for a NextJS project. I have my tailwind.config.js file set up as:

/** @type {import('tailwindcss').Config} */
/* eslint-env node */
module.exports = {
    content: [
        './pages/**/*.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        'node_modules/daisyui/dist/**/*.js',
        'node_modules/react-daisyui/dist/**/*.js',
    ],
    theme: {
        extend: {},
        fontFamily: {
            sans: ['Roboto', 'sans-serif'],
        },
    },
    daisyui: {
        themes: [
            {
                mytheme: {
                    primary: '#8855B4',
                    secondary: '#00C9AF',
                    accent: '#f3d0f5',
                    neutral: '#373f4a',
                    'base-100': '#FFFFFF',
                    info: '#3ABFF8',
                    success: '#36D399',
                    warning: '#FBBD23',
                    error: '#F87272',
                },
            },
        ],
    },
    plugins: [require('daisyui')],
}

When I try to use a color defined within my daisyUI theme, it works fine:

<h1 className="text-3xl font-bold text-accent">Your Trips</h1>

enter image description here

But when I use a color defined in base tailwind, it does not work.

<h1 className="text-3xl font-bold text-red-400">Your Trips</h1>

enter image description here

As you can see, the text is black instead of red-400.

It seems like daisyUI is overriding my access to Tailwind colors? How can I use the base tailwind colors along with a daisyUI theme?

FlameDra
  • 1,807
  • 7
  • 30
  • 47

2 Answers2

1

I believe you may have overridden the default theme with the daisyui theme as opposed to extending the default theme.

You should be able to correct this by moving your theme components to the extend section in your tailwind.config.js.

Extending the default theme

Bryan
  • 11
  • 2
  • According to https://daisyui.com/docs/themes/, it has to go within the daisyui block. – FlameDra Dec 08 '22 at 01:59
  • Any ideas on how to use both the daisyUI theme, while having access to tailwind colors? – FlameDra Dec 08 '22 at 02:07
  • I'm afraid not. Although, on the off chance it helps, using your tailwind.config.js in a new next.js project; I am unable to replicate the issue: the text-red-400 and text-accent are both being applied. – Bryan Dec 09 '22 at 13:46
  • Did you install daisyUI as well? – FlameDra Dec 10 '22 at 17:43
0

I faced with the same issue, I solved it with putting my additional styles to 'extend' object of tailwind. In your version, you can do it as putting your fontFamily to there. But dont touch daisyUI object, it should be in the same place. Like this: https://daisyui.com/docs/themes/#-4

borchvm
  • 3,533
  • 16
  • 44
  • 45
regu1arCoderGuy
  • 1