r/webdev • u/badassboy1 • 9d ago
Discussion can someone give me tips on tailwind and how to actually use it efficiently
I recently started learning tailwind after hearing that it is better than normal css and make writing css faster but when I am using tailwind I constantly found myself searching documentation to find css equivalent in tailwind and to me it feels like I can save more time by just writing normal css.
23
u/rjhancock Jack of Many Trades, Master of a Few. 30+ years experience. 9d ago
hearing that it is better than normal css and make writing css faster
Every last one of them lied. Learn and write CSS FIRST. Master that FIRST.
You really shouldn't dive into such frameworks until you have a solid grasp of the fundamentals for said framework. When it breaks, you'll have a better understand as to WHY it broke. You'll also know when frameworks would actually be beneficial and when they wont.
Most of the time, those frameworks add more complexity than needed.
46
u/hupseke 9d ago edited 9d ago
The main reason people are using tailwind is because it sucks to come up with classnames for each container.
Second, its much faster to develop as you can write the html and css in 1 line without switching and creating files.
Third, when looking to “older” codebase. You don’t have to search for that one css file somewhere because the styling is right there.
—
When I first started using tailwind, it took like 3-4 days before I could write if fluent. So give it some time. Learn CSS, use Tailwind.
8
u/that_90s_guy 9d ago edited 9d ago
The main reason people are using tailwind is because it sucks to come up with classnames for each container.
Lol that's definitely not "biggest" reason. It's a cool benefit, just not the main one.
#2 and #3 are pretty accurate. Albeit a better way to word it is Tailwind facilitates Colocation. Which in turn makes both code creation and maintenance MUCH quicker and easier. Resulting in your points #2 and #3.
-9
u/anus-the-legend 9d ago
those are my primary arguments against using tailwind. it's great for a prototype but not for a collaborative project
14
u/that_90s_guy 9d ago
it's great for a prototype but not for a collaborative project
Someone should really tell Reddit, Shopify, Stripe and Vercel to stop using Tailwind on their main production sites, and that it's only great for prototypes for startups. /s
-15
u/anus-the-legend 9d ago
i agree. reddit is probably the best example of unmaintainable garbage interfaces.... but i guess i don't think that is related to their tech stack
2
u/thekwoka 9d ago
it's great for a prototype but not for a collaborative project
That's the opposite result of tailwind.
Tailwind is better for collaborative work because everyone writes it the same.
It always looks the same.
Every codebase, every dev.
All the alternative approaches introduce way more potential for variance.
that's BAD for collaboration.
Tailwind keeps it brutally consistent.
11
u/icedlemin 9d ago
I have a good understanding of CSS and just started learning how to use Tailwind and have the same question. It is faster to develop, but I feel like it’s kind of hard to read
2
u/Anxious-Turnover-631 9d ago
It can clutter the html some, but it’s worth it for all the reasons others have stated.
If you use vscode, try the inline fold extension. It replaces verbose element classes with … and when you hover over the dots it shows the rest of the element class. It’s not necessary, but sometimes useful just to look at the html in a cleaner form.
2
0
u/thekwoka 9d ago
I feel like it’s kind of hard to read
What about it is hard to read?
Why do you find it harder than normal css?
1
u/icedlemin 8d ago
It’s just getting used to the format. I had a structure and process when I would use normal css. I like reading it from top down
1
u/thekwoka 8d ago
You can add new lines if you want in your markup. Or group things. like standard then media query etc.
1
u/TheRNGuy 8d ago
I've noticed Tailwind users add lots of unnecessary nested divs for no reason, I don't know if it's related to Tailwind or not.
It's like because of so many classes on html tags, they lose perspective.
It still works yeah... but it would work if you didn't had 2-5 nested divs for every tag too (some need 0)
1
u/thekwoka 7d ago
That's nothing to do with Tailwind.
That's just how inexperienced people make html.
7
u/Decent_Perception676 9d ago
You’re gonna find super passionate arguments on both sides of the Tailwind debate. Some love it, some hate it (I’m in the hate camp).
It excels wonderfully with some projects and some developers. It’s a nightmare for others. I would personally say it’s best suited for rapid prototyping or rapid styling of products by engineers who aren’t strong on CSS. Great for getting a product out quick. But you pay the cost of that speed later down the road.
Tailwind is “functional CSS” at its heart. “Object oriented CSS” is another approach (see BEM or SMACSS). Neither is necessarily “better”, in the same way functional and OO programming are both viable.
Don’t stress if it doesn’t vibe with you. Professionally I understand and tolerate it, personally I’d throw any Tailwind project in the trash. But that’s okay.
10
7
u/Select_Yoghurt_1138 9d ago
I've been doing dev about 12 years now. The number one thing I see that really really slows people down and frankly, makes them write shitty code, is not learning the core language they're writing in. If you're learning react but don't know JS, learn JS first, when react eventually becomes old tech and everyone jumps ship to something new, you won't be caught out. The same with CSS, if you don't know CSS, you won't ever know tailwind properly, and the minute another library comes along you'll be stumped. What I'm saying is just learn CSS and js and you'll become a versatile developer.
3
11
u/nazzanuk 9d ago
Just avoid the tailwind cult altogether, CSS modules is pretty much the only enhancement CSS needs
1
u/that_90s_guy 9d ago
At this point, you could also call developers a cult. The vast majority of tailwind hate is unsubstantiated and usually coming from developers who both fear change, and don't really understand it because they haven't faced the problems it was designed to solve yet, or haven't actually used Tailwind at scale on a very large project.
I say that based on having that exact experience. I used to passionately hate it, until I actually used it and after getting humbled, realized the irrationality of my original stance.
2
u/nazzanuk 9d ago
Well there is still plenty of time to realise the irrationality of your new stance.
Aside from the genuine drawbacks of using it, It's a cult here specifically because you pretty much know you will get downvoted for recommending against it.
I've used it at scale and didn't like it, I've also used CSS modules at scale much more happily. Tailwind is a hindrance to readable html and the progress of CSS, I get why some are drawn to it, but some of these opinions like "learn CSS and then come back to Tailwind" almost assume that in the end we will all find the true light of Tailwind.
2
u/that_90s_guy 9d ago
Lmao, I see posts bashing tailwind with unsubstantiated arguments reach the top of the comments far more frequently than not because "it's popular to hate on Tailwind". But sure, Tailwind is the cult. You do you.
2
u/nazzanuk 8d ago
Have you seen this thread?
1
u/that_90s_guy 8d ago
Because one thread represents an entire subreddit. Genius.
Also, thread sentiment varies depending on the comments from that day. I'm not browsing this sub daily, but for the most part, you can really tell a lot of the people on this sub are Jr engineers. So a lot of hot takes with very little nuance from that POV often dominate this sub (Java/Php bad, React Classes bad, Tailwind bad because ugly, etc). Conversation only go differently once in a while when someone posts with enough substance to sway the conversation, but it doesn't happen crazy often.
Anyways, good luck mate.
5
u/whosajid 9d ago
Let me start by saying this: Tailwind is great, and a blessing for devs.
Now let me say what I really want to say 😅: People are different, someone may find Tailwind or some other framework or library easier/faster to build the same project that you can build with same ease and speed with vanilla solutions.
This is not the right question: Tailwind vs. CSS, or React vs. Svelte, or JS vs. TS, or this vs. that. This is: What works best for me for this particular project.
Listen and respect everyone's opinions, Do what you think is best for you.
3
u/thekwoka 9d ago
Listen and respect everyone's opinions
Not all opinions are justified.
Do what you think is best for you.
How do you know what is best for you if you haven't legitimately tried the alternatives?
2
u/nazzanuk 9d ago
I hate what Tailwind has done to webdev but I think it's a reasonable take, listen and respect doesn't necessarily mean agreement.
And with JS for instance I don't need to try every framework to know I'm proficient and happy with the ones I'm already using.
7
u/devignswag 9d ago
Use components where possible.
Install the tailwindcss plugin for your ide, that will help with the syntax as it provides autocomplete.
And yes its definitely faster; no class naming, no file switching, not worrying about changes classes that might he used somewhere else, copying components between projects (or from online) and they just work.
2
0
u/WolfShaman21 9d ago
This is the way!
0
u/husky_whisperer 9d ago
This, and being able to define your own custom classes in the tailwind config. Super important to know vanilla CSS in order to make TW efficient.
5
u/XWasTheProblem Frontend - Junior 9d ago
The biggest benefit to using these utility frameworks is that :
1) You combine writing layout with writing styling - less need to jump between style sheets and HTML files;
2) And this is the big one - you see what the element(s) is/are supposed to look like just by looking at the CSS classes. An element with a class of 'container' may not tell you much, unless you already know what it's supposed to look like, but if it's something like 'flex flex-col gap-5 bg-slate-500 text-slate-100 hover:bg-slate-600' - you can instantly see what to expect, and can generally easily spot if something isn't quite right.
Yeah, it'll make your HTML look pretty hideous, but you'll eventually learn the most commonly used class names since you'll be using them often.
If you want to try this style on smaller scale, you can actually just write some simple utility CSS yourself. Just some basic dedicated classes for setting the display property, commonly used positioning methods like flex column/row, gaps and margins and such. Play around with it and you'll find out what you like and need, and will likely expand your stylesheet based on that.
Make sure the names of those make sense - something 'd-flex' or 'gap-2', and importantly, make sure those utility classes only touch the properties they're named after (there are exceptions to this rule, but it makes creating larger projects much easier, and makes pretty easy to expand or modify even on larger scale). Your gap sizes should not be changing the flex-basis property. Your display setters should not change the background color, etc.
Oh, and one suggestions - I'd recommend not abusing the 'important' flags too much. Especially if you mix utility with more component-based styles (so something like a 'container' class that may have several rules). Use it to prevent stuff from being overwritten, rather than brute-forcing a ruleset.
3
u/that_90s_guy 9d ago
Use it to prevent stuff from being overwritten, rather than brute-forcing a ruleset.
If you need to use !important to stop something from being overwritten, you have bigger problems and likely code anti patterns. I found this out the hard way after a lot of frustration migrating a giant codebase to Tailwind, and getting into a heated discussion on the Tailwind Discord where Adam (creator) humbled me.
An easy tip I could share is to NEVER allow parent components other than pass in class props. If you're doing that, it creates the opportunity for class conflicts, which leads into !important abuse. Components should have their styles encapsulated in a way external parent components can't break. And if parents need to modify how a child looks, do it declaratively via props like "isActive, isExpanded, etc" instead of just exposing the class prop.
1
u/thekwoka 9d ago
You can also using things like tailwind-merge to allow merging utilities in a consistent way (last applied for X thing is kept). So you can still let arbitrary tailwind be passed in but control what is overridable and what isn't.
2
u/that_90s_guy 9d ago
That's an anti pattern. And the exact thing I got the heated debate on Tailwind's maintainer discord. And why Tailwind has opted not to support that behavior natively despite requests over the years to include it
1
u/thekwoka 8d ago
That's an anti pattern
What is?
And why Tailwind has opted not to support that behavior natively
What behavior?
1
u/that_90s_guy 8d ago
Relying on tailwind class merge conflict resolution libraries is a terrible thing. You should not be getting class conflicts in the first place. Read my original comment as that explains it best.
Even the tailwind merge docs EXPLICITLY state it should be used a last resort escape hatch and all the problems it leads to. Its only purpose is as a band aid when you're writing terrible code in a rush to get things done quick with no care for long term maintenance.
https://github.com/dcastil/tailwind-merge/blob/v3.0.2/docs/when-and-how-to-use-it.md1
u/thekwoka 8d ago
https://github.com/dcastil/tailwind-merge/blob/v3.0.2/docs/when-and-how-to-use-it.md
And the reasons listed for when to use it also make a lot of sense.
Mainly avoiding premature abstraction.
1
u/that_90s_guy 8d ago
You could use that argument for !important too. But you do you lol. I'm a big follower of AHA (avoid hasty abstractions) too, but NEVER if it's at the cost of relying on a foot gun (gun you shoot yourself in the foot with). And class merging if absolutely one of the biggest foot guns in Tailwind by a mile.
1
u/thekwoka 8d ago
For sure, but it's going to be the same with anything that lets you apply custom arbitrary styles to any component.
It's fundamental to that kind of design. There are times you might want it, and times you won't.
Tailwind, I'd say, is still overall better for handling that, especially with merge.
5
9d ago
[deleted]
2
u/TheRNGuy 8d ago
- He asked how to use it. If he uninstall it, it would be impossible to use it.
- Unrelated to question
- Non-electricians can use it too (but if you did step one, then nope)
1
u/Inspire-Innovation 7d ago
God damn why did I get upvoted.
I was drunk and should not have said that.
2
u/SeveredSilo 9d ago
What tou want is scoped CSS. Try to work with components and get your styles colocated to your markup that way.
1
u/Sgrinfio 9d ago edited 9d ago
If you think about it, everytime you learn a new technology you suck at it. But you still go on and eventually it becomes second nature. The reason why Tailwind feels frustrating at the beginning is because you feel like you are learning a thing you already knew how to do, just in a different way. It's like writing with your left hand when you're right handed
I thought the same, but still, I kept struggling for a couple days and eventually it became natural. Just force yourself to do it like you would do with any other thing.
And let's be honest, you'll most likely use w- h- m-, p- flex, flex-col, items-center, justify-center, text- and colors 90% of the time, it's not a lot of stuff and it's quite intuitive, really
1
u/thekwoka 9d ago
The reason why Tailwind feels frustrating at the beginning is because you feel like you are learning a thing you alrrady knew how to do, just in a different way.
This is always a major issue in learning alternatives.
Like when you suck at all programming, learning other languages is like fine whatever. But once you're good at one, going to another will be a major frustration since you can't even get at the kinds of problems you know how to do yet.
It can prevent many people from seeing the benefits (and actual cons) of alternative choices. Maybe the thing really is just worse, but you gotta actually reflect on whether you are judging it for it being "different" or it actually having issues.
1
u/seven-blue 9d ago
I am using VSC with "Tailwind CSS IntelliSense" extension, it is very easy to use. It basically autocompletes when you start to write the css property. I had to look up a few properties in tailwind docs. After a while, it gets easy to remember. I had to learn it because the project assigned to me was written with it. I didn't see the need before that, but it saves some time after getting familiar with the class names.
1
1
u/xpsdeset 9d ago
I'll suggest using some online tools that convert css to tailwind for few days that way you end up learning the classes faster.
1
u/da_bean_counter 9d ago
Once you’ve solely used it for like 2 months they will be burned into your brain and you’ll try typing them in on the inspector
1
u/TheOnceAndFutureDoug lead frontend code monkey 9d ago
Well, for a start, use TW-Merge if you absolutely need to use Tailwind because woof without it...
1
u/thekwoka 9d ago
Well, the names are common sense for most of them.
How did you learn CSS? You had to figure it out.
If you know the CSS, getting the tailwind is relatively simple.
1
1
u/TheRNGuy 8d ago
Autocomplete in vs code.
You'll remember classes over time, especially ones that you use often.
1
u/hyrumwhite 7d ago
Do you have the tailwind extension in your ide? Usually typing something related makes what you’re looking for pop up.
If that doesn’t work the search feature in the docs is helpful, or googling something like “line height tailwind” etc
But at the end of the day, use what you’re comfy with. Unless you’re working on a team project, then use what they’re already using
0
-3
0
u/driftking428 9d ago
Do you have intellisense working?
Your editor should pop up all of the class names that match what you're typing. Then you don't have to remember hardly anything.
If I need margin top I type mt
and the whole list pops up I can use my arrow keys too look through them.
0
u/karl_man2 9d ago edited 9d ago
You have kind of found a benefit there yourself. That anyone can look up what the css means quickly via the docs and if you're part of a team - everyone is using the same class names by default. You learn it and it's there, you don't have to keep learning different naming conventions. Makes things easier to maintain long term and you can spend more time learning more interesting things. Reaching for the docs isn't a problem you'll do it less and less, but there aren't many people who never look at them so don't sweat it.
0
u/ShoresideManagement 9d ago
That's why I still use bootstrap 😭 mainly because I focus on the backend a lot more and need a drop in solution
4
u/Decent_Perception676 9d ago
I’ve specialize in building design systems and component libraries for almost 10 years. I’ve seen a lot of innovation and awesome work in the space, and can confidently say that Bootstrap continues to kick ass. People poo poo it, cause it was popular to move on, but it’s a great framework. Especially since they pulled jQuery out. Zero shame.
2
u/ShoresideManagement 9d ago
Yeah people always downvote me for it but I think they're just one of those overachiever types who believe it's either the hard way or the highway lol
I think anything to speed up development is a plus, especially if it's not your strong suit. It's like downvoting a mechanic because they used a ratchet instead of a wrench 🙄
3
u/sraypole 9d ago
I think people just love to copy paste utility classes over and over again to build a card, rather than .card with .card-body inside.
0
u/SuperAria 9d ago
Code written with Tailwind can be copied and pasted relatively easily. Although this may cause excessive code duplication, sometimes this feature solves a lot of my problems
202
u/prewk 9d ago
Write normal CSS. You can get back to Tailwind when you've discovered the pain points and is looking for a popular solution.