Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
Can't import tailwind colors into metronic 9.1.2 html template
I am trying to import tailwind base colors like (teal color) into my tailwind html template. But when i build the css it is always missing those colors. Here is my tailwind.config.js configuration
```js
const defaultTheme = require('tailwindcss/defaultTheme');
const defaultColors = require('tailwindcss/colors');
module.exports = {
content: [
'./src/app/**/*.{ts,js}',
'./src/core/components/**/*.{ts,js}',
'./views/**/*.html',
'./dist/html/**/*.html'
],
safelist: [
'demo1',
'hidden',
'ki-filled',
'ki-outline',
'ki-duotone',
'ki-solid',
{ pattern: /^apexcharts-.*$/ },
{ pattern: /^leaflet-.*$/ }
],
darkMode: 'class',
theme: {
extend: {
base: {
colors: {
gray: {
light: {
...
},
dark: {
...
}
},
contextual: {
light: {
brand: {
...
},
primary: {
...
},
success: {
...
},
info: {
...
},
danger: {
...
},
warning: {
...
},
dark: {
...
},
light: {
...
},
secondary: {
...
}
},
dark: {
brand: {
...
},
primary: {
...
},
success: {
...
},
info: {
...
},
danger: {
...
},
warning: {
...
},
dark: {
...
},
light: {
...
},
secondary: {
...
},
}
},
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
colors: {
gray: {
...
},
primary: {
DEFAULT: 'var(--tw-primary)',
active: 'var(--tw-primary-active)',
light: 'var(--tw-primary-light)',
clarity: 'var(--tw-primary-clarity)',
inverse: 'var(--tw-primary-inverse)',
},
success: {
DEFAULT: 'var(--tw-success)',
active: 'var(--tw-success-active)',
light: 'var(--tw-success-light)',
clarity: 'var(--tw-success-clarity)',
inverse: 'var(--tw-success-inverse)',
},
warning: {
DEFAULT: 'var(--tw-warning)',
active: 'var(--tw-warning-active)',
light: 'var(--tw-warning-light)',
clarity: 'var(--tw-warning-clarity)',
inverse: 'var(--tw-warning-inverse)',
},
danger: {
DEFAULT: 'var(--tw-danger)',
active: 'var(--tw-danger-active)',
light: 'var(--tw-danger-light)',
clarity: 'var(--tw-danger-clarity)',
inverse: 'var(--tw-danger-inverse)',
},
info: {
DEFAULT: 'var(--tw-info)',
active: 'var(--tw-info-active)',
light: 'var(--tw-info-light)',
clarity: 'var(--tw-info-clarity)',
inverse: 'var(--tw-info-inverse)',
},
dark: {
DEFAULT: 'var(--tw-dark)',
active: 'var(--tw-dark-active)',
light: 'var(--tw-dark-light)',
clarity: 'var(--tw-dark-clarity)',
inverse: 'var(--tw-dark-inverse)',
},
secondary: {
DEFAULT: 'var(--tw-secondary)',
active: 'var(--tw-secondary-active)',
light: 'var(--tw-secondary-light)',
clarity: 'var(--tw-secondary-clarity)',
inverse: 'var(--tw-secondary-inverse)',
},
light: {
DEFAULT: 'var(--tw-light)',
active: 'var(--tw-light-active)',
light: 'var(--tw-light-light)',
clarity: 'var(--tw-light-clarity)',
inverse: 'var(--tw-light-inverse)',
},
brand: {
DEFAULT: 'var(--tw-brand)',
active: 'var(--tw-brand-active)',
light: 'var(--tw-brand-light)',
clarity: 'var(--tw-brand-clarity)',
inverse: 'var(--tw-brand-inverse)',
},
coal: {
...
},
teal: defaultColors.teal,
},
},
},
};
```
Please help me
Replies (1)
Hi,
The tailwind default colors are by default available, no need to add them via config.
Only custom and new colors should be added via the config.
Basically you can use any standard tailwind colors referring to the official tailwind docs.
Regards,
Sean
