Configuring theme>colors>primary causes the color value to be the only primary color.
yi-boide opened this issue · comments
Configuring theme>colors>primary causes the color value to be the only primary color.
This is the configuration of tailwind.config.ts that I changed once
/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss';
import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons';
export default <Partial<Config>>{
darkMode: 'class',
theme: {
colors: {
primary: '#d81e06'
}
},
plugins: [
iconsPlugin({
// Select the icon collections you want to use
collections: getIconCollections(['mdi', 'heroicons'])
})
]
};
I added the original property, or I removed the primary and removed all the dependencies, reintroduced, and then restarted with only one primary color value and no other colors.
/** @type {import('tailwindcss').Config} */
import defaultTheme from 'tailwindcss/defaultTheme';
import type { Config } from 'tailwindcss';
import { iconsPlugin, getIconCollections } from '@egoist/tailwindcss-icons';
export default <Partial<Config>>{
darkMode: 'class',
theme: {
colors: {
primary: '#d81e06',
...defaultTheme.colors
}
},
plugins: [
iconsPlugin({
// Select the icon collections you want to use
collections: getIconCollections(['mdi', 'heroicons'])
})
]
};
This is a minimal implementation that runs directly after the dependency is installed.
Then unwrap the comment section and run it again. The effect is the same.
Yes, this is desired behaviour. Please refer the docs - https://tailwindcss.com/docs/customizing-colors#using-custom-colors
Updating colors: {}
means replacing the default color palette.
If you want continue using default colors, please make use of tailwindcss/colors
; read https://tailwindcss.com/docs/customizing-colors#using-the-default-colors.
Your file contents will rather be:
/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss';
import * as colors from 'tailwindcss/colors';
export default <Partial<Config>>{
darkMode: 'class',
theme: {
colors: {
primary: '#d81e06',
...colors,
},
},
};