Why You Should Try Tailwind CSS
Вставка
- Опубліковано 22 лип 2024
- Join my premium 2024 bootcamp here learnwebcode.teachable.com/p/...
Let's get started using Tailwind CSS in our projects.
GitHub link for this video: github.com/LearnWebCode/tailw...
0:00 Intro
1:56 The Problems With CSS
7:39 What Is Tailwind?
10:59 Actually Getting Started
18:20 GitHub Examples
22:40 Markdown or Blog Content?
27:31 Custom Colors
29:38 Custom Fonts
34:51 Typography Plugin
37:03 VS Code Extension
Follow me for updates on new videos or projects:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode
You're an exceptional teacher, Brad. Only reason I can see why you don't have millions of subscribers is that you don't have many courses for free in youtube or , may be, you don't upload videos in youtube regularly. I don't think you even care about many subscribers. But, we, as students, really appreciate what you do for free. Each of your videos is like blessings for us. Thank you very much.
You are right, I think brad has just not given UA-cam his full time and he cares not about subs but instead focus on teaching the few he has....
He is a great teacher indeed
As a Teacher, he stands out from the others because he does not consider himself a UA-camr.
The way you explain things is a blessing in itself , you are an amazing teacher man !! Thank you alooooottttt. Keep posting never stop !!
Making learning fun and rewarding. Thanks. Python someday :)
I really hope that the great folks at Tailwind have shown you some love -- this was the single greatest presentation for why TW is the CSS tool of choice that I have come across. Incredibly thorough. Thank you for putting it together
0:10 Brad release more coupons for your courses is what the cat said.
Me: That’s a very smart cat that deserves a treat.
😂😂
I've been using Tailwind for a year. Every statement you made, had me nodding my head. Great video!
This really helps a lot. I always struggle with which framework/pre-processor to choose when it comes to CSS.
The last bit about choosing a framework like this for reusable components makes so much sense.
You are a genius at taking scary topics and making them so friendly
So appreciative of your way of explaining concepts 🙏
Great tutorial and his teaching alone is an art, never enjoyed a tuts like this one ad now I subscribed for good.
Acutally you are the first guy who convinced me to try it out. Trust me a lot of guys did try. Thnaks tho for the quick and straght to the point
Brad..Stay blessed homie..Thank you for your honest and straight forward help..I hope you get paid and more so…for what you properly put out
Thank you! 🙌
An excellent introduction to Tailwind CSS, so beautifully presented. Thank you, Brad.
{2023-03-06}
haha Love your cat Brad. Great points and explanation as always. Thanks man!
Brilliant as always, Brad!
Excellent video. Thanks Brad!
Brad, really appreciate your taking the time and trouble to run through these examples using Tailwind. Thank you. 🙏😎👍
I definitely hated the look of the markup with all the classes when I first looked at Tailwind. However, I do agree with the benefits it offers when working on larger scale projects with a team of devs. It means that anyone on the team can make an adjustment to the css for any markup file and it’ll be obvious who made the most recent update and commit. Whatever gets amended won’t break the site’s styling.
What I would love to see is a Tailwind compiler stage that analyses what’s common across all classes and replaces them with a few classes with short hashes for names at build time. That way, source markup files can remain bloated without blowing up the production files. I have been experimenting with Chakra-ui for react which does this. It works quite like Tailwind except utility styles are set as props rather than classes. It then reduces all the props down to only a few classes for any html tag.
Thanks! That's a really good point. For client-JS rendered HTML, the duplication doesn't bloat the data transferred, but for server generated HTML from React components (Next.js, Gatsby, hand-rolled) the data transfer is a valid concern. However, if the HTML is minified and gzipped I wonder how much bloating there'd really be from class names. Either way the Chakra-ui approach you described sounds promising, I'll check it out!
You can also override in-line with square brackets: p-[271px]. It used to be a separate thing you had to add to config file, but it's now native without needing to setup "jit" in the config.
You are my favourite front-end tutor sir and I'm watching every one of your videos multiple times. Take me as your padawan please. Need more pizza or unicorns.
🍕🦄 Thank you!
I think you convinced me to use it, i tried once but i didn't like it because of its messy classes. Thanks Mr Brad.. you are a great teacher.
Thanks! I also heard about Tailwind several times but dismissed it because I thought "I didn't need it" or that it was messy. It wasn't until I saw this interview with Simon Swiss and Debbie O'Brien that I was convinced ua-cam.com/video/D84pmKtQB3w/v-deo.html
Two points:
1) Tailwind only makes sense if you are using component-based development using React/Vue, etc. or using quick prototype. Otherwise, it does not make sense at all to use utility classes to design production website. There will be so much repetition and updating design will be nightmare. It will almost be line using inline-style... no difference.
2) As for bootstrap, people forget it also provides tons of utility functions. and with newer versions it has even more, So you don't have to use the bootstrap predefined components, and only use the utilities... however, having direct access to those components is so useful when needed. and no, not every bootstrap site looks the same... There are so many ways one can customize using bootstrap.
I genuinely don't see the super benefit of tailwind... because to use tailwind you must know a lot of CSS anyway, and at that stage you can just use pure CSS in the react component, instead using utility classes.
Anyway I am not against tailwind, I use when I need, but not the way sometimes it is advertised.
Thanks for the discussion. I agree that Tailwind without some sort of template engine (client or server side) to reduce duplication is less than ideal. However, if a project is small / simple enough that you don't have a template engine, then perhaps it's small / simple enough that the repetition of Tailwind won't be too bad. Even though I avoid it when possible, the @apply tool is there to avoid repetition when a template engine can't save the day.
On a project without a template engine there's really no ideal situation no matter what you're using for CSS, because if you don't have React or Vue that means you're not getting any CSS-in-JS tools either. Which means you're stuck with problem #1 from this video. But to be fair, that's only a problem on large sites that are getting frequent updates + new pages etc...
You can use pure CSS in a React component (that solves problem #1 from the video), but you have to put in effort to solve problems #2 and #3 from the video, whereas Tailwind solves those problems for us.
I think the super benefit of Tailwind is less for the developer that's writing styles for a component or two; and more for the person who is ultimately responsible for managing and overseeing the design of a huge project that's being created by multiple developers.
@@LearnWebCode Thanks for the reply. Ya I see the problems you are mentioning and what Tailwind is trying to solve...
but from my experience, it is introducing anti-pattern in the code base and people started to style for example, simple h1 tags using bunch of utility functions where they can simply use a single class and apply the styles there.
I think css names in the HTML should be descriptive - like headings, banner, etc. instead of properties that they do. Anyway, I like tailwind, but not a fan.
I kind of disagree though:
1. Product always change/evolve which requires a lot of work to tweak the styles here and there, it's definitely the place where tailwind would shine;
2. If using React/Vue, one could use component based style engines (styled-components/emotion), or stick to the original css style, but in my experience, none is better than tailwind. The style engines will eventually requires you to make styling part of the component logic (pass classnames down or what), which is kind of frustrating when project grows, cause you will have to mix style logic with app logic; And if use pure css, the video have told all the benefits;
3. I don't know the newest bootstrap, but before and include bootstrap 4, it's a much more opinionated style engine than tailwind, it might be comparing it to MUI rather than tailwind I think;
Hi Brad, amazing stuff as always. It seems you are pretty excited. What's your opinion about unocss?
Love you Brad Sir💕
This video is absolute gold!
Awesome! Thanks
What do you think about CUBE CSS and the proposed way to manage the components, utilities, and blocks? It mixes tailwind and BEM with saas or any other CSS tool.
Awesome tutorial as always, could you please create a Gutenberg blocks for fetching products basically woocomerce blocks using react js?
Hey brad, what do you think about using tailwind with wordpress custom websites, or using it with custom themes?
If this is answered somewhere already my bad
37:32 😄. you are loved. thnks alot
I find the idea of Tailwind good and effective but needs wrapper class to solve the problem of ugly looking of bloated CSS classes in HTML tags as soon as the user finish coding?
Say we use 20 h2 on a page do we have to call tailwind utility classes for each h2 or can we set it for one h2 and then apply to the rest of the page h2.
Yes, you can use the @apply tool in Tailwind to avoid having to type out the classes each time. You can use @apply on a wrapper / container element and use descendent selectors like I do around 22:40 in the video, or you can create a class that you apply directly to the h2 element itself. I prefer the descendent selector @apply approach, and use that for the generic main text content on each page. tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
do you understand me? do you know what happens when you hover over Tailwind class in the HTML tags? it shows you the details (actual CSS representation of that Tailwind class) I mean the same idea, by giving the programmers the ability to activate and deactivate wrapper class "new feature" I think that can solve the problem of bloated Tailwind classes in HTML tags?!.
I think so.
Holly Molly
To be honest in your course on Git in the CSS section the way you explain how to write BEM code is more or less like developing Tailwind CSS ourselves
Haha, that's very true! When I made that course I was fresh from a job where my boss/mentor was a big fan of utility classes and BEM. Needless to say, when Tailwind emerged I saw that same boss praise it on Twitter, because it's solving a lot of the same problems, just taking things to their extreme logical conclusion and doing all the work for us 😂
My main concern with these kinds of tools is separation of concerns. When you started out as a front-end developer you learn to separate your styling from your content in html and css files. When using a tool like tailwind you are effectively styling in your html again! It might not be inline styling, but the way your page looks depends on the utility classes you put on your tags in your html. At 11:15 it even says ‘Rapidly build modern websites without ever leaving your HTML’. Maybe I’m to much of a purist, but I think that is wrong. The way a page looks should not be written in your html. If there is a problem with css we should be looking at what can be done in the css to fix it.
I was taught those same ideals when I first learned front-end development, and until recently I had the same purist way of seeing things, so I'm not "attacking" your viewpoint, but for me, I started questioning *why* should the HTML and CSS be separate concerns? Adding lots of classes with Tailwind doesn't in any way hurt the accessibility of a website, and with a templating solution in place, it doesn't hurt the maintainability of the website for the developers. I originally learned web development during the CSS Zen Garden era, so I was very much taught that you should be able to redesign an entire site without changing a single character of HTML. But with the templating solutions we have nowadays, I can't come up with a single concrete reason as to *why* you should be able to redesign a site without changing the HTML. While we should absolutely use semantic element choices (h1, p, nav, section, footer, etc...) to make our content as accessible as possible, I'm not sure how keeping our HTML and CSS separate helps anyone or anything?
This concept of separation of concerns started out in the younger years of the web when sites were mostly "web pages". In the current era of "web apps", we have to carefully consider the applicability/relevance of this paradigm to what we are developing, what stack we are using, etc. On a per-project basis, it should be a question of whether such approach to separation of concerns is altogether worth doing. There's a reason why the web development community has accepted convergence of HTML and JavaScript in React/JSX for example, and why the concept of CSS-in-JS has become popular. Many web developers are happy with putting everything in JS (React + CSS-in-JS solutions). It seems the philosophy has shifted towards convergence rather than separation of concerns, because the real-world problems, solutions, and processes around them also evolved with time.
The first comment to the best teacher.
How can u read my mind? 🤯, Sir, i m about to search tailwind css, and u just uploaded a video.
Another gems we get....
Thank you very much ..
You are best
Do you have any plan to make a course on tailwindcss?
Oh, that's an interesting idea. I don't have one planned at the moment. Do you think the course would be about teaching CSS *and* Tailwind? Because if we assume someone already knows CSS and just wants to learn Tailwind I'm not sure if there's enough material for an entire course, but I guess it wouldn't need to be a super long course. But maybe a course where we learn CSS with the help of Tailwind would be interesting. Good ideas to brainstorm with, thanks.
@@LearnWebCode yes "Learning CSS with the help of Tailwind" is a good idea and a nice title for the course as well 🙂
You should add tailwind to your wordpress course and git developer as well.
I think people might not like me forcing an opinion like Tailwind on them in the WP course, but I like the idea; I'll work on updating my "Boilerplate WordPress" repo to include Tailwind and make a quick UA-cam video about it.
Thanks Brad, U r amazing. Please make more React tutorials like a crypto currency user / admin dashboard.
I wish there was a way to use Tailwind on a WP website while keeping the file small. The only option is CLI, but the file size is enormous.
Hi, do you mean you'd want it to be able to see which classes you're using in blog post database content? Or would you just like it to be able to see which classes you're using in your PHP and JS templates / blocks? I'm going to work on modifying my WP Boilerplate to add Tailwind; will make a video about it shortly.
@@LearnWebCode Hi, I mean adding tailwind classes in PHP templates, the issue is even if we use 1% of Tailwind classes we still have to include a huge tailwind CSS file with 99% of it not used. Unless there is a way to purge unused CSS like what we do in node/webpack environment.
Hello, maybe they can solve the main problem of the ugly looking of bloated CSS classes in HTML tags, by giving the ability to programmer to set wrapping calss for each tag (automatically will be better), means as soon as the programmer finishes his styling, he can click a new feature that can turn all the Tailwind classes into one wrapper class in each tag, I mean he can retrieve the original classes later just by disabling this new feature.
I think that it is doable: and easy to adapt, they only need to inject wrapper classes and eject them later for reviewing or editing mode.
that way it become much easier to review and edit the code later instead of keeping it bloated with a many CSS classes for each tag.
is that possible?
thanks.
Hi, I think the @apply tool in Tailwind is similar in theory to what you're describing.
@@LearnWebCode I do not think so, it is just a tool that give you the ability to hide Tailwind classes within a wrapper class, then you can expand it to look inside (original Tailwind classes as needed) that way they can hide them as they review or edit the code, so that can reduce the problem of many Tailwind classes those bloat the code. I think they can build just extension to vscode
I think that Tailwind is good (agree with you).
Tailwind or CSSModules?
CSS Modules are great, and they solve the majority of problem #1, but you still have to spend the brain horsepower to invent names for everything. I've never used CSS Modules with a full team of devs, but for problem #3 I'd imagine it's about the same as most other tools aside from Tailwind, you have to invent and enforce amongst your team a uniform way of keeping things organized (variables, utility functions, when to pull things from shared imported partial files etc...).
Tailwind can't be installed on my iMac. I tried and it never works. Tried for days. It's a useless way to install. I was also told tailwind is only good for prototypes. Not sure if that's true as I've never used it.
Are you able to install the latest LTS version of Node from (nodejs.org/)? With that installed Tailwind should work, what sort of error message do you get when trying to use it?
@@LearnWebCode yes, I have the latest nodejs installed.
@@LearnWebCode ua-cam.com/video/h9Zun41-Ozc/v-deo.html I followed mac install exactly and it wont work. Wish you could do a remote install or zoom to assist as it' frustrating for me. I want to move ahead, but can't as I'm still learning, plus tailwind can make navigation for my website responsive, I can't do this as I don't know how to with media q. I have 8.60 version nodejs in terminal.
do you have a discord server?
I don't. I've wanted one, but I'm not sure how I'd keep it moderated and prevent people from posting horrible / illegal things. I think community building takes a lot of energy and I wouldn't have enough left for actually teaching then.
why is there no english translation
If the paradigm around using CSS has been like this (tailwind's approach) from the start, a lot of things would have been so much simpler today. Semantic CSS shouldn't have existed, with all due respect to its proponents. To be fair, semantic CSS had an actual raison d'etre at the time because the component-based HTML templating wasn't yet much of a thing then. But things have changed a lot since then, and so isn't it about time to change our ways of doing CSS to evolve along with the current paradigms?
that will not affect the main Idea of Tailwind because they can eject all wrapper classes during bundling process thus running time, I think that can make Tailwind more popular and number one on the top list.
Oooh, I see. So let the HTML be messy with Tailwind classes in the source code files, but have the automatic bundler tool create the unified wrapper classes for the HTML / CSS that get's delivered to visitors? That's a cool idea; I think someone else in the comments had a similar idea using something called Chakra UI.
@@LearnWebCode thanks I will check it.
@@LearnWebCode yeah it does exist, hopefully the same idea, I will check it out. thanks anyway.
First to comment
The problem with Tailwind is that it makes the HTML bloated
Exactly!
Your cat I thought it was your wife
dumpster fire problem statement. on the same frequency of PHP can be written in procedural way, let's use Laravel
I see the websites using this being bloated.
At least, CSS is more secure than JavaScript.
Too complicated, keep it simple
I'm the biggest proponent of keeping things simple. For simple projects I recommend using simple plain CSS (first slide in the video). The idea is that when a website is large and has tons of pages and receives frequent updates, Tailwind is the simplest solution. Regular CSS (for large projects) is the least simple solution; it results in bloated files that become append-only because the complexity of all the rules and cascade and obscure pages that *might* use a rule means you can't edit anything as time goes on.