This is a great article! Thanks, Jen, I just started using tailwind. It's really amazing but I feel like I need to take some CSS refresher classes so I can understand the basics again to use it right.
Jen Looper is Head of Academic Advocacy at AWS with over 22 years' experience as a web and mobile developer, specializing in creating cross-platform web & mobile apps.
This is a good point. I found myself hanging out a lot in the inspector, reminding myself of weird things you have to do to make your background image behave. Once you remember the css, then you find the abstraction in Tailwind and can move on. Eventually I am assuming I'm going to have some tried and true designs I can just spin up for the various small websites I need. :)
Jen Looper is Head of Academic Advocacy at AWS with over 22 years' experience as a web and mobile developer, specializing in creating cross-platform web & mobile apps.
I think it will do really well. The key would be to shrink down that tailwind css file as much as you can, and even minimize it if possible. In terms of Vue.js itself, it has very good performance. I'm going to run our sites through lighthouse and try to make them as performant as possible. You can follow our progress at nativescript-vue.org, which is already a Tailwind.css site, but with a custom static site genertor, to see how moving to VuePress will impact it.
I've used tailwind a bit and usually run it through the PurgeCSS pipeline to cut down the size.
It pretty much just does a grep for every tailwind class in your vue/js/html files and if there is no match - it removes it from the css file. You can over-ride it if you're doing some fancy inline-template/variable-substitution stuff too :-)
It's especially nice as you don't need to change the tailwind config at all while you are developing - so you don't find yourself deleting a load of stuff then thinking 'damn, I wish I had those orange background colours after all...' ;-)
Jen Looper is Head of Academic Advocacy at AWS with over 22 years' experience as a web and mobile developer, specializing in creating cross-platform web & mobile apps.
This is a great article! Thanks, Jen, I just started using tailwind. It's really amazing but I feel like I need to take some CSS refresher classes so I can understand the basics again to use it right.
This is a good point. I found myself hanging out a lot in the inspector, reminding myself of weird things you have to do to make your background image behave. Once you remember the css, then you find the abstraction in Tailwind and can move on. Eventually I am assuming I'm going to have some tried and true designs I can just spin up for the various small websites I need. :)
How do you feel about using this for a large project ? I would love to see the performance on it vs vanilla css.
I think it will do really well. The key would be to shrink down that tailwind css file as much as you can, and even minimize it if possible. In terms of Vue.js itself, it has very good performance. I'm going to run our sites through lighthouse and try to make them as performant as possible. You can follow our progress at nativescript-vue.org, which is already a Tailwind.css site, but with a custom static site genertor, to see how moving to VuePress will impact it.
I've used tailwind a bit and usually run it through the PurgeCSS pipeline to cut down the size.
It pretty much just does a grep for every tailwind class in your vue/js/html files and if there is no match - it removes it from the css file. You can over-ride it if you're doing some fancy inline-template/variable-substitution stuff too :-)
It's especially nice as you don't need to change the tailwind config at all while you are developing - so you don't find yourself deleting a load of stuff then thinking 'damn, I wish I had those orange background colours after all...' ;-)
This is a super tip. I'll edit the article accordingly and credit you! Thank you!
Goodness - it's like christmas has come early :-D Thank you! :-D