10 Tailwind Classes I Wish I Knew Earlier

[@cryptoboy1461]

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

[@lokeshr9794]

True hero

[@skywizard3319]

the Web dev simplified we deserve

[@adipati27ma]

Great Job!

[@edism]

Nice!

[@TechnoTube001]

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.

[@MohamedMostafa-jw5xk]

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.

[@MilitantAntiAtheism]

My problem with this is, that it essentially is putting both functionality and values inline in the document, so you could just do a style="style" instead. The reason why we do CSS in the first place, is to maintain the style from the CSS document, not via the HTML document. My other problem which is related, is with values. Say for example, I want to style a warning box, I wouldn't give the values for that box (like the colors), I would name class the name warning, and then deal with look and colors in the warning class in CSS. Instead here, it adds a lot of overheadf, because it is essentially just copyhing inline style="code" in a more fancy way.

[@Sviatoslav-wv3qy]

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.

[@dominuskelvin]

Tailwind utilities and short hands are often missed but they are just good for productivity. My favorite is space-y and space-x

[@DeepTitanic]

Sounds so much more efficient than using margin-block. What do you do with the all the time you’ve saved

[@davonne007]

Definitely going to have to try these out ..!

[@ОлегБаранчиков-ф5у]

Yeah spacex is good company

[@renejotas]

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.

[@InspireMindsOfficial101]

I was utterly amazed by the invaluable tips I learned from you. Thank you so much

[@Lundito]

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.

[@djonsi88]

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.

[@alexg4927]

😮 why

[@rand0mtv660]

Why would you combine these two? Doesn't make sense to me really.

[@kingkongaintgotshitoneme]

Dude! The line-clamp class saved me! Thank u so much.

[@charlieplett]

My favourite class is grid grid-cols-[1fr_2.5fr_5%_auto] I only use this for styling, instead of using flex.

[@AyyazZafar]

Your every video is extremely helpful and with full of value. You are doing great job. Keep it up :)

[@seedme]

Prose looks awesome 🎉 thanks for sharing.

[@muba000]

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.

[@adel.dev.account]

Thanks for Line Clamp !

[@theasdazx]

you didn't have to name chapters as numbers Kyle. chill we're gonna watch it okay holy

[@leerenae313]

its not that deep lol

[@hazfrd]

Why not tho

[@wisdomelue]

speak for yourself

[@johndevnoza4223]

Just keep it up. I love it

[@DiogoLScarmagnani]

What the problem at all?

[@djdankmemes9257]

You're the best dude, way to live up to the channel name

[@weavers-construction-solutions]

I changed my career thanks to you Kyle, thank you so much

[@syedhaider0916]

PUT THIS VIDEO IN HALL OF FAME

[@codedjango]

You are already a GOD.... you already know all the classes....i m sure....the title seems misleading 😂😂

[@weslleyfillipe1532]

thanks for Line-clamp and container center:true!

[@ryanquinn1257]

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?

[@msalih]

Great, I actually hate to write tests. But you make me warm about it

[@joe_j]

Pllease do a video on animation of pages. Can be in tailwind and CSS. Like having smooth pages and transitions

[@Shaunmcdonogh-shaunsurfing]

Awesome. Loved the divide one

[@themarksmith]

Your hair is still breathtaking... lol - an excellent video..., I love tailwindcss content...

[@adipati27ma]

thank you, always simple and boom!!🔥

[@josuedelossantos9442]

Thank you for this video Kyle, it's really helpful!

[@henryamos]

@Web Dev Simplified do you have tailwind css course becuase you did excellent job with this tricks

[@milleniummoses]

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.

[@DesignDensity]

Thank you, Kyle! KZbin 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 😊

[@anhngocle738]

it's so convenient and faster. Thank you!

[@zebraforceone]

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.

[@developersteve1658]

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.

[@zebraforceone]

@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.

[@developersteve1658]

@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.

[@zebraforceone]

"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.

[@developersteve1658]

@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.

[@theodorealenas3171]

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

[@N1r4]

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.

[@CribzStudio]

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

[@theodorealenas3171]

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.

[@A.Floatrx]

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!

[@ban_droid]

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

[@shakilahmed6870]

so you don't have to remember anything while using pure css? lmao

[@stephanramke]

- You don't really need to learn millions of new classes, only a fraction of them can speed up your development - Responsive Design made easy, the grid system contains default values, uses best practices - Maintainability, active community and ecosystem, better collaboration between designers and developers. Projects can be easier to manage, because a lot of people know tailwind (or other libraries) or how to find tutorials.

[@juanmacias5922]

Damn, that prose option is great, I wonder if you could get it to work with mermaid markdown.

[@jhirn2957]

Tailwind is the epitome of dwim for CSS. That stands for Do What I Mean.

[@ImIvee]

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! :)

[@WebDevSimplified]

That's really cool. I haven't seen his video, but it is funny we released videos so close together.

[@WilhelmBerggren]

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

[@alexandrmeyer]

Wow, mega useful. I wish I knew it earlier too :)

[@SamuelKarani]

You forgot plugin tailwind animation! life saver!

[@AmodeusR]

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.

[@GiovanneAfonso]

great tailwind tips!

[@joaovicsaa]

Nice tips, thanks!

[@Andre_Graciano]

Someone can explain why in this first tip, add padding dont apply on top and bottom?

[@WeirdoPlays]

Amazing never knew this before ❤

[@octavioimazio5358]

This is oocss and got really popular in 2010 we started moving away years later, and now after 14 years is back !

[@dedoyxp]

good knowing these, because I still use bootstrap just because I just thought tailwind = css on class only

[@bobdpa]

Great video. Thanks!

[@pikavecordis5056]

Feels like I have already seed this video

[@kueifeng66]

Great job! I love you

[@icode8029]

Hai Kyle, can you make a video about tools that you use with TailwindCSS

[@dhairyabhavsar6893]

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.

[@zunovideos5033]

In docs, theres page about optimizing for production, you can check it

[@eleah2665]

Hi Kyle, all good. Thanks.

[@joshuadeguzman2911]

I was waiting for the peer class.

[@unpluggedaman]

Super useful 👏👏

[@Maryammirabolhassani]

Thank you. That was great

[@hooooman.]

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)

[@DarkzarichV2]

Try adding tailwind config file in your root folder even just empty one should do the trick

[@MohamedNabih]

thank bro it's really usefull for me

[@juliushernandez9855]

Thanks kyle, didnt know tailwind have line clamp

[@DeepTitanic]

CSS also has line clamp

[@juliushernandez9855]

@@DeepTitanic ye i use css for line clamp but didn't know line clamp in tailwind

[@iThou001]

❤❤ I got to try this

[@zerokifaco6076]

what device are you using. laptop or dekstop?

[@Kayotesden]

Damnit! Ive been using tailwindcss for over 3 years & I didnt know most of these...

[@MrCC-hx8xr]

Did you read doc? ;)

[@Desperoro]

I have bootstrap, is better to switch to Thailwind? I am building my first react app

[@DeepTitanic]

Tailwind and Bootstrap are pretty similar

[@theodorealenas3171]

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

[@omtechofficial]

Thanks ❤

[@Abdul_Wajid]

Please being a sequelize ORM crash course, that would be very helpful. Thanks in advance

[@lauris5275]

I still don't understand why companies want to use tailwind css. The only reason i can see if you use already built in UI which cost money and you just change colors etc... But to create something original from 0 default scss ir just much better.

[@martygo]

Awesome!

[@jevonne8160]

I use space-x and y a lot with flex box

[@gfabasic32]

Super vids!

[@ergusto]

The square was a 1/4 the size that it was before, not half.

[@blackknight1268]

What kinda shampoo do u use?

[@romanmed9035]

can You create video about primereact?

[@Pareshbpatel]

Very useful tutorial on TailwindCSS Classes. Thanks, Kyle. {2024-04-21}, {2024-05-15}

[@SharkWithADrill]

Timestamp (Skip this shit video) 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

[@cristianmargineanu1458]

The moment you realize you know every class shown but you're a bread factory worker, wtf is wrong with me?

[@beaticulous]

What kind of wind comes from the tail.

[@tawsifbhuiyan8204]

This guy is really awesome.

[@codewithved]

nice video

[@MirkoTorrisi92]

Tailwind is like the evolution of css. Every front end dev must know it

[@youtischia]

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.

[@djamaatul]

instead repeate bg-blue-500 size-24 on child, using this put on parent only [&_div]:bg-blue-500 [&_div]:size-24

[@elielhdz2503]

M8 should share the CSS for his hair

[@jirawatmaubkhuntod1823]

Supper good 👍

[@oyieroyier]

You couldn't have used "size" class earlier because it's a new addition to Tailwind barely months old.

[@ahsanabrar880]

thanks

[@zoom0244]

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 😐

[@sauravpandey9188]

😂

[@sheivongamboa]

kile we need more videos uploads.. move often.. and higher audio

[@RocketLR]

idk why i didnt start using tailwind for my projects earlier..

[@27sosite73]

ty mate ty

[@jirawatmaubkhuntod1823]

Some case i need border using gradients but i dont know how to use tailwild 😂

[@nguyenbalongvu9434]

damn the size property

[@luisbrescia8497]

The container (1) just dont work for me.

[@fhrmk]

Whenever i watch kyle somehow my default playback speed is always 1.25X

[@Booyamakashi]

typography plugin doubles tailwind output file. be careful.

[@O-02]

I didnt understand the bonus one

[@faiqarsheikh3220]

Can someone give some unique fyp (Final Year Project) ideas in web development?

[@antonyanovskyi6762]

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 😊

[@jazymhmd1944]

WAIT HE CENTERED A DIV!!

[@nustaniel]

One the worst parts of Tailwind is how it is basically setting web development back to the dark ages when we did inline style="styling;" on everything, except Tailwind puts it all in the class="attribute;" instead. It also isn't helpful that if you are applying inline styles to every design element, if you suddenly need to change something your project uses a lot of, you got to go back and style every one of those elements individually over a simple class that was made for that particular element.

[@harithmu]

his hair is consistent. how?

[@TheBingePanel]

wow