Thanks so much for creating this video! I've been spinning my wheels trying to figure this out for a few days now. Your video solved my issue in less than 10 minutes!
Div, is there a way to speed up the tailwindcss processing with Hugo? Without tailwind I'm at 2.5 seconds for full site generation...and with tailwind it's 25 seconds. That's 10x difference. Is there a way to generate only on certain pages like a templated pages?
@@sureshkumargondi4631 Tailwind can add quite a bit of bloat if not optimised for your specific project. I had a discussion related to this with a couple of other people. Maybe you can take a look at the discussion here and see if it helps you? dev.to/divrhino/how-to-add-tailwindcss-to-your-hugo-site-5290
@@DivRhino thanks for this but you know when i clone your repo and run hugo server i got error, i wasted my 3 hours to fix, and finally install the deb file of hugo for ubuntu of latest version
Hi thanxs for your video but i get an error from PostCSS on start hugo server. "No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration." I need help to run the the Page correctly 😞
Hi, it is not compiling the css styles; they are not getting rendered. I followed your article as well as video to the "T", but no success! Is there something i am missing here? I know its 3 years now...
Thanks for your comment. You definitely don't have to use PostCSS. The quickest way to get started with TailwindCSS would be to include it via the CDN link. You can also choose to use a build tool like Webpack or Gulp. The TailwindCSS installation guide outlines all the different ways you can implement it: tailwindcss.com/docs/installation
Thank you for leaving a comment. If you're still having trouble, you can consider checking out the written version of the article on my website: divrhino.com/articles/add-tailwindcss-to-hugo/ There is also an accompanying github repo here: github.com/divrhino/hugotails These links are also available in the description for this video. :)
@@DivRhino Thanks for your replay! Your github project have the same problem :) you can try to build for production with the "hugo" command to reproduce my error ;)
Thanks so much for creating this video! I've been spinning my wheels trying to figure this out for a few days now. Your video solved my issue in less than 10 minutes!
I'm so glad the video was helpful, Brett! Thanks for leaving a comment to let me know! :)
Это лучшее что я видел по имплементации css фреймворка в hugo!
Outstanding teaching video. So easy to understand. You're a splendid instructor. Thank you!
Thank you for leaving such a lovely comment! I'm so glad you found the video helpful :)
Great explanation. Looking forward your next videos! Gambateh.
Thank you so much for the video and the article.
It was very easy to follow and get my tailwind and hugo first integration successfully. :)
Thank you for letting me know, Suresh. I'm so glad this tutorial was useful to you! :D
Div, is there a way to speed up the tailwindcss processing with Hugo?
Without tailwind I'm at 2.5 seconds for full site generation...and with tailwind it's 25 seconds. That's 10x difference.
Is there a way to generate only on certain pages like a templated pages?
@@sureshkumargondi4631 Tailwind can add quite a bit of bloat if not optimised for your specific project. I had a discussion related to this with a couple of other people. Maybe you can take a look at the discussion here and see if it helps you?
dev.to/divrhino/how-to-add-tailwindcss-to-your-hugo-site-5290
Make more videos :) you are amazing and I mean every word.
Definitely useful and it’s explained clearly. Thanks!
This was very useful to me, thank you!
Thanks for the help!
You’re welcome! Thanks for watching ✨✨
Just asking, wouldn't it make sense to add cssnano to minify the CSS?
Thank you for your comment. You can use any tools you enjoy working with :)
thanks for this nice tutorial and spaciously thanks for git repo
Aw, thank you for leaving a comment, Anshu. It was nice of you. Hope you're having a good day!
@@DivRhino thanks for this but you know when i clone your repo and run hugo server i got error, i wasted my 3 hours to fix, and finally install the deb file of hugo for ubuntu of latest version
@@aianshu I'm sorry to hear that. I admit I have not tested this on Linux at all. But I hope you were able to get things working.
This was great, thank you very much!
And thank you for taking the time to leave a comment!
@Div Rhino, good tutorial, thank you for sharing. Anyway, your the copy button for the code block on the website is not working.
Thanks for letting me know! I'll take a look :)
Hi thanxs for your video but i get an error from PostCSS on start hugo server. "No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration." I need help to run the the Page correctly 😞
what if we don't use theme folder? any tips?
Hello there, if you don’t have a theme folder, you can skip that step and instead do all the instructions in your main project folder.
Have you looked into tailwindcss 3? I believe it has JIT integrated and should be easier to setup.
Thank you for your comment. I haven’t looked into Tailwind 3 yet.
Are you enjoying working with it?
@@DivRhino I just tried a little. I believe with with JIT as standard you don't need PostCSS and Tailwind will purge all unused classes automatically.
That’s pretty cool. Sound like good improvements! 🙌
Hi, it is not compiling the css styles; they are not getting rendered. I followed your article as well as video to the "T", but no success! Is there something i am missing here? I know its 3 years now...
header is not showing up. also no errors it would really helped if you provided github repo of your video
Thank you for your comment. I've updated the video description to include a text version of the tutorial as well as a Github repo.
TailwindCSS 3.0 just got released today. I hope you find the time do a video, seems quite different setup from 2.*
Thank you for your comment. 🙏
@@DivRhino In the meantime I followed github / Hugo-Tailwind-3.0 and it is using PostCSS. Works very well.
😀🙏🙏
🙌🙏🙌
Is it a requirement to use Post CSS?
Thanks for your comment. You definitely don't have to use PostCSS. The quickest way to get started with TailwindCSS would be to include it via the CDN link. You can also choose to use a build tool like Webpack or Gulp.
The TailwindCSS installation guide outlines all the different ways you can implement it: tailwindcss.com/docs/installation
It's not working when we build the site with this command: hugo
Thank you for leaving a comment. If you're still having trouble, you can consider checking out the written version of the article on my website:
divrhino.com/articles/add-tailwindcss-to-hugo/
There is also an accompanying github repo here:
github.com/divrhino/hugotails
These links are also available in the description for this video. :)
@@DivRhino Thanks for your replay! Your github project have the same problem :) you can try to build for production with the "hugo" command to reproduce my error ;)
@@tsioryfitiavanaanhykrishna6992 Thanks for letting me know.
let me know if you fixed the problem :)
@@tsioryfitiavanaanhykrishna6992 I’m not actively maintaining this repo but I’d be happy to accept your pull request if you manage to fix it. :)