What an ingenious way to working with CSS! I've watched this whole series and enjoyed every moment of it. Thank you Simon for your effort to put the essentials so nicely. I'm now going to use tailwindcss wherever I can. I'm so excited...
Please extend this series with navbars and other essential UI components! Love the series and great tutorial especially for beginners, thank you for this :)
Excited to work with CSS for the first time in a long time. Love the workflow and optimizations. Looking forward to using Tailwind in my next project. The flow of this tutorial is quick and to the point, but you covered all of my production concerns in the process. Great job!
This 9 part series has been a great introduction to tailwind and learned a lot thanks Simon for these videos they are helping me get acquainted with the limitless possibilities that tailwind can provide when it comes to designing user interfaces.
The purge is the last item I was eagerly waiting as a cherry on the top! Thanks for the amazing series. Gonna jump into Tailwind and try to revive my CSS skills !
I'm officially a tailwind fan! Amazing series, i had trouble installing vite at first since its different now maybe with the updates. But I was able to push through just by referring to the tailwindcss documentation install guide. Really high quality course thanks a lot Simon!
This is the type of thing that most tutorials never cover. I get that companies use different build tools etc. and you can't cover them all, but having some idea how one or two work is really helpful.
This is fantastic and because of the modular utility approach I'll bet the css ends up being WAY smaller than anything I've done following the BEM method
The best part is, you wouldn't even have to choose. You would augment styled components with the awesomeness that is tailwind with something like "twin.macro". It's been 7 months, I guess you already know this by now :D. In other news, Simon is a "god" tutor. Thanks for the series.
When I started learning react, I'm really concerned about what should I use for design. This video series teach me not only about the framework, but also the design. Thank you so much for your videos. (-: Nice :-)
Thank you, Simon! Very complete tutorial. There are multiple frameworks or libraries for the front-end and now it's difficult to decide which one to use haha. Tailwind CSS is a very interesting option. I'll see when will be the time to use it in a real project. Cheers! God bless
Let's say you have more than one page. For example a homepage and an about page. Is there a way to configure PurgeCSS so that it doesn't include the classes used in about-us on the homepage and the other way around? Obviously with two pages this wouldn't be necessary but if you had thousands of pages that all have their own classes your css file size would slow down the loading of any of the pages quite a lot.
Great question! Purge CSS and Tailwind don't support "code splitting" or chunking per page at this point... but to be fair, it's actually **really hard** to get your CSS to be bigger than ~8kb after purging. Pretty confident 8kb of CSS will never be the thing that slows down the loading of your page 👍
I have learned a lot viewing this video... Thanks Simon! I still have a lot to learn about how to configure TailwindCSS in order to get more from it. I have a question, it's posible to use TailwindCSS with SvelteJS?
Heads up, none of the purge thing is relevant in Tailwind CSS v3 and later. The Just-in-Time engine never generates unused Tailwind classes to begin with. You can ignore this step completely - but the "dynamic classes" approach still stands!
Great tutorial series! I learned a bunch! I just have a few questions: 1. How can I see the filesize info at 2:52? 2. How do you run the production build in the browser without running the development server? (7:37)
Thank you, that was very helpful and easy-to-follow. But what about autoprefixer? Any tutorial doing these things with postcss would be helpful as well.
Hello, thanks for the great tutorials. I have been going through them without a hitch but, finally, I ran into a problem at the beginning of this lesson. I just added the build: "vite build" script and purge key. The page is working fine in my dev environment, but when I try to open the index.html file in my dist folder, it only renders as a white screen. Do you have a clue as to why this is happening? Dumb question...how are you opening the dist/index.html? Better yet, what is the url of the dist/index.html? It's not visible in the video. Thx!
Hi ! I love your content ! I just got into building stuff with Tailwind CSS after seeing your tutorials. I've tried to build a small game web app that follows the same configurations as you have in this playlist. Unfortunately, while everything works fine in my local development server, when I run `npm run build`, vite only picks up the HTML and CSS files but ignores my script files and other assets. Would you be kind enough to guide me on how to proceed ? I've done some Google searching but I can't seem to find any solution so far.
Same here man, all the articles and videos are all about if you're using React or Vue. Did you manage to find anything? I'm at a loss as to why it isn't working, I've triple checked everything that people have suggested, but no change 😑
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 I enter: "npm run build" I get this: "Error: Could not resolve entry module (index.html)." - I followed the video instructions. What am I doing wrongly? Thank you in advance.
When I build it, I keep getting "[vite:build-html] EISDIR: illegal operation on a directory, read - error during build: Error: EISDIR: illegal operation on a directory, read npm ERR! code ELIFECYCLE npm ERR! errno 1" Don't know what is it, tried debugging but had no success, anyone knows how this error is produced?
I somehow ended with a 127 kb css file post build compared to 8kb , tried various options but could not get it down. my code exactly resembled that of Simon but no luck. :( I do have latest version of tailwind, purge and vite. anyone else facing this ??
when I run "npm run build". it creates a dist folder with file like yours. but when I tried to open live sever, the browser shows blank page. Can you help me resolve this issue?
I believe its a paid font - Operator Mono but if u just want programming fonts with ligatures, try Fire Code or Jetbrains Mono (both free but awesome!)
What an ingenious way to working with CSS! I've watched this whole series and enjoyed every moment of it. Thank you Simon for your effort to put the essentials so nicely. I'm now going to use tailwindcss wherever I can. I'm so excited...
Been using it for a few days and it’s as good as it sounds.
Please extend this series with navbars and other essential UI components! Love the series and great tutorial especially for beginners, thank you for this :)
Just completed the tutorial. It was awesome now I will start moving my bootstrap website to TailwindCSS. Big Thanks!!
Excited to work with CSS for the first time in a long time. Love the workflow and optimizations. Looking forward to using Tailwind in my next project. The flow of this tutorial is quick and to the point, but you covered all of my production concerns in the process. Great job!
This 9 part series has been a great introduction to tailwind and learned a lot thanks Simon for these videos they are helping me get acquainted with the limitless possibilities that tailwind can provide when it comes to designing user interfaces.
The purge is the last item I was eagerly waiting as a cherry on the top! Thanks for the amazing series. Gonna jump into Tailwind and try to revive my CSS skills !
Having amazing docs as well as amazing video tutorials, man you guys are every developer's dream. 🥺
I'm officially a tailwind fan! Amazing series, i had trouble installing vite at first since its different now maybe with the updates. But I was able to push through just by referring to the tailwindcss documentation install guide. Really high quality course thanks a lot Simon!
3 days seeing these tutorials, going good so far.
Thank you for this insanely good tailwind course, super good value for time, couldn't find any other resources even close to the quality of this!
You're welcome - super glad to hear that!
This is the type of thing that most tutorials never cover. I get that companies use different build tools etc. and you can't cover them all, but having some idea how one or two work is really helpful.
De lejos... la mejor serie para ingresar al mundo de Tailwind que he visto.
This is fantastic and because of the modular utility approach I'll bet the css ends up being WAY smaller than anything I've done following the BEM method
Yep, that's my experience as well 👍 - and those repetitive CSS classes compress extremely well, both in the HTML and the CSS 🎉
Amazing. I've been using styled components all of last year but this is really compelling to replace it with tailwind CSS!
The best part is, you wouldn't even have to choose. You would augment styled components with the awesomeness that is tailwind with something like "twin.macro". It's been 7 months, I guess you already know this by now :D. In other news, Simon is a "god" tutor. Thanks for the series.
Those tuts were spot on, nice build up and very useful
Commenting here just to help UA-cam algorithm, its best tutorial by creators themselves. 😍😍
Great course! Between your teaching and the docs I was able to do this with tailwindcss 3 without pulling my hair out. Thank you!
Would love to see this series extended, or another similar one!
This video is the cherry on top for this series. Thank a lot! ❤️
Awesome tutorials. Thanks so much for taking the time.
When I started learning react, I'm really concerned about what should I use for design. This video series teach me not only about the framework, but also the design. Thank you so much for your videos. (-: Nice :-)
I think everyone have said it all. This is super good and inviting. Great work man. Tailwinds here we go...
Really going to need to see the VSCode settings / plugins you use, really beautiful!
I really enjoyed the playlist, great work!
Loved every second of this series! Thanks a lot!
Brilliant Tutorial! Hope Tailwind CSS v3 tutorial is coming soon :D
Thank you, Simon! Very complete tutorial. There are multiple frameworks or libraries for the front-end and now it's difficult to decide which one to use haha. Tailwind CSS is a very interesting option. I'll see when will be the time to use it in a real project. Cheers! God bless
Let's say you have more than one page. For example a homepage and an about page. Is there a way to configure PurgeCSS so that it doesn't include the classes used in about-us on the homepage and the other way around?
Obviously with two pages this wouldn't be necessary but if you had thousands of pages that all have their own classes your css file size would slow down the loading of any of the pages quite a lot.
Great question! Purge CSS and Tailwind don't support "code splitting" or chunking per page at this point... but to be fair, it's actually **really hard** to get your CSS to be bigger than ~8kb after purging. Pretty confident 8kb of CSS will never be the thing that slows down the loading of your page 👍
Thank you for the fantastic and quick to follow tutorials!
Excellent Work Team !!!
Thank you for sharing the tutorial. Hope the best for you and your team.
Awesome tutorial, I think its enough for to understand and to start to develop with a TailwindCSS, Great Job
I have learned a lot viewing this video... Thanks Simon! I still have a lot to learn about how to configure TailwindCSS in order to get more from it. I have a question, it's posible to use TailwindCSS with SvelteJS?
Totally didn't know thit about Purge. Thank you for this! :)
Heads up, none of the purge thing is relevant in Tailwind CSS v3 and later. The Just-in-Time engine never generates unused Tailwind classes to begin with. You can ignore this step completely - but the "dynamic classes" approach still stands!
Nice explanation and very concise videos ! I'll definitely use this framework !
Thank for this series and your great explanation. Appreciate you for putting out free contents.
These tutorials are fantastic, thank you
Love this series, so cool
Great series! I loved it!
Also thanks to it I discovered Vite and got to learn about esbuild
Thank you for the great intro!
Great CSS Framework,
Could you please share your vscode extentions and theme, I really like it.
i've finish the playlist. I like the way you explain it, thank you for the tutorial.
This tutorial is so good. Thank you so much for sharing this content! Keep it up.
That was awesome! Thank you!
Great tutorial series! I learned a bunch!
I just have a few questions:
1. How can I see the filesize info at 2:52?
2. How do you run the production build in the browser without running the development server? (7:37)
2:52 That's a little VSCode extention called "filesize"
Amazing video series, thank you!
Thank you, that was very helpful and easy-to-follow. But what about autoprefixer? Any tutorial doing these things with postcss would be helpful as well.
Great video, thank you !
for those of you who struggled to not get the styles to be applied for the index from dist, just navigate to the dist folder and run 'npm run dev'
thank you a lot
Thank you very much for these tutorials, it's really helpful
This is so much great !
Hello, thanks for the great tutorials. I have been going through them without a hitch but, finally, I ran into a problem at the beginning of this lesson. I just added the build: "vite build" script and purge key. The page is working fine in my dev environment, but when I try to open the index.html file in my dist folder, it only renders as a white screen. Do you have a clue as to why this is happening? Dumb question...how are you opening the dist/index.html? Better yet, what is the url of the dist/index.html? It's not visible in the video. Thx!
All videos are good but Last 2 videos are very awesome. No one used these useful features on NextJS Tutorials.
Hi ! I love your content ! I just got into building stuff with Tailwind CSS after seeing your tutorials. I've tried to build a small game web app that follows the same configurations as you have in this playlist. Unfortunately, while everything works fine in my local development server, when I run `npm run build`, vite only picks up the HTML and CSS files but ignores my script files and other assets. Would you be kind enough to guide me on how to proceed ? I've done some Google searching but I can't seem to find any solution so far.
Same here man, all the articles and videos are all about if you're using React or Vue. Did you manage to find anything? I'm at a loss as to why it isn't working, I've triple checked everything that people have suggested, but no change 😑
@@J90JAM Nope, nothing. Sorry.
@@rolandliwato4337 Ah damn, thanks for replying anyway.
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!
I loved the tutorials. Thanks :) I'll try Tailwind for my next project :) I also hope I can learn React :)
Thanks a lot, now get tailwind a lot better ;)
How do you add a cursor to the next match of current selection on vscode? Is it an extension?
When you highlight a text, use CTRL + D or CMD + D(on mac) to highlight the next text that matches
Nuxt's tailwind setup comes with PurgeCSS right?
More videos coming or is it already out as course? Please give some update!
The result generated by vite build is looking different than the one of vite dev. Any ideas of areas to look at?
This is how I want to do front-end from now on 🤩
Great tutorial. Thanks!
Super cool☃
When I enter: "npm run build" I get this: "Error: Could not resolve entry module (index.html)." - I followed the video instructions. What am I doing wrongly? Thank you in advance.
Hi Patrick, have you checked your file path carefully? Perhaps you just need '/index.html'?
@@HomeCode Thank you!
I use vue3 with vite and the css file already small without doing anything
Wooow I love it 🎉
Thank you that was a great help to us.
So... how does one go about running the vite server with the production build? I can't seem to find any info on that
Thanks
amazing tutorial, thank you
i love it! it's just amazing...
size = "32" would have also worked right?.
nice job thanks
Could you please let us know what set of extensions you use for VS-Code?
what did he do to see the file size?
btw which font you are using in your editor?
Is there any way in tailwind css to obfuscate my css classes in html so no one can just copy my design from the page? I used sveltekit and vite.
When and where can you use the "purge" function in tailwind? everytime I'm seeing it on config I can here "stay safe" in my mind lol. any good answer?
Hi, is there a way to remove the numbers generated in the purge files? Example: index.cea983d1 I just want index.css
When I build it, I keep getting "[vite:build-html] EISDIR: illegal operation on a directory, read - error during build:
Error: EISDIR: illegal operation on a directory, read
npm ERR! code ELIFECYCLE
npm ERR! errno 1"
Don't know what is it, tried debugging but had no success, anyone knows how this error is produced?
I somehow ended with a 127 kb css file post build compared to 8kb , tried various options but could not get it down. my code exactly resembled that of Simon but no luck. :(
I do have latest version of tailwind, purge and vite. anyone else facing this ??
when I run "npm run build". it creates a dist folder with file like yours. but when I tried to open live sever, the browser shows blank page. Can you help me resolve this issue?
Any idea on how he got that Size, Gzipped, Mime type, Created, Changed table in command line ?
I have the same question 👍🏻
Here's what I've used here: marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize
@@TailwindLabs Ty for the reply and great tutorials !
nice videos.
tailwind is awesome! I like the video!
What's the font that used in this IDE (vscode) ? I like how it process arrow functions as arrow but not => ! Any idea ?
I believe its a paid font - Operator Mono but if u just want programming fonts with ligatures, try Fire Code or Jetbrains Mono (both free but awesome!)
It's actually dank mono 'f' is very different and not similiar to operator mono..!
Yeah, it's dank mono
@UCOe-8z68tgw9ioqVvYM4ddQ how to "drum roll" and when you created the "dist" folder and for what plz tell us?
I think he has selected filesize go to vdo 3:03. Right side you can see a dropdown filesize as selected. Hope it help sorry if I am wrong
Many Likes to purge!!
kenobi
Please blink
Hi, In Tailwind CSS V3 purge has changed to content. Thus add `content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],`