Tailwind CSS is a utility-very first framework which is a little distinct than CSS frameworks like Bootstrap or Bulma. We are going to construct a Tailwind landing web site so we can understand how promptly we can develop types for our web-sites.
CodePen:
Chris’s YouTube:
Chris’s Programs:
Tailwind:
Respond:
Chris’s Twitter:
Timestamps:
:00 – Intro
:31 – Tailwind Introduction
1:52 – Commencing a CodePen
3:00 – Tailwind vs Bootstrap
7:47 – Starting our Landing Website page
8:40 – Building the Header
20:41 – Developing the Hero
26:09 – Responsive Variations
30:51 – Making the Characteristics
36:11 – Creating the Footer
You forgot to tag your Youtube channel: https://www.youtube.com/c/ChrisonCode/videos
Really loved that tailwind introduction
So, this is the guy behind scotch.io. Thanks a lot man, love your website.
I was a bit skeptical before, but turned out to be a great learning! Thanks.
I love it,thanks
pls help asap, tried to fix it out the last 2 days
Could not proxy request /api/auth/user from localhost:3000 to https://localhost:5000
Wow nice, a css framework with css language without touching css, i want to learn it
i love vanila css – thus tailwind/bootstrap seems to be bootless and not fun.
Where do you find these people Brad??? This guy is AWESOME TOO! WTf, I can't believe I did not found him earlier
Hi Sir, is possible to combine angular material with tailwind?
CSS was invented so we could stop styling websites directly in the HTML, now we are back to doing exactly that…
Really enjoyed this. However… Html semantics are really important. I see this stuff happening a lot with frameworks
tailwind. making bootstrap 5 irrelevant.
this is so dumb. if you do css in js you do the same, with a real css and more control to your code. i don't get it why tailwind is so popular. at all. you just have to use different terminology for css. so it's py instead of padding-right & padding-left. m instead of margin.. etc. so let's call it a shortcut.
edit: this is even worthless with frameworks like react and vue. You write a css component and you done.
WOW! This guy is so good! Thanks 🤩
great!!! thank you.
Thanks for this awesome tutorial! Tailwind indeed looks handy in small/simple projects BUT: 1. From what I can tell we'll still need to add some custom CSS on some elements or the HTML markup can become easily "overcrowded" like the link from your example at 19:21 2. Imagine having 50+ elements requiring more complex CSS code, what then? Repeat over and over again the same 20+ classes on all similar elements? Why this way when we can easily apply all that code into a single class..
Whats a super easy way to purge/minify the Tailwind css??
The video was awesome, huge thanks. I really enjoyed Tailwind as it appears to be more intuitive.
Thanks for this fantastic tutorial
Few free Tailwind CSS components to help you started
https://www.themes.dev/free-tailwind-css-components/
Very interesting,
But would you use it for production or just prototyping?
Chris does an awesome job at explaining things clearly. While learning from this tutorial, I also learned some shortcuts/tricks I was not aware of in VSCode. You deserve more followers Chris— fantastic job!
Anybody know what font he's using?
Love what you do, I also try to explain complex ideas in beginner language on my channel, I would appreciate your support https://www.youtube.com/channel/UC6N4i972Z7F-ozmUWDakS1Q
Love what you do, I also try to explain complex ideas in beginner language on my channel, I would appreciate your support https://www.youtube.com/channel/UC6N4i972Z7F-ozmUWDakS1Q
Great tutorial, it also increased my understanding of basic css.
13:40 how to creat multiple cursers out of the blue like that
I noticed you are using <div> instead of <section>
Why is that ?
Fuck… Tailwind is awesome…
This was my first time designing with Tailwind CSS. Although, I am still little confused about how to align the right side of the header section for smaller screens, I'm happy with the result and the introduction through this tutorial. It was easy to follow along with. Thanks for creating this project tutorial!
Wow… Nicely taught.
7:10
Marvelous..!!!
Good content, but this guy reminds me of when we had to submit a 2000 word report and use a ton of filler words. Just get to the point, no need to say 20 words if you can replace them with 2
We always used to end up making classes to do utilitarian things. I think I am going to be well suited to this moving forwards. Thanks. Also great integration in Next.js and VS Code.
Is this codepen shared? After seeing it built it would serve as a great reference 🙂
Great introduction & tutorial! Will checkout your webpages! And 100 thanks for the timestamps!
So powerful. You could design this design in 10 minutes knowing Tailwind.
Thanks Brad for introducing us a new content from cooperating with others devs.
How do you get the font like that? In the VS Code editor.
28/04/21 – 1.5M subs
Very nice, loved it, tailwind supermacy from now on
ur accent so good dude, I know u r Indonesian people