如何在daisyUI主题中同时使用Tailwind CSS基础颜色？

方法一：给daisyUI类添加前缀 #

在tailwind.config.js的daisyui配置中添加prefix字段，给所有daisyUI专属类加上前缀，避免和Tailwind原生类名冲突：

/** @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: {
        prefix: 'd-', // 新增前缀配置
        themes: [
            {
                mytheme: {
                    primary: '#8855B4',
                    secondary: '#00C9AF',
                    accent: '#f3d0f5',
                    neutral: '#373f4a',
                    'base-100': '#FFFFFF',
                    info: '#3ABFF8',
                    success: '#36D399',
                    warning: '#FBBD23',
                    error: '#F87272',
                },
            },
        ],
    },
    plugins: [require('daisyui')],
}

配置后使用daisyUI颜色需带前缀：

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

Tailwind原生颜色类正常使用：

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

方法二：在daisyUI主题中合并Tailwind原生颜色 #

如果不想修改类名前缀，可以导入Tailwind默认颜色并合并到自定义主题中，让两类颜色同时生效：

/** @type {import('tailwindcss').Config} */
/* eslint-env node */
const colors = require('tailwindcss/colors') // 导入Tailwind默认颜色库

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',
                    // 合并Tailwind原生颜色
                    ...colors,
                },
            },
        ],
    },
    plugins: [require('daisyui')],
}

此配置下无需修改类名，可直接同时使用text-accent（daisyUI）和text-red-400（Tailwind）。

原因说明 #

daisyUI默认会替换Tailwind的原生颜色系统，自定义主题时原生颜色会被覆盖。上述两种方法分别通过类名隔离、颜色合并的方式解决冲突，可根据项目需求选择。

内容的提问来源于stack exchange，提问作者FlameDra