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??

Brogrammer:
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??

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

Fourpockets:


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

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

Brogrammer:


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

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

Fourpockets:


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

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

Brogrammer:


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

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

Brogrammer:


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

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.

Tailwindcss make sense when you using it with React or one of those JS frameworks, if not you'll find yourself repeating codes.

Fourpockets:


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

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.

Karleb:


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.

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.

Deicide:
Tailwindcss make sense when you using it with React or one of those JS frameworks, if not you'll find yourself repeating codes.

How do you use it with Reactjs without repeating codes?

Brogrammer:

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.

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.

Brogrammer:


How do you use it with Reactjs without repeating codes?

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.

jikins:


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.

Oh nice! Can I get a code snapshot or a link to a reference on how to do this? Thanks

Karleb:


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.

I will give it time, thanks

Brogrammer:


Oh nice! Can I get a code snapshot or a link to a reference on how to do this? Thanks

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" ) }

jikins:


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" ) }

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?

Brogrammer:


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?

Only for reusable classes. No point creating a variable for classes that only one element will use.

jikins:


Only for reusable classes. No point creating a variable for classes that only one element will use.

Got it thanks

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.

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

SqueezedPant:
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

You can't be real for saying your development is faster with vanilla Js than react

@ 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

SqueezedPant:
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

Lol.

Your vanilla is better than a framework?

Share a github link and let us village people see your work.

ExplorerReturns:
@ 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

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.

Brogrammer:
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??

Very nice idea about this: 'md:[flex justify-center items-center]'

But have you considered using the @apply directive?

Brogrammer:

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.

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

Rgade:

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

Did a quick check on the docs and you're spot on.

Ajibel:


Very nice idea about this: 'md:[flex justify-center items-center]'

But have you considered using the @apply directive?

I just went through the tailwind docs to see what the @apply directive does and how to use it... It's easy

truthCoder:


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.

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

Brogrammer:


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

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.

I prefer W3css to tailwind.
Powerful yet Lightweight.