如何使用 base Tailwind CSS colors 和 daisyUI 主题

Question

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>

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>

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?

Answer 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