Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,154,843 members, 7,824,513 topics. Date: Saturday, 11 May 2024 at 11:30 AM |
Nairaland Forum / Science/Technology / Programming / Tailwindcss Is Nice But... (1228 Views)
React + Css Vs React + Tailwindcss Which Do You Prefer?? / Looking For Reactjs/nextjs/laravel/tailwindcss Developer? / Front-end Development Vuejs(vite/tailwindcss) (2) (3) (4)
Tailwindcss Is Nice But... by Brogrammer(m): 12:12pm On Aug 21, 2022 |
Hi devs, After about 2 years of writing vanilla CSS(plain css), I jumped on Tailwind CSS ship today after being persuaded & forced by my dev friends Tailwind css is nice and all and having a good knowledge of CSS made it easy for me to hit the ground running. Even though it kinda makes development faster, Tailwind css makes my markup ugly and robust yet effective LOL Writing breakpoints using Tailwind css utility classes is kinda weird, why 'md:flex md:justify-center md:items-center' and not something like 'md:[flex justify-center items-center]' Lastly, I know Tailwind will be hard to maintain on big projects. Imagine yourself scrolling down hundreds of lines of code (thanks to inline styling) to make changes to a line of text. I'm still not convinced yet and I may just go back to writing my good old plain CSS. Here's my first Tailwind CSS project: https://kaleidoscopic-taffy-873c3e.netlify.app/ Have you tried Tailwind css?? what is your reservation?? |
Re: Tailwindcss Is Nice But... by Fourpockets: 12:46pm On Aug 21, 2022 |
Brogrammer: I hate that class styling idea, that's why I'm forever sticking with my scss. Maybe I'll use bootstrap when I feel lazy coding a button or tooltip from scratch |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 12:58pm On Aug 21, 2022 |
Fourpockets: There is a trade-off when you use these CSS frameworks. You develop way faster but in return get a ugly and robust mark-up |
Re: Tailwindcss Is Nice But... by Fourpockets: 1:19pm On Aug 21, 2022 |
Brogrammer: But what if I want to use a the same or similar style in another components ?, In scss I'll just import the scss file, in CSS I'll just import the CSS file into the component, how can I do similar in tailwind |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 1:43pm On Aug 21, 2022 |
Fourpockets: That's where abstraction comes into play and that kinda defeat what Tailwind stands for... You'll better off writing normal CSS. Check the image attached to have a clue of what I mean
|
Re: Tailwindcss Is Nice But... by Fourpockets: 2:01pm On Aug 21, 2022 |
Brogrammer: Hmmm... Inline CSS as objects... Does it have good code completion, I've used it before and I had to manually type my CSS styles |
Re: Tailwindcss Is Nice But... by Karleb(m): 2:25pm On Aug 21, 2022 |
Brogrammer: Tailwind has @apply feature that does this exact thing. If you feel confident in your way of doing things, I don't see why you should learn something else like tailwind tho. 2 Likes |
Re: Tailwindcss Is Nice But... by Deicide: 2:26pm On Aug 21, 2022 |
Tailwindcss make sense when you using it with React or one of those JS frameworks, if not you'll find yourself repeating codes. |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 3:03pm On Aug 21, 2022 |
Fourpockets: When you abstract this way, you lose Tailwind css intellisense which helps you with utility class names. This will only be a problem to tailwind CSS beginners I wouldn't advise anyone to use tailwind this way tho, it defeats it inline styling purpose. |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 3:10pm On Aug 21, 2022 |
Karleb:Tailwind is new to me and I do not know anything about the apply feature. I'm very confident writing CSS and sometimes, naming classes can be a big headache when you're working on a big projects. |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 3:11pm On Aug 21, 2022 |
Deicide: How do you use it with Reactjs without repeating codes? |
Re: Tailwindcss Is Nice But... by Karleb(m): 3:15pm On Aug 21, 2022 |
Brogrammer: Give it time, you'd get used to it. That problem was the main reason tailwind was created. My point is, if tailwind doesn't suit you, you can drop it. |
Re: Tailwindcss Is Nice But... by jikins(m): 3:34pm On Aug 21, 2022 |
Brogrammer: One way is to assign those classes you will reuse in a variable den just pass that variable to wherever it is needed. Just started using tailwind myself few weeks ago and that's how I have managed to tackled this problem so far. 2 Likes |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 3:50pm On Aug 21, 2022 |
jikins: Oh nice! Can I get a code snapshot or a link to a reference on how to do this? Thanks |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 3:51pm On Aug 21, 2022 |
Karleb: I will give it time, thanks 2 Likes |
Re: Tailwindcss Is Nice But... by jikins(m): 4:43pm On Aug 21, 2022 |
Brogrammer: Away from my pc. It's pretty straightforward Const anyName = "flex items-center" Then <div className={anyName}>...</div> If you use clsx npm package it's even better as you can add multiple style variable and even more tailwind classes if needed although this can also be done with template string className={clsx(anyName, anotherVariable , "border" ) } |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 5:44pm On Aug 21, 2022 |
jikins: Thanks man, I love this!... One more question, does this format only comes in handy when you need a reusable class names ? or is this how you write your tailwind? 1 Like 1 Share |
Re: Tailwindcss Is Nice But... by jikins(m): 5:49pm On Aug 21, 2022 |
Brogrammer: Only for reusable classes. No point creating a variable for classes that only one element will use. |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 6:35pm On Aug 21, 2022 |
jikins:Got it thanks |
Re: Tailwindcss Is Nice But... by excanny: 6:42pm On Aug 21, 2022 |
There's a reason why CSS frameworks exist. They were made for people who don't have the time to invest in designing, especially for back end devs. I don't really get the criticisms around them. 1 Like |
Re: Tailwindcss Is Nice But... by SqueezedPant: 9:01pm On Aug 21, 2022 |
Vanilla anyday of the same , same way I was hyped to enter bootstrap only to leave after I hope it isn't same with JavaScript as well , hyped to enter react only to see things I do with react ,I do them with vanilla in even lesser time |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 11:09pm On Aug 21, 2022 |
SqueezedPant:You can't be real for saying your development is faster with vanilla Js than react 2 Likes |
Re: Tailwindcss Is Nice But... by ExplorerReturns(m): 11:16pm On Aug 21, 2022 |
@ Programmer the large codeset stuff is not really an issue if you are using modern frameworks like react and Vue which heavily make use of reusable components. Writing a traditional multiple page website with tailwind css is a maintenance nightmare |
Re: Tailwindcss Is Nice But... by truthCoder: 11:42pm On Aug 21, 2022 |
SqueezedPant: Lol. Your vanilla is better than a framework? Share a github link and let us village people see your work. |
Re: Tailwindcss Is Nice But... by truthCoder: 11:51pm On Aug 21, 2022 |
ExplorerReturns: Tailwind makes development easier and projects easier to maintain. Implement reusable components and use @apply for repetitive styles (h1, btn, box etc) and you are good to go. I started using Tailwind over a year ago and i have not done anything with vanilla css since then. Tailwind allows you to think in code. You can only understand this statement once you get it. If you are still wired in vanilla, it would seem like gibberish. 2 Likes |
Re: Tailwindcss Is Nice But... by Ajibel(m): 12:07am On Aug 22, 2022 |
Brogrammer: Very nice idea about this: 'md:[flex justify-center items-center]' But have you considered using the @apply directive? |
Re: Tailwindcss Is Nice But... by Nobody: 1:00am On Aug 22, 2022 |
Brogrammer:I love this conversation. I was so opposed to tailwind for a long time cause I didn’t get the hype about a framework that littered your markup with classes till I tried it, now I’m hooked. Writing plain css now feels like torture. I can see you’ve already gotten tips on how to extend tailwind’s power. If you want to declare your own custom single values you can use the theme.extend object in your tailwind.config.js file. And for composing reusable components you can use the @layer components { }. I’m sure if you stick around long enough you’ll get to love it |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 2:06am On Aug 22, 2022 |
Rgade: Did a quick check on the docs and you're spot on. |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 2:09am On Aug 22, 2022 |
Ajibel: I just went through the tailwind docs to see what the @apply directive does and how to use it... It's easy |
Re: Tailwindcss Is Nice But... by Brogrammer(m): 2:23am On Aug 22, 2022 |
truthCoder: Tbh, I'm still hooked on vanilla but when I tried Tailwind, it made a lot of sense and I kinda of work faster because - it saves me from the stress of coming up with class names, fear of styles collision etc Will see if I can master it within a month |
Re: Tailwindcss Is Nice But... by truthCoder: 8:51am On Aug 22, 2022 |
Brogrammer: One good thing with Tailwind is that you do not need to master it to use it. Take a deep dive through the docs, have some practice and build muscle memory. Dazall. |
Re: Tailwindcss Is Nice But... by Lordpeckxy(m): 7:53pm On Aug 24, 2022 |
I prefer W3css to tailwind. Powerful yet Lightweight. |
How Long Does It Take To Learn Coding? / Why Certification Since Your Clients Are Satisfied: / Programming Challenge - Navigate Using Same Cache Header
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 51 |