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 (2)
I don't want to be dramatic, but Bodog Casino has become my panacea for boredom, especially on cold Canadian evenings. I like that it doesn't try to impress too much, but still does so when it counts. I lean towards the high volatility video slots and sometimes dabble in virtual sports betting. It's a solid mix of games, and they all run smoothly. It's the kind of place you find and just stick with it.
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
