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?
精彩评论