Here is my tailwind.config.ts
file configuration. The problem is Tailwind CSS classes are working but when I am using custom theme colors of Daisy UI it's not working. Project is built on Tauri with SvelteKit, TypeScript, Tailwind CSS and Daisy UI.
import containerQueries from '@tailwindcss/container-queries';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import type { Config } from 'tailwindcss';
import daisyui from 'daisyui';
import themes from 'daisyui/src/theming/themes';
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif']
},
animation: {
'spin-slow': 'spin 3s linear infinite'
}
},
daisyui: {
themes: [
{
light: {
...themes["light"],
background: '#ffffff',
'primary-900': '#362F78',
'primary-800': '#42389D',
'primary-700': '#5145CD',
'primary-600': '#5850EC',
'primary-500': '#6875F5',
'primary-400': '#8DA2FB',
'primary-300': '#B4C6FC',
'primary-200': '#CDDBFE',
'primary-100': '#E5EDFF',
'primary-50': '#F0F5FF',
'secondary-900': '#111928',
'secondary-800': '#1F2A37',
'secondary-700': '#374151',
'secondary-600': '#4B5563',
'secondary-500': '#6B7280',
'secondary-400': '#9CA3AF',
'secondary-300': '#D1D5DB',
'secondary-200': '#E5E7EB',
'secondary-100': '#F3F4F6',
'secondary-50': '#F9FAFB',
'danger-900': '#771D1D',
'danger-800': '#9B1C1C',
'danger-700': '#C81E1E',
'danger-600': '#E02424',
'danger-500': '#F05252',
'danger-400': '#F98080',
'danger-300': '#F8B4B4',
'danger-200': '#FBD5D5',
'danger-100': '#FDE8E8',
'danger-50': '#FDF2F2',
'success-900': '#014737',
'success-800': '#03543F',
'success-700': '#046C4E',
'success-600': '#057A55',
'success-500': '#0E9F6E',
'success-400': '#31C48D',
'success-300': '#84E1BC',
'success-200': '#BCF0DA',
'success-100': '#DEF7EC',
'success-50': '#F3FAF7'
}
},
{
dark: {
...themes["dark"],
background: '#0B0D13',
'primary-900': '#362F78',
'primary-800': '#42389D',
'primary-700': '#5145CD',
'primary-600': '#5850EC',
'primary-500': '#6875F5',
'primary-400': '#8DA2FB',
'primary-300': '#B4C6FC',
'primary-200': '#CDDBFE',
'primary-100': '#E5EDFF',
'primary-50': '#F0F5FF',
'secondary-900': '#111928',
'secondary-800': '#1F2A37',
'secondary-700': '#374151',
'secondary-600': '#4B5563',
'secondary-500': '#6B7280',
'secondary-400': '#9CA3AF',
'secondary-300': '#D1D5DB',
'secondary-200': '#E5E7EB',
'secondary-100': '#F3F4F6',
'secondary-50': '#F9FAFB',
'danger-900': '#771D1D',
'danger-800': '#9B1C1C',
'danger-700': '#C81E1E',
'danger-600': '#E02424',
'danger-500': '#F05252',
'danger-400': '#F98080',
'danger-300': '#F8B4B4',
'danger-200': '#FBD5D5',
'danger-100': '#FDE8E8',
'danger-50': '#FDF2F2',
'success-900': '#014737',
'success-800': '#03543F',
'success-700': '#046C4E',
'success-600': '#057A55',
'success-500': '#0E9F6E',
'success-400': '#31C48D',
'success-300': '#84E1BC',
'success-200': '#BCF0DA',
'success-100': '#DEF7EC',
'success-50': '#F3FAF7'
}
}
],
darkTheme: 'dark',
base: true,
styled: true,
}
},
plugins: [typography, forms, containerQueries, daisyui]
} satisfies Config;
I tried every possible solution mention in Daisy UI docs. I have also mention data-theme="light"
in app.html
.