How would you go about delivering a separate CSS file per page? For example one file for the homepage and another for a blog page. And if some templating language is used (e.g. the homepage template includes other small sub-templates). Can we reduce CSS in such scenarios? I'd appreciate any help!
When should you use purgecss vs only postcss to purge? I currently have the purge enabled with specific content in my tailwind.config.js, and my postcss.config.js only requires two plugins, tailwindcss and autoprefixer.
I've been giving this a try using vanilla html with tailwindcss but it strips out all the classes and renders just an html page with an empty base.css file.
hi, i do not know did you solve or not, but i faced the same problem, the fact is that i left extra symbol before the path like this: require('@fullhuman/postcss-purgecss')({ content: [ /'build/index.html' ], defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] }) that slash '/' before 'build/index.html' , once I removed it everything went fine
This should work with non-JS-framework project, too. You have to pay attention to the 'content' key to point. In your case, not to Vue files, but to your own HTML files. Look at the example for './public/index.html'. That's currently pointing to one specific file, so you might change it to './public/**/*.html' to target all of your HTML files (in this video's use of a 'public' folder).
@@somascope1834 I tried doing it this way, pointing to the html file in my project, but upon compiling, the base.css doesn't have any imports or the overrides in it. It just has the fonts that didnt match the regex and some animations.
I've made a starter code for this, have a look at: github.com/VaibKS/tailwind-starter Basically, you'll have to use postcss-cli to build the css and then use it in your html.
Nah don't need it, this video is from before we added the feature to Tailwind. We re-recorded this series recently here: th-cam.com/video/elgqxmdVms8/w-d-xo.html
@@AdamWathan is there any source showing how tailwindcss works under the hood? When i 'compile' tailwind does it create the HUGE CSS file content and then purges it? Or is there something else? I want to know why it takes 2 seconds instead of 200 milliseconds?
@@F0RBIDDEN With all due respect, I dont think it's an optimized idea. I suggest you build your own purger: put all your classes in a self-balancing binary search tree (AVL) and build percise extractors (for each file type instead of a general one). Then, using postcss, write a plugin that compiles tailwind faster. Im no expert, but it looks more efficient that way. Have u tried it before? If so, has there been any dramatic changes in compilation time?
Adam Wathan I just found the article on Controlling File Size on the Tailwind website right after I asked this. I love that it’s built directly into Tailwind now. Cheers and thanks for the quick response
@@AdamWathan when we use theming and css variables. how does purgecss works in that case? because we have to bring javascript to control some class names in react.
- Can you tell us more about the 'build' setup for current Tailwind? Hey Adam - Tailwind is great. So far we have been using this primarily on standalone or GRAV projects, following a setup process outlined here: www.tailwindtoolbox.com/setup However - I see that now you have included a purge option right inside Tailwind - tailwindcss.com/docs/controlling-file-size Great! Except that with my limited knowledge it isn't quite clear how we setup the build process - I have added my source template files to the purge settings in tailwind.config.js. Is there anywhere we can see an end-to-end setup for 'modern' Tailwind purge workflow? Presumably if we declare the purge 'targets' in tailwind.config.js we dont then need to do it in posts.config.js?? All the best and thanks for the great work!
Best tailwind series !!!
He is the Author
@@jassehomar lmao I was just gonna say this.
Very nice tutorial and library. I wish more os authors did the same.
What's the name of the filesize utility? 0:47
Second this
@@asanokatana Me too, then I searched for it 😄
How would you go about delivering a separate CSS file per page? For example one file for the homepage and another for a blog page. And if some templating language is used (e.g. the homepage template includes other small sub-templates). Can we reduce CSS in such scenarios? I'd appreciate any help!
When should you use purgecss vs only postcss to purge? I currently have the purge enabled with specific content in my tailwind.config.js, and my postcss.config.js only requires two plugins, tailwindcss and autoprefixer.
I've been giving this a try using vanilla html with tailwindcss but it strips out all the classes and renders just an html page with an empty base.css file.
hi, i do not know did you solve or not, but i faced the same problem, the fact is that i left extra symbol before the path like this:
require('@fullhuman/postcss-purgecss')({
content: [
/'build/index.html'
],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
that slash '/' before 'build/index.html'
, once I removed it everything went fine
@@manofsteppe179 yeah i think it had something to do with the path. I don't think I was able to solve it though. Moved on eventually. :D
Thank you, Adam, but what if I only need to use PurgeCSS without any framework ? (vanilla HTML with TailwindCSS and without any EJS/VUE/REACT)
This should work with non-JS-framework project, too. You have to pay attention to the 'content' key to point. In your case, not to Vue files, but to your own HTML files. Look at the example for './public/index.html'. That's currently pointing to one specific file, so you might change it to './public/**/*.html' to target all of your HTML files (in this video's use of a 'public' folder).
@@somascope1834 I tried doing it this way, pointing to the html file in my project, but upon compiling, the base.css doesn't have any imports or the overrides in it. It just has the fonts that didnt match the regex and some animations.
Florian ARGD check this video bro
th-cam.com/video/y3WQoON6Vfc/w-d-xo.html
and don’t forget to check this link for more information
purgecss.com
I've made a starter code for this, have a look at: github.com/VaibKS/tailwind-starter
Basically, you'll have to use postcss-cli to build the css and then use it in your html.
This video was published almost in 2019. Do we need to use postCSS plugin, as shown here, or it is already embeded into the Tailwind 2.0?
Nah don't need it, this video is from before we added the feature to Tailwind. We re-recorded this series recently here: th-cam.com/video/elgqxmdVms8/w-d-xo.html
What if you plan to use some classes at a later date? say you want to make classes available if there was to be a new marketing page developed.
Hey! You should rebuild your CSS every time you make changes to the site, just like any other tool that has a build process like Sass for example 👍🏻
How to use purge css in laravel?
Why the match for uppercase?
Is there any difference in optimization-wise comparing to the built-in purgecss in tailwind?
This video is old and was recorded before we had built in purging, definitely just use the built in stuff 👍🏻
@@AdamWathan is there any source showing how tailwindcss works under the hood? When i 'compile' tailwind does it create the HUGE CSS file content and then purges it? Or is there something else? I want to know why it takes 2 seconds instead of 200 milliseconds?
@@mmgordion It builds a huge CSS file (several MB) and then purges it, correct 👍🏻
@@F0RBIDDEN With all due respect, I dont think it's an optimized idea. I suggest you build your own purger: put all your classes in a self-balancing binary search tree (AVL) and build percise extractors (for each file type instead of a general one). Then, using postcss, write a plugin that compiles tailwind faster. Im no expert, but it looks more efficient that way. Have u tried it before? If so, has there been any dramatic changes in compilation time?
Adam, would you say that this solution of using PurgeCSS is viable when doing Server Side Rendering via something like Next.js?
Yep works perfectly, we use Next.js for the Tailwind website and purge all of our unused styles there without any issues 👍🏻
Adam Wathan I just found the article on Controlling File Size on the Tailwind website right after I asked this. I love that it’s built directly into Tailwind now. Cheers and thanks for the quick response
@@AdamWathan when we use theming and css variables. how does purgecss works in that case? because we have to bring javascript to control some class names in react.
- Can you tell us more about the 'build' setup for current Tailwind?
Hey Adam - Tailwind is great. So far we have been using this primarily on standalone or GRAV projects, following a setup process outlined here: www.tailwindtoolbox.com/setup
However - I see that now you have included a purge option right inside Tailwind - tailwindcss.com/docs/controlling-file-size
Great!
Except that with my limited knowledge it isn't quite clear how we setup the build process - I have added my source template files to the purge settings in tailwind.config.js.
Is there anywhere we can see an end-to-end setup for 'modern' Tailwind purge workflow? Presumably if we declare the purge 'targets' in tailwind.config.js we dont then need to do it in posts.config.js??
All the best and thanks for the great work!
Pl check this playlist. One of the first videos talks about setting up tailwind th-cam.com/play/PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR.html
Thank u!