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?
Replies (2)
If the Tailwind component package classes are not working in your template, it could be due to a variety of issues such as missing configurations, incorrect usage of class names, or conflicts with other styles. Make sure that your Tailwind CSS is properly set up and that you are using the right version of Tailwind compatible with your component package. You can also try clearing your cache or checking if the Tailwind classes are being overridden by other styles in your project. If you're working on calculations, for example, to comment calculer un pourcentage d'augmentation ou de diminution, you can use Tailwind classes for styling the output, like setting margins, padding, or background colors to enhance the presentation of your results. Double-check the configuration and ensure the necessary packages and plugins are installed and correctly referenced.
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
