Christmas Sale! Limited Time Only - Enjoy 30% Off Metronic Extended License!
Buy for 669$  969$

Missing classes on Tailwind latest version


I believe the following classes are missing on the metronic 9 themes

-animate-pulse
-bg-gray-200
-bg-gray-700

also it seems that I try to do the following "bg-gray-100 dark:bg-gray-600" it does not work, since bg-gray-600


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 (3)


Thanks for your response
understood on the gray

but on the animate-pulse I do believe it is missing on latest version I have 9.0.4 and in "/dist/assets/css/styles.css" It does not seem to include "animate-pulse" is it included in another file?



Hi,

Please note that Tailwind CSS is dynamically generated based on the classes you use in your HTML. Please refer to Quick Setup guide to compile your CSS whenever you add a new class.

Regards.



Hi,

Metronic fully overrides default gray colors and uses custom gray colors.

Also, Metronic uses the CSS variables to map gray colors for light and dark modes swap automatically as you can check here: site-generator/themes/metronic-tailwind-html/tailwind.config.js

By right, bg-gray-200 class should look pretty well in the dark mode. For Metronic Tailwind you don't have to set dark mode colors since our custom gray color set works pretty well for both light and dark modes.

All animation classes should work as shown in the official Tailwind Docs. Metronic does not customize or override any animation classes.

If you need any further clarifications please do let us know.

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  :(