The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

Tailwind component package classes don't work in your template (which is Tailwind)


Hi! Metronic version: 9.1.2.

I ended up having to subscribe to Tailwind's own component package (www.tailwindui.com/components) because the template doesn't have many components yet, and I was surprised that for some reason many of their own classes don't work in your template (which is Tailwind), even with "npm run build:css:watch".

I needed to use this input group for example and it's as if it didn't recognize them, they aren't even created with css:watch :

<div>

 <label for="company-website" class="block text-sm/6 font-medium text-gray-900">Company website</label>

 <div class="mt-2 flex">

 <div class="flex shrink-0 items-center rounded-l-md bg-white px-3 text-base text-gray-500 outline outline-1 -outline-offset-1 outline-gray-300 sm:text-sm/6">

 <input type="text" name="company-website" class="-ml-px block w-full grow rounded-r-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="www.example.com">

</div>

</div>


This input is completely square and ugly and it shouldn't be. I understand that you customized it to make some classes ready to make things easier, but it should still work for the original Tailwind classes, right?

I would like to know why, because I really need to use different components of Tailwind, especially since I purchased their package because your template is with their framework.

Could you help me with this?


user
Adam Rampazzo 1 year ago
Metronic HTML Tailwind 4
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

 
Deleted comment
user
Sean Author 1 year ago

Hi,

Metronic 9 is built on top of Tailwind carefully and all Tailwind original features work as expected. I have just tied the code and it worked just fine: https://i.imgur.com/kT54BGB.png

Have you reloaded your browser cache after running "npm run build" or "npm run build:css:watch" ?

If you need any further help can you please provide more info about your compilation process? Do you get any errors in the console?

Regards,
Sean


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation