08: Optimizing for Production - Tailwind CSS v2.0: From Zero to Production

[@ashutoshbw]

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...

[@TheRafark]

Been using it for a few days and it’s as good as it sounds.

[@donmikkodanm.olmillo8154]

Please extend this series with navbars and other essential UI components! Love the series and great tutorial especially for beginners, thank you for this :)

[@shekharpatil02]

Just completed the tutorial. It was awesome now I will start moving my bootstrap website to TailwindCSS. Big Thanks!!

[@davidalsbury5980]

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!

[@sanketss84]

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.

[@J90JAM]

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.

[@ApionDesigns]

3 days seeing these tutorials, going good so far.

[@cole_mcconnell]

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!

[@simonswiss]

You're welcome - super glad to hear that!

[@VaidasBagdonas]

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 !

[@NiaNic425]

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!

[@PavanKumar-tv2ls]

Having amazing docs as well as amazing video tutorials, man you guys are every developer's dream. 🥺

[@drujas]

De lejos... la mejor serie para ingresar al mundo de Tailwind que he visto.

[@pukhraj.prajapat]

Thank you Simon! That was a wonderful quick but detailed session. Saved a lot of time for me :)

[@jasonvictor1798]

Amazing. I've been using styled components all of last year but this is really compelling to replace it with tailwind CSS!

[@SowedCastelli]

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.

[@ThaRealIansanity]

Great course! Between your teaching and the docs I was able to do this with tailwindcss 3 without pulling my hair out. Thank you!

[@cintron3d]

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

[@simonswiss]

Yep, that's my experience as well 👍 - and those repetitive CSS classes compress extremely well, both in the HTML and the CSS 🎉

[@PokeBowl82]

Those tuts were spot on, nice build up and very useful

[@lscodeschool957]

I think everyone have said it all. This is super good and inviting. Great work man. Tailwinds here we go...

[@BaileySimrell]

Would love to see this series extended, or another similar one!

[@GharKiKheti]

Commenting here just to help KZbin algorithm, its best tutorial by creators themselves. 😍😍

[@froggologies]

This video is the cherry on top for this series. Thank a lot! ❤️

[@todorkonjevic7483]

Loved every second of this series! Thanks a lot!

[@mhemaungthuwin7916]

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 :-)

[@arniep0123]

Awesome tutorials. Thanks so much for taking the time.

[@ethanimooney]

Really going to need to see the VSCode settings / plugins you use, really beautiful!

[@henryherrera5043]

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

[@chiboub]

I really enjoyed the playlist, great work!

[@samimaxhuni]

Awesome tutorial, I think its enough for to understand and to start to develop with a TailwindCSS, Great Job

[@andersonchong7625]

Thank for this series and your great explanation. Appreciate you for putting out free contents.

[@salesforcetroop]

Excellent Work Team !!!

[@simonswiss]

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!

[@oliver_ai]

Great series! I loved it! Also thanks to it I discovered Vite and got to learn about esbuild

[@ManadayMavani]

Thank you for the fantastic and quick to follow tutorials!

[@Hurtwolf]

Totally didn't know thit about Purge. Thank you for this! :)

[@drewfoster1033]

These tutorials are fantastic, thank you

[@elliotho3015]

Brilliant Tutorial! Hope Tailwind CSS v3 tutorial is coming soon :D

[@tsioryfitiavanaanhykrishna6992]

Nice explanation and very concise videos ! I'll definitely use this framework !

[@vanngoctan34]

Thank you for sharing the tutorial. Hope the best for you and your team.

[@damagee8141]

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.

[@simonswiss]

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 👍

[@JoseGarcia-vr8mx]

This tutorial is so good. Thank you so much for sharing this content! Keep it up.

[@DiazGunturFebrian]

i've finish the playlist. I like the way you explain it, thank you for the tutorial.

[@edgarasben]

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)

[@eihab]

2:52 That's a little VSCode extention called "filesize"

[@范范-z8s]

Love this series, so cool

[@astrodeeptej]

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'

[@kritsatornsaengweang715]

This is so much great !

[@master0fnone]

Thank you for the great intro!

[@eskimo6097]

Amazing video series, thank you!

[@rick9348]

How do you add a cursor to the next match of current selection on vscode? Is it an extension?

[@francisudeji209]

When you highlight a text, use CTRL + D or CMD + D(on mac) to highlight the next text that matches

[@nicholassingh138]

what did he do to see the file size?

[@mahdisoultana4926]

Thank you very much for these tutorials, it's really helpful

[@a7medalyousofi]

Great CSS Framework, Could you please share your vscode extentions and theme, I really like it.

[@gurpbiedurpbiedurp8811]

Thanks a lot, now get tailwind a lot better ;)

[@faythe03]

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!

[@ulvidamirli2758]

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.

[@fabiothebest89lu]

I loved the tutorials. Thanks :) I'll try Tailwind for my next project :) I also hope I can learn React :)

[@djubadjuba]

The result generated by vite build is looking different than the one of vite dev. Any ideas of areas to look at?

[@poolmillions]

So... how does one go about running the vite server with the production build? I can't seem to find any info on that

[@byting_my_steez]

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!

[@lh536]

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?

[@rolandliwato4337]

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.

[@J90JAM]

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 😑

[@rolandliwato4337]

@@J90JAM Nope, nothing. Sorry.

[@J90JAM]

@@rolandliwato4337 Ah damn, thanks for replying anyway.

[@max_mrtnv]

That was awesome! Thank you!

[@sanathkumar1698]

More videos coming or is it already out as course? Please give some update!

[@mibaatwork]

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.

[@josuebarros-desenvolvedorw2490]

Nuxt's tailwind setup comes with PurgeCSS right?

[@deepakgour2372]

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?

[@Aakash-lz5ou]

All videos are good but Last 2 videos are very awesome. No one used these useful features on NextJS Tutorials.

[@tiltMOD]

This is how I want to do front-end from now on 🤩

[@patrickholzer8522]

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.

[@HomeCode]

Hi Patrick, have you checked your file path carefully? Perhaps you just need '/index.html'?

[@patrickholzer8522]

@@HomeCode Thank you!

[@silverdr]

Could you please let us know what set of extensions you use for VS-Code?

[@kshitijkhot1401]

btw which font you are using in your editor?

[@AhmedAli-jx9ie]

I use vue3 with vite and the css file already small without doing anything

[@cesarrotela]

Hi, is there a way to remove the numbers generated in the purge files? Example: index.cea983d1 I just want index.css

[@princepatrickc4611]

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?

[@sanketss84]

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 ??

[@theogilardo7180]

Great video, thank you !

[@miguelklappes8525]

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?

[@ranibenmahmoud6298]

i love it! it's just amazing...

[@UBLAunripped]

Thank you that was a great help to us.

[@mainakdas5819]

What's the font that used in this IDE (vscode) ? I like how it process arrow functions as arrow but not => ! Any idea ?

[@delonnkoh2865]

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!)

[@modz9711]

It's actually dank mono 'f' is very different and not similiar to operator mono..!

[@mainakdas5819]

Yeah, it's dank mono

[@surij8376]

size = "32" would have also worked right?.

[@creabikuix6019]

thank you a lot

[@TheNation2013]

Any idea on how he got that Size, Gzipped, Mime type, Created, Changed table in command line ?

[@matespinosa09]

I have the same question 👍🏻

[@TailwindLabs]

Here's what I've used here: marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize

[@TheNation2013]

@@TailwindLabs Ty for the reply and great tutorials !

[@mostafahosseini2762]

That's Great , Thanks !

[@xingbagan6122]

tailwind is awesome! I like the video!

[@saifazomr7371]

@UCOe-8z68tgw9ioqVvYM4ddQ how to "drum roll" and when you created the "dist" folder and for what plz tell us?

[@pradeepeppa4166]

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

[@goncalodumas]

Great tutorial. Thanks!

[@raitasorin]

Wooow I love it 🎉

[@douglasDGmarques]

amazing tutorial, thank you

[@soultouchingsongs]

Super cool☃

[@astorayestas7885]

nice job thanks

[@wmafendi]

Thanks

[@kshitijkhot1401]

nice videos.

[@alitnk306]

kenobi

[@NadeemGorsi]

Many Likes to purge!!

[@SeasonSaw]

Please blink

[@MirzaMonirulAlam]

Hi, In Tailwind CSS V3 purge has changed to content. Thus add `content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],`