https://skl.sh/designcourse21 – First 500 people to sign up will get their first 2 months free!
— 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!
My site: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
– – – – – – – – – – – – – – – – – – – – – –
Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
source
Enjoy? Sub up!
9:16 "Hopefully that makes sense, but you're gonna see if it doesn't make sense you'll see how it makes sense…"
6:58 reminds me of Team America ‘darkest darker dark’ lol
Let’s go back to writing inline css 🤣🤣🤣
TailwindCSS jit compile is just fraking fantastic. pretty much instant compile on demand even if you add classes to html files
Euhm
Also pay $270 to see how to create a basic toggle element to the Tailwind developer's standard at tailwindui/components… Is this having a laugh? I can see why it's called Tailwind because it's a load of horse fart.
Is this a tool for the kids that are too cool to learn css?
Please how did you all get the CDN link i guess the Tailwind css website is updated now is quite different from what am seeing in this video
Super thx
Thanks Simon for your vids. its really helpful. i have been watching and subscribed a few months earlier. You are great. Keep it up
But are we seriously ignoring that monitor behind you?
Those small adjustments, killed the tutorial :)))
The extractor could be updated to content.match(/[w-/:]+(?<!:)/g) || []
No effects in my browser.Whats the reason?
I'm learning Tailwind. thanks for the video
Hi sir .This is srinath. how are you sir. can you do one video for me sir. That is i am send one template exact same i want that output the link is this https://dribbble.com/shots/6089302-Uber-Eats-Order-Food-Online/attachments do the video sir explain each and every step sir. i want exact only related to static of that exact page in the link is their .i want styles exactly same as this template .please do it sir. please reply me as soon as possible.
Hi sir that was nice explain
And use 'Open Preview' feature, to see a preview of the file as a simultaneously short cut is Shift+Command+V
Great tutorial with just simple CDN version. it's be'er to the newb
install Tailwind CSS InteliSense using with VSCode. it makes working better
hello sir ,
what better
framework Tailwind vs bootstrap ???
Great presentation and amazing tutorial. Thank you!
How to use tailwind css in django
Well you skipped over the adjusting process for bigger screens so 👎
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!
What's up with time cut? basically first 20minutes wasted
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 😉
Great great video!
A github repo with the code would be just perfect.
At least it already exists and i just fail to find the link.
in development use the cdn, thanks for this tip
great stuff
Good one, &plz make a video for how to VS Code extension & setting backup if windows formet.
Man, this is so, so bad… Look at all those classes in the HTML lol Its really hard to see wtf is going on o.O I really don't understand how people can like this type of framework…
@help post
how can we add autoprefixer i tried to add but it didnt work
plz help me
WTF was that cut at min 22? Man you had me on the zone! what happened?
hello sir i saw your beginner video its very helpfull and nice to learn..
can you make an video on event management company basic web .. how to do wire frame of it.
When i try to run npx tailwind init, I get "unexpected token". Node and NPM are up-to-date.
I dont understand why some youtuber like to show their own face, but thank you for the great content…
Why did it skip the latter half of the tutorial?
What is that syntax "class:modifier" ex: md:flex?
Hello Sir,
I tried executing the below code, however, could not see any output. Please help with the solution to resolve the same: –
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content='width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Tailwind css</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-red-lighter">
</body>
</html>
When I do f12 in Chrome, no class in body is shown.
Thanking you in anticipation.
Taruchit