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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(