HTML Tailwind Installation
I'm going through the installation guide for Metronic 9 Tailwind: https://keenthemes.com/metronic/tailwind/docs/getting-started/installation and just want to use the HTML version.
Do I need to do points 6 to 8 with the HTML version, as it looks like the files are already in there?
Replies (14)
Hi,
Sorry for the late reply. Please note that whenever you modify the HTML code, copy and paste any code from Docs, or add a new HTML code you will need to recompile the assets using npm run build command. Tailwind includes only CSS classes that are used in your HTML code. Also please refer to Tailwind Content Settings to point your application views(HTML) so Tailwind can scan it during the CSS compilation
Regards.
Thanks for the reply. Another question if you can please help...
My folder structure is...
user2/metronic-tailwind-html/
with all the usual files you supplied within. My HTML files will be under the folder as PHP files...
user2/
and various sub folders under "user2/".
When I compile I want check all the PHP files within these folders for used CSS , javascript. Is this the correct code for the tailwind.config.js
module.exports = {
content: [
'./src/app/**/*.{ts,js}',
'./src/core/components/**/*.{ts,js}',
'./views/**/*.html',
'./dist/html/**/*.html'
'../**/*.php'
],
...
Hi,
Yes, you will need to add the path to your PHP files. If "'../**/*.php'" worked then can keep it. Also if you have any JS files that use Tailwind classes you can point to those JS files as well.
Regards,
Thanks, but the CSS purge does not seem to be happening on build. Test CSS classes which are not in the HTML files are still showing when compiled and minified.
Any recommendations on what I need to check?
Hi,npm run build:prod should minify the css file using tailwind commandline tool.
Can you please let me know which class you removed and it still appears in your CSS? Have you double checked presence of this class in your content anyhow?
Regards,
Sean
Thanks for the reply. Yes, I ran that command.
The class is still in the demo1.css file, but the class is not used in the HTML files. I assume as I run the build it purges the CSS and should not include the relevant class. Is that correct?
Hi Sean. Just to add to my last message...
The CSS classes that do not get purged are my custom CSS, rather than the tailwind CSS. Will the custom CSS get purged too, or do I need to set this up separately?
If separately, can you point me in the right direction of what I need to do? Would this be with the PostCSS plugin?
Hi,
demo1.css is the source file for the advanced Demo 1 layout which is merged to the output CSS file during compilation. However, you do not include dmeo1.css separately, its for compilation only.
The Tailwind tool does the optimization while it minifies the output CSS file. There is no need to install an additional plugin.
Regards,
Sean
So should custom CSS added in this file be purged or not? Just trying to work out if the custom CSS gets purged too or just the tailwind CSS?
Hi,
It's already added the main css file:src/css/styles.css. Our webpack compiles this into minifed CSS. So it gets purged with tailwind css.
Regards,
Sean
Okay, but on tests, my custom CSS is not getting purged. If the classes in the demo1.css file are not used in the HTML files, it is still showing in the src/css/styles.css . I would expect them to be removed.
Hi,
This is custom css and the size of it is not that large. Since all the CSS code is linked to the 'demo1' parent class and the demo1 parent class used in the body tag then all child CSS rules will be compiled. This is not a big issue and the size is not that large. This demo1 is used to handle the collapse/expand mode of the sidebar.
Regards.
I understand it's not a big issue, but just want to know if CSS in this file or other custom css files get purged or not? Just trying to understand how it all works.
All CSS files are purged by the Tailwind tool during the compilation. You can test it by adding or removing certain CSS classes from your content and see the difference.
