Web Design with NO CSS? TailwindCSS Crash Course

-- What? NO CSS?! Well, sort of. TailwindCSS is a "utility-first" CSS framework that allows you to build UI's without writing actual CSS. And today, we're going to build a UI using this approach. We're going to dive right in using a CDN, then, I will show you how to integrate PurgeCSS and CSSNano within PostCSS to drastically shrink the size of the final CSS.

Instead of writing CSS rulesets in a CSS file, you define certain classes in the HTML class attribute to build your layout, with properties like margin, padding, font properties, layout properties, and much more..

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[JamWard]

One small thing I'd suggest, at the 20:50 mark, rather than adding margin-top to your paragraph element to align it vertically centre with your image, you could have gave the containing dive a class of "items-center", which would automatically centre all it's siblings. That way you don't need to play around with the correct margin-top to get it perfect.

Keep up the great work!

[florianargaud]

That was awesome! Especially the part where you explain how to use PurgeCSS. I spent way too many hours on Google searching for this, and you explained it in like 2 minutes. You are the real MVP!

[robert-mud]

I personally hate atomic CSS (including Bootstrap, Skeleton, and other CSS framework) because when you scale a platform for ages and developers start to include different frameworks in multiple pages, it becomes extremely difficult to maintain that platform. This happens when you don't keep a strict development methodology/convention, but when used right it helps a lot and makes development faster. As always, nice tutorial!

[ClarkKentYoung]

Tailwind is really great. Especially because it uses PostCSS, and you can config almost everything. And based on my experience writing less CSS is so much easier to maintain and to be consistent with your design. Waiting for Tailwindcss 1.0!

[anonymouse]

Just started a project with Tailwind. Perfect timing again!

[zamanEhsani]

Thanks Simon for your vids. its really helpful. i have been watching and subscribed a few months earlier. You are great. Keep it up

[snakone]

i rather have to write some css rules than having the html flooded with classes, anyway its a good solution if you want your site doesnt look like boostrap

PD: really like the css extractor!

[nikolaynikolchev]

You are great with all your stuffs. Keep in this direction. Congrats!

[Sean-Smith-Photos]

I love tailwind. Have built 2 sites with it already.

[indiansoftwareengineer]

You deserve a million subs. I wish to see that at end of 2019. BTW nice video Sir.

[FredricCliver]

And use 'Open Preview' feature, to see a preview of the file as a simultaneously short cut is Shift+Command+V

[vasilelabici]

Those small adjustments, killed the tutorial :)))

[andrewmaldonado]

Super fan of you Gary, NOT a fan of these frameworks which don't seem to solve real developer problems or advance the industry. The HTML code is now so busy with styling rules you might as well have written inline css with all the utility classes required to style it in tailwind. Personally, I'm sticking with raw css, html, javascript - and hey web components while we're at it ;)

[gamer]

TailwindCSS jit compile is just fraking fantastic. pretty much instant compile on demand even if you add classes to html files

[xwdarchitect]

Interesting tool, though the signal to noise ratio in a markup written like this makes it barely usable (readable) in sizeable apps I believe, though I didn't try. I prefer defining two classes on a single div at max: one class for layout (e.g. row / column / row-stretch etc., defined in a css), and one for styling (e.g. header, left-panel, button, defined locally to the component). This makes it easy to grasp elements layout, what element corresponds to what end ensures styles isolation across components / pages.

[razenkellesly]

You are genuine person you bring creativity to my head ... NICE WORK ... Keep going :)

[kareldries]

Thanks Gary, great explanation! I learned a lot.

[tamhuynh]

9:16 "Hopefully that makes sense, but you're gonna see if it doesn't make sense you'll see how it makes sense..."

[fxnoob]

I'm learning Tailwind. thanks for the video

[CoderSprint]

Upto 22:29 i was watching carefully, great video but boom! 22:30 "i am going to make some adjustments.." practically you just skipped 90% of things.. i dun feel motivated to watch further.