Tailwind template are very messy and inaccurate :/
Many example classes in the documents are not actually in the template! Even classes and attributes in the HTML tab are different from the HTML in the code itself. Both the documentation and the Tailwind template are very messy and inaccurate.
- The error pages are not in the template;
- Several modal classes don't exist in the template's css;
- Modal attributes don't work and are mentioned differently: in the HTML tab it uses data-modal-autofocus=“true”, but when you open the modal and inspect it, it uses data-modal-input-focus=“true”, and it doesn't work either way;
- Color classes are in conflict;
- KTLayout doesn't work.
Replies (2)
Hi,
Thank you for your feedback.
Please note that Tailwind builds(this is how Tailwind works) the output CSS file based on the CSS classes used in your HTML. When you copy and paste any code from the documentation into your template pages you will need to recompile the CSS using this guide.
Regarding the data-modal-input-focus=“true” attribute, we will update the docs accordingly.
Regarding conflicting color classes and the KTLayout issue can you provide more info ?
Which version of Metronic 9 are you using? Is the default HTML or you are integrating with Next.js, React, or Vue?
Regards,
Sean
Hi! Now is 9.1.2
I'm using the command "npm run build:css:watch" to add the template classes and it's working fine. BUT,
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">https://</div>
<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?
