RobM,
It’s working!
Tks.
I have installed the purge plugin for the first time today and find there are problems with Tailwind UI.
The problems appear to be connected with missing media queries, but there may be other things too,
Tailwind UI has undergone a great deal of development recently and it is my understanding they are sponsoring Purge CCS. Presumably to maintain compatibility.
I am not an expert, but I am wondering if the node modules in the plugin are out of date ??
STEPS TO REPRODUCE.
-
Open Pinegrow and create a new page based on Tailwind UI. Name it index.html
-
Create a local css file based on the CDN version. This is the file that will be purged. The source be found at https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css
-
Via the Pinegrow stylesheet UI or in code remove the CDN link change to the local css file.
-
Via the Pinegrow UI insert a Tailwaind UI Hero section, or get the code directly from https://tailwindui.com/components/marketing/sections/heroes
-
Page will now feature a fully formed hero banner. Save index.html
-
Perform the routine for purging the local css file and edit index.html to use the purged css file.
Hero section, including navbar links are now broken.
An inspection of the navbar region, before and after will reveal major differences relating to missing media queries and perhaps other things too.
The plugin does not ship with a package.json file, so I unable to test my hunch that the node modules are in need of an update.
Edit:
Put this up on the forum before looking back through files. I’m not sure this plugin will be able to be brought up to speed with the new Tailwind. I’ll keep everyone posted.
Thanks for this - I haven’t been keeping up with Tailwind updates like I should. I think your diagnosis is likely spot on. I’ll try get an update/bug fix pushed out this weekend.
Bob
Thank you for the super quick reply Rob.
Maybe you could package the json and lock files too?
Strange - On the Tailwind site it says that Purge uses a regex of:
/[^<>"'`\s]*[^<>"'`\s:]/g
But when I use that it still prunes back some rules for smaller screen sizes like switching to hamburger. Have to dig a little more through their code to figure out the right regex and/or figure out what rules are being eliminated incorrectly and modify the regex myself. Have I mentioned I hate regex? 
Posting up some info about updates to Tailwind UI and Tailwindcss 2.0. Perhaps not relevant, but just in case.
So the plugin has been updated and seems to play nice with Tailwind 2.0. However, I’m not sure it plays nicely with Tailwind-UI components. I don’t have a subscription to test it. @MrPaulDriver - the example above is a Tailwind-UI component that requiress JS for the menu to work on mobile. The Purge plugin works to eliminate the excess CSS rules, but the element still doesn’t quite behave as expected. However, it also doesn’t work as expected pre-purge.
Hope this helps people out!
Bob
Thank you for working on this Bob. I’ll do some testing and report back.
BTW there are some free demo components for Tailwind UI, so testing is possible without the need for an account. See https://tailwindui.com/preview
The tailwind ui components are not bundled with any javascript, leaving this to the site builder to roll their own or leverage something like React or Vue.
The Tailwind team are making some scripts available, but this is still a work in progress. They are already looking pretty good though. See https://headlessui.dev
This is working great Bob. Big thanks.
Does a route exist for buying you a beer?
Thanks for the feedback!
I never set-up one of those “Buy me a beer/coffee” buttons. If you find you are getting enough use out of the plugin you can think of purchasing the Purify plugin. It uses a different Node package, but allows for output of logs, green-listing items, minification, combining media queries, and auto-prefixing. It seems to be equal to Purge when it comes to Tailwind purification. All for just under 5 U.S.D - the price of a good craft brew.
Bob
3 Likes