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,
},
},
},
};
```
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