Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Is there a missing CSS rule in the downloadable package


I downloaded the metronic 9 package after purchasing and implemented a theme toggle button in the demo site as referenced in this documentation https://keenthemes.com/metronic/tailwind/docs/components/theme . The button would disappear and upon investigation the css provided seems to lack the rule
.dark\:flex:is(.dark *) {
display:flex
}
that is hosted in the styles.css used in the documentation site. This is concerning as there seem to be other discrepancies as well, the prior rule is block in the public and inline block in the downloaded copy. What should I do to ensure I have the correct version with all the correct source so I don't have to debug things like this?

From public docs:
.dark\:block:is(.dark *) {
display:block
}
.dark\:flex:is(.dark *) {
display:flex
}
.dark\:hidden:is(.dark *) {
display:none
}

From provided download at themeforest:
.dark\:block:is(.dark *) {
display: block;
}

.dark\:inline-block:is(.dark *) {
display: inline-block;
}

.dark\:hidden:is(.dark *) {
display: none;
}


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)


Hi,

Please note that when u add a new class into your HTML you will need to recompile your CSS as Tailwind uses actual classes in the css bundle:
https://keenthemes.com/metronic/tailwind/docs/getting-started/installation

Regards,
Sean



I have done that, but I have not added any CSS these are discrepancies between the provided CSS from themeforest that has been compiled and the CSS available to be viewed on the demo and example documentation pages.

I have corrected this issue by adding this rule and compiling it, but I am concerned about more missing CSS rules.



Hi,

Please note that the CSS will contain the code that used by your HTML. This is how Tailwind works. Tailwind compiles all the CSS classes that actually used in your pages. After any copy paste from doc you will need to recompile your CSS.

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