Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI 
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
