10 Tailwind Classes I Wish I Knew Earlier
ฝัง
- เผยแพร่เมื่อ 18 มิ.ย. 2024
- Tailwind has thousands of classes, but 99% of them are just one-to-one mappings to CSS. There are a few classes, though, that go beyond just mapping directly to CSS and these classes are incredible for writing high quality clean code. In this video I am going to share the 10 Tailwind classes I wish I knew earlier since they make writing Tailwind code so much easier.
📚 Materials/References:
TH-cam Home Page Tailwind Clone: • How To Create The YouT...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:42 - #1
02:10 - #2
02:38 - #3
04:03 - #4
04:47 - #5
05:36 - #6
06:01 - #7
07:57 - #8
10:05 - #9
10:47 - #10
12:01 - Bonus
#Tailwind #WDS #CSS
![ป่ะป๊าเลอา ชื่อ ??? [ดูคลิปเต็มหน้าช่อง] #Short | PANG ORNHIRA](http://i.ytimg.com/vi/ssxX0VkJCTo/mqdefault.jpg)
00:00 - Introduction
00:42 - #1 - container
02:10 - #2 - size
02:38 - #3 - divide
04:03 - #4 - space
04:47 - #5 - line-clamp
05:36 - #6 - truncate
06:01 - #7 - working with gradients
07:57 - #8 - ring
10:05 - #9 - using animations
10:47 - #10 - working with screen readers
12:01 - Bonus - @tailwind/typography
True hero
the Web dev simplified we deserve
Great Job!
Nice!
Thank you. I appreciate the video and knowledge it shares but really hate such cheap tricks to mark timestamps as 1,2,3.. so that we are forced to watch the whole video. It makes it really difficult to reference it.
I like how tailwind has made some pivotal and revolutionary changes on how we style our websites and apps. In my own experience it has actually improved my CSS literacy to a great extent, and I personally consider it the de facto of the modern styling especially in the world of components-based web development.
Tailwind utilities and short hands are often missed but they are just good for productivity. My favorite is space-y and space-x
Sounds so much more efficient than using margin-block. What do you do with the all the time you’ve saved
Definitely going to have to try these out ..!
Yeah spacex is good company
i think they defeat the purpose, now you gonna have to know what each utility is instead of just understading what the class directly maps to in css. Also dont space your stuff manually, do create containers that flow to be the design you want.
Your every video is extremely helpful and with full of value. You are doing great job. Keep it up :)
The size class is pretty new to Tailwind and definitely welcome.
I'd like to add the inset-classes as they are nice for positioning.
Dude! The line-clamp class saved me! Thank u so much.
Thank you for this video Kyle, it's really helpful!
thank you, always simple and boom!!🔥
Prose looks awesome 🎉 thanks for sharing.
Awesome. Loved the divide one
Thanks for these tricks Kyle!
In my last side project I used Styled Components to create reusable UI components and Tailwind when I wanted to add some small styling for specific elements, worked like a charm.
😮 why
Why would you combine these two? Doesn't make sense to me really.
Great video. Thanks!
it's so convenient and faster. Thank you!
You're the best dude, way to live up to the channel name
Hey WDS, great tut! But i would not recommend extending default Tailwind class like container. Using different class name would be better in real word scenarios.
Thanks for Line Clamp !
Nice tips, thanks!
Thank you, Kyle!
TH-cam is full of strange and ambiguous tutorials but your channel is clearly what simplifies everything!
I reckon every lib should have a dedicated section called simplified, so you could go and simplify their 10k of useless docs into 10 lines and yet easier to grasp in no time!
You are amazing 😊
Thank you. That was great
great tailwind tips!
Amazing never knew this before ❤
Great, I actually hate to write tests. But you make me warm about it
thanks for Line-clamp and container center:true!
thank bro it's really usefull for me
I hope someone already wrote it, but using space instead of gap is not a good solution at all. The thing is, space class was added before gap was available for flex box and it basically sets margins to the items. Basically, it has 2 downsides: it's old and you can't set other margins on any of your items inside container manually as space property will overwrite them. So the best solution is to use gap.
I changed my career thanks to you Kyle, thank you so much
Wow, mega useful. I wish I knew it earlier too :)
I wish I'd seen this video BEFORE making my latest project. I might even go back and refactor some thing just for efficiency's / cleaner code sake.
Great job! I love you
Super useful 👏👏
My favourite class is grid grid-cols-[1fr_2.5fr_5%_auto]
I only use this for styling, instead of using flex.
@Web Dev Simplified do you have tailwind css course becuase you did excellent job with this tricks
Pllease do a video on animation of pages. Can be in tailwind and CSS. Like having smooth pages and transitions
Amazing. I knew half of these and should’ve read the docs more for the other half.
I use gradient way too much after learning it. Why just black when it could be slate to black to gray?
You are already a GOD.... you already know all the classes....i m sure....the title seems misleading 😂😂
Damn, that prose option is great, I wonder if you could get it to work with mermaid markdown.
Your hair is still breathtaking... lol - an excellent video..., I love tailwindcss content...
Awesome!
Thanks! I would have found this a lot more useful if you showed the definition of a tailwind class as well, to show both how it works and what it does
❤❤ I got to try this
Tailwind is like the evolution of css. Every front end dev must know it
Thanks ❤
Hi Kyle, all good. Thanks.
Super vids!
Please being a sequelize ORM crash course, that would be very helpful. Thanks in advance
good knowing these, because I still use bootstrap just because I just thought tailwind = css on class only
Hai Kyle, can you make a video about tools that you use with TailwindCSS
Feels like I have already seed this video
I wanna think it's just a coincidence because you didn't say anything about it, but (a few days ago) "Tom Is Loading" posted a video called 8 "TailwindCSS Classes I Wish I Found Earlier" featuring half of the classes seen here 😅
Whatever it is, it's nice to learn new stuff and this kind of tricks, nice video! :)
That's really cool. I haven't seen his video, but it is funny we released videos so close together.
what device are you using. laptop or dekstop?
You forgot plugin tailwind animation! life saver!
I was waiting for the peer class.
instead of divide, using flex and gap looks more practical. Although you need to write more, you don't need to remember other term, flex is responsive.
PUT THIS VIDEO IN HALL OF FAME
Really, I don't know why I should learn 100500 new selectors (classnames) and use some tricks and hints instead of writing pure CSS (with preprocessors, etc). But tw is so popular last time & I'm sitting & watching this tuts, lol!
the selector is easy to remember, the name is following the property and the value, use function and directives, then your code is much more readable, better than using preprocessor
so you don't have to remember anything while using pure css? lmao
I'm really interested in opinions on this: at what point do you think one should use inline styles inside a tailwind based project? I haven't used tailwind, but as I watch videos like this, I wonder where one would draw the line
Why tho? Why would someone use inline styles when tailwind is available. The only reason to do this is if there's a new CSS property and tailwind don't have support for it yet.
I believe if you are using a state (which is typed string or number) as the direct value then you will most likely use inline. Because tailwind pre compiles it classes, it doesn’t know what num1 is `w-[${num1}px]`
state num1 could be anything
Interesting. So tailwind is more about auto completion? I assumed it's about abstracting styles, or it's like shorthand. From what I get, you use it to standardize sizes, and then, for consistency, you also use it for styling something as inline block?
The answer I expected to hear is, when I style something to be sticky then I use inline styling. I also thought CSS is pretty good at changing widths of elements based off of what class or attributes they have. I haven't written CSS at any significant scale.
This is oocss and got really popular in 2010 we started moving away years later, and now after 14 years is back !
thanks
I love to use tailwind, but found tailwind cause issue on google page speed and preforms as its load unused style. What’s your thoughts over this point for tailwind.
In docs, theres page about optimizing for production, you can check it
Tailwind is the epitome of dwim for CSS. That stands for Do What I Mean.
Supper good 👍
Damnit! Ive been using tailwindcss for over 3 years & I didnt know most of these...
Did you read doc? ;)
I use space-x and y a lot with flex box
In a simple html project,how to add tailwind css and still get that's tailwind intellicense class suggestion? I mean when i add the tailwind via CDN, I'm not getting the class suggestion in the html(suggestion is perfectly working in a react project tho)
Try adding tailwind config file in your root folder even just empty one should do the trick
nice video
Thanks kyle, didnt know tailwind have line clamp
CSS also has line clamp
@@DeepTitanic ye i use css for line clamp but didn't know line clamp in tailwind
ty mate
ty
I have bootstrap, is better to switch to Thailwind? I am building my first react app
Tailwind and Bootstrap are pretty similar
Sorry if I'm out of place, but have you considered hand written CSS? I've only tried hand written and I feel overwhelmed when I look at Tailwind or bootstrap
What kinda shampoo do u use?
you didn't have to name chapters as numbers Kyle. chill we're gonna watch it okay holy
its not that deep lol
Why not tho
speak for yourself
Just keep it up. I love it
What the problem at all?
This guy is really awesome.
Very useful tutorial on TailwindCSS Classes. Thanks, Kyle.
{2024-04-21}, {2024-05-15}
can You create video about primereact?
damn the size property
👍
The moment you realize you know every class shown but you're a bread factory worker, wtf is wrong with me?
The square was a 1/4 the size that it was before, not half.
I'm shocked because I didn't know about most of those examples
M8 should share the CSS for his hair
wow
Some case i need border using gradients but i dont know how to use tailwild 😂
kile we need more videos uploads.. move often.. and higher audio
What kind of wind comes from the tail.
Whenever i watch kyle somehow my default playback speed is always 1.25X
instead repeate bg-blue-500 size-24 on child, using this put on parent only [&_div]:bg-blue-500 [&_div]:size-24
Thx for the info, Kyle. Can't ride of that feeling like "if you don't know CSS, then use those..." =(
You couldn't have used "size" class earlier because it's a new addition to Tailwind barely months old.
I'm trying to figure out what it is I don't "get" about tailwind, but all I see is inline class soup and lack of cascading.
Tailwind makes very little sense when used in a traditional html page, but thats because Tailwind is essentially inline styling with better dev-ex surrounding it.
The cascading part of css can cause issues and unnecessary mental gymnastics when dealing with components, however, so Tailwind fills that niche.
It's a specific tool for a specific use case rather than another "use me and only me" bootstrap-type style framework.
@developersteve1658 I would argue that using inline styling and no cascading takes us back to the days before CSS existed.
Maybe remembering what that was like makes me biased though.
I don't think it's worth the trade off. I can see how its useful for prototyping but right now I wouldn't even entertain the idea of using it in a large project.
@zebraforceone Oh, I get that for sure. With Next.js, Prisma, htmx, etc. It certainly feels like the "old" ways of doing things are coming back and being touted as new, fancy, and revolutionary. When in reality, they're just doing the same thing as .NET, any ORM, or php, respectively. In the case of Tailwind, it's just inline CSS, as you said. It's a step backward, right?
However, I don't think it's so black and white.
As an industry, web development has put all their eggs into the Javascript basket. With the creation of component-based architecture, we saw the rise of SPAs and the microservice, edge, and cloud architectures as well. All of this time and effort has been spent on making that work, but when we stepped away from those other technologies, I think we lost something.
When all you have is a hammer, everything looks like a nail, right?
So I see these "new" technologies such as Next, htmx, or even Tailwind as a remaking of tools lost in the shift to the "modern" design principles. Remade in (most importantly) the Javascript component ecosystem.
When it comes to styling, components really don't behave well with a fully-opinionated style library that enforces structure like Bootstrap because it breaks component architecture, SASS is the same way, because it is designed around giving you utilities to quickly create classes that traverse the tree and apply styling. CSS, at its core, was created to cascade styling (duh) based on the structure of the DOM.
Unfortunately, that behavior is just not suited to components when you are swapping out the DOM all the time. Either you design your components and styling in a way that expects certain DOM elements in certain orders (which is not really maintainable without considerable effort and documentation), or you don't use DOM selectors in your CSS which completely defeats the purpose of CSS in the first place.
To get around these problems, we got styled components for a while, which was a hot mess, and I'm sure some other novel solutions, but eventually we got Tailwind.
Now, it may seem like Tailwind is inline styling and will bring with it the same problems. However, it's not for one key difference: classes.
Tailwind uses classes instead of styles directly, so everything can be changed and configured at the project level. You get the benefit of reusable code and all that without the structural lock-in of DOM selectors or larger classes, all written with and configured in the same language as your components and your business logic, and your database, etc.
Tl;dr: I believe Tailwind, amongst other "new" tools in modern web-dev, are coming about because we lost something in recent years. By implementing older tools in modern ways, we are granted the benefit of less mental gymnastics and a better workflow when creating a majority of apps. Newer doesn't always mean better.
"When all you have is a hammer, everything looks like a nail, right?"
Yes, not being used to engaged in some mental effort and getting comfortable with the "Computed" panel is, respectfully, in my opinion why people praise the Tailwind hammer :P
"Unfortunately, that behavior is just not suited to components when you are swapping out the DOM all the time."
Again I'm sorry but I disagree. The approach my team usually takes is to give each component a unique classname or data attribute, usually matching the components classname, then we use SCSS / SASS to wrap all the styling for that component in a single file, which we import from the components JS file.
I've done this in dozens of projects now and you can move things around to your hearts content.
I appreciate the case for styling components in an isolated way but the flip side of that is something I touched on already. If the design team decides that border radius is no longer a thing and we are having square edges everywhere then that is a trivial change to make with SCSS / SASS if you've structured your project correctly and used variables sensibly. With Tailwind this sends you on a goose chase for rounded-* in potentially hundreds of files.
That's obviously an oversimplification but hopefully you get the point I'm trying to make here. The answer to poorly structured SCSS is to refactor, not apply Tailwind (and the class soup and mixture of concerns that goes with it).
I should probably caveat that with the fact that I'm talking about larger projects here, I can see there's merit in using Tailwind for example if you want to ship a React component like a music player that absolutely must never collide with the selectors of the application it sits in.
"Now, it may seem like Tailwind is inline styling and will bring with it the same problems. However, it's not for one key difference: classes."
I fail to see how utility classes are any different from inline styling other than the fact that they are shorter. I suppose you can configure them at a project level by overriding them, but surely you are getting into muddy waters when customising "m-auto" so that it doesn't mean margin: auto; any more, as an example?
"Tl;dr: I believe Tailwind, amongst other "new" tools in modern web-dev, are coming about because we lost something in recent years. By implementing older tools in modern ways, we are granted the benefit of less mental gymnastics and a better workflow when creating a majority of apps. Newer doesn't always mean better."
I can't disagree with that but I respectfully fail to see how Tailwind is better than the numerous alternatives.
Tldr from me, Tailwind may well save you having to get intimate with the "Computed" panel and think about stuff but it seems to me that if large changes are made to the design, for example a whitelist or rebrand, then you are going to have a fiendishly difficult time implementing that on a project full of utility classes. With well designed selectors, cascading and variables, it's absolutely trivial to do tasks like that. I am a bit long in the tooth but I know which I prefer.
@zebraforceone This is a wonderful response! Thank you for being one of the rare few online people who are respectful in their discourse.
In short, I totally get what you're saying, and I'm not really trying to change your mind. I don't want you to feel like you're doing something wrong or will be left behind if you dont use Tailwind, because I'm very sure there's already other new tools out there that will make Tailwind obsolete and I don't even use it in my professional work, either. I just like it. :)
More than anything, I'm trying to help you "get" Tailwind in the way that I do. I also think it's important to state that the best tool for any situation is one that gets the job done in the way you deem best. If your team is comfortable with SCSS and likes using business classes, then that's what you should use.
Okay. With that being said...
"Yes, not being being engaged in some mental effort and getting comfortable with the 'Computed' panel is, respectfully, in my opinion why people praise the Tailwind hammer :P"
I think this is a bit of a strawman argument. I understand the sentiment that it can feel like Tailwind hand-holds people and can teach them bad habits that lead to poor development practices; that I understand. However, there's no reason why, when you use Tailwind for what it is (a library of utility classes with some nice dev-ex), it can be a supplement to other tooling. I disagree that it's a hammer.
"The approach my team usually takes is to give each component a unique classname or data attribute, usually matching the components classname"
This is exactly the process Tailwind seeks to resolve. Many people (me included) see this as the core anti-pattern with using CSS. There are three parts to this on why I'm opposed to this pattern.
1. Coming up with classnames is a waste of time. It provides little to no benefit outside of the developer experience and they can often be obtuse and unhelpful. There are conventions and decisions you can make that can mitigate the effects of this, but it's all time spent not producing results.
2. Even with tools like SCSS or SASS, these kinds of classnames obfuscate design in other files separate from the components which breaks the component model. Unlike the old way of separation of concerns where you had JS, HTML, and CSS, the fundamental principle of the component model is to combine all of them into one place and separate based on business or technical need.
3. Styling components directly makes the unable to be reused. You can never use any selectors that change general styling, or they will trickle down. E.g. you have a container component that applies display:flex. Inside of this component you have other components that use flex utilities to position and scale themselves. Now, what happens when someone wants to use one of those child components in a different place? They won't be styled correctly, because they're not inside a display: flex. Another core philosophy of the component model is reusability and CSS breaks that, because the behavior isn't isolated to just the component.
"If the team decides that border radius is no longer a thing and we are having square edges everywhere, then that is a trivial change with well-structured and sensibly named variables in SASS/SCSS. Tailwind sends you on a goose chase for rounded-* in potentially hundreds of files."
In my opinion, this could be hand-waved in a similar way to your first point. "Learn your tooling". Using regex selectors can make you a wizard at doing this and even though it's not fun, I think this is less of a problem than it might seem to be. However, this is the stickiest part of Tailwind, or doing styling in this way at all and I get if it's a turnoff. I would say don't place so much weight on this as no matter what, concessions will need to be made. Blame the person who decided to remove rounding. Lol
"The answer to poorly structured SCSS is to refactor, not apply Tailwind (and the class soup and mixture of concerts that goes with it)."
That mixture of concerns is intentional. The tradeoff mixing technical aspects in favor of separating components by business concern. It's a fundamentally different way of approaching web-dev.
"But surely you're getting into muddy waters when customizing 'm-auto' so that it doesn't mean margin:auto; any more, as an example?"
With all due respect, that is a poor example. It, along with many other things, are foot guns. Yes, you can cause a lot of damage by changing something like that, but why would you? I admit I don't know enough to give you a good example of why the classes are better, but without a real-world example of configuration being a bad thing, I think this is a moot point.
"I fail to see how Tailwind is better than the numerous alternatives."
It's not. It's another tool in your toolbox to be used in specific circumstances, or if you like it. If your app, or development experience would be worse off by using it, then don't! It's no more or less valid to use Tailwind than it would be to use Bootstrap, MaterialUI, or SASS. This is what I meant by the hammer analogy: there's no one right answer to anything. It's better to know what tool to use and why.
idk why i didnt start using tailwind for my projects earlier..
Can someone give some unique fyp (Final Year Project) ideas in web development?
The container (1) just dont work for me.
his hair is consistent. how?
Good video. But the title isnt quite right. It should be "10 Tailwind classes I wish I HAD KNOWN earlier". Can you see the difference ? Very common error on youtube.
WAIT HE CENTERED A DIV!!
I spend so much time making a read more text, just to see it could've been done with 1 class line-clamp 2 the very next day 😐
I use space-* heavily. size-* and divide-* are amazing new classes to me.
typography plugin doubles tailwind output file. be careful.
I didnt understand the bonus one
Tailwind was great for beginners. It’s interesting that people are still making videos about it when there are better options than inline styles in 2024
you know nothing.
Can you name those? Btw, what inline styles has to do with Tailwind?
@@Andrey-il8rh Native CSS is better than ever and not difficult to learn.
@@DeepTitanic how learning native CSS conflicts with using Tailwind? How can you even use Tailwind without not knowing native CSS? Is it all your "better" alternatives?
@@Andrey-il8rh Bootstrap and Tailwind are unnecessary in modern projects. But feel free to use them in personal projects if it makes you feel comfortable
Thanks for so informative and useful video
I’m really into it
I don’t want to be rude but it would be nice if you could shake your head less
It’s a bit distracting
I just want your video become better
I’m jealous your hair style 😊