How to use base Tailwind CSS colors along with daisyUI theme

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开发者_如何学C seems like daisyUI is overriding my access to Tailwind colors? How can I use the base tailwind colors along with a daisyUI theme?