It’s a small project just to try out tailwind so there’s really not much styling going on.
It’s a comments section where you can add, update, delete comments/replies …
Development was certainly sped up remarkably.
The classes were straight forward and simply made sense. Not confusing at all.
Seriously tailwind is magical, can’t believe I used to discourage it.
It’s tailwind from here onwards

https://discuss-section.netlify.app/

Nice one. Try to tag me in your next post about tailwind.

It's also very wonderful when you are working with react.

By the time you start using JIT, you'd love it more.

I hope you are using the intelliscene tho?

Karleb:
Nice one. Try to tag me in your next post about tailwind.

It's also very wonderful when you are working with react.

By the time you start using JIT, you'd love it more.

I hope you are using the intelliscene tho?

Yeah it makes react really enjoyable.
Of course I downloaded the intelliscene which really sped up the process. Really minimized the need for checking docs constantly.
I’m not really familiar with the term JIT. can you expand on that.

Rgade:

Yeah it makes react really enjoyable.
Of course I downloaded the intelliscene which really sped up the process. Really minimized the need for checking docs constantly.
I’m not really familiar with the term JIT. can you expand on that.

Just In Time compilation.

With JIT, the classes are generated automatically when you type them, there is no need to install an additional package like purgeCss to do that for you.

That is, if you only type 10 unique Tailwind classes, you index.css will only have 10 css declarations.

Another very important use is that it allows you to write custom css in tailwind classes. Take for instance, if you want the height of a div to be exactly 50.4567rem, you can just write h-[50.4567rem] as long as you set mode to jit in your tailwind config file, it will be generated automatically.

You might feel like you could do this in the config file by extending or even over-writing tailwind default values, but sometimes, all you need is a value you'd use once and never use again and this is where jit comes in.

You can literally put in any css values in tailwind classes.

bg-[cyan]
text-[#000099]
top[33.333px]
pt-[10%]
rounded-[11.77%]

To set mode to jit, just write "mode: 'jit'" in that tailwind config object, that's all.

I hope I did not bore you with my explanation?

Tailwind css. Overhyped

Karleb:


Just In Time compilation.

With JIT, the classes are generated automatically when you type them, there is no need to install an additional package like purgeCss to do that for you.

That is, if you only type 10 unique Tailwind classes, you index.css will only have 10 css declarations.

Another very important use is that it allows you to write custom css in tailwind classes. Take for instance, if you want the height of a div to be exactly 50.4567rem, you can just write h-[50.4567rem] as long as you set mode to jit in your tailwind config file, it will be generated automatically.

You might feel like you could do this in the config file by extending or even over-writing tailwind default values, but sometimes, all you need is a value you'd use once and never use again and this is where jit comes in.

You can literally put in any css values in tailwind classes.

bg-[cyan]
text-[#000099]
top[33.333px]
pt-[10%]
rounded-[11.77%]

To set mode to jit, just write "mode: 'jit'" in that tailwind config object, that's all.

I hope I did not bore you with my explanation?

Bore me? That was super helpful.
I always felt a bit constrained by the fact that you could only use values predefined by the framework. If I wanted to give an element a custom value one would have to do that in a separate sheet.
Thanks a lot for your time.

tollyboy5:
Tailwind css. Overhyped

Give it a try man

Rgade:

Give it a try man

Done that. Back to bootstrap

Tailwind, Chakra, MUI, Fluent, Grommet, Semmantic.
All easy to use. But I still run down to Tailwind because of how fast and smooth it gets.

Styled Component, css in js... etc.

I only use when I'm working based on request or CDD

Overall... Tailwind is just comfortably easy.

tollyboy5:

Done that. Back to bootstrap

First time I’ve seen someone ditch tailwind for bootstrap

Rgade:

First time I’ve seen someone ditch tailwind for bootstrap

Obviously, the guy is scared of css.

A lot of frontend developer don't even rate bootstrap.

Karleb:


Obviously, the guy is scared of css.

A lot of frontend developer don't even rate bootstrap.

Or just personal preference. Tailwind is nice, even nicer when you pair it with plugins like daisyUI but Styled Components does it for me.

Ronin1:


Or just personal preference. Tailwind is nice, even nicer when you pair it with plugins like daisyUI but Styled Components does it for me.

Personally, styled components is my favorite. I just love tailwind because of its simplicity

Karleb:


Just In Time compilation.

With JIT, the classes are generated automatically when you type them, there is no need to install an additional package like purgeCss to do that for you.

That is, if you only type 10 unique Tailwind classes, you index.css will only have 10 css declarations.

Another very important use is that it allows you to write custom css in tailwind classes. Take for instance, if you want the height of a div to be exactly 50.4567rem, you can just write h-[50.4567rem] as long as you set mode to jit in your tailwind config file, it will be generated automatically.

You might feel like you could do this in the config file by extending or even over-writing tailwind default values, but sometimes, all you need is a value you'd use once and never use again and this is where jit comes in.

You can literally put in any css values in tailwind classes.

bg-[cyan]
text-[#000099]
top[33.333px]
pt-[10%]
rounded-[11.77%]

To set mode to jit, just write "mode: 'jit'" in that tailwind config object, that's all.

I hope I did not bore you with my explanation?

but my tailwind does this without the JIT being configured

Ronin1:


Or just personal preference. Tailwind is nice, even nicer when you pair it with plugins like daisyUI but Styled Components does it for me.

It's okay to not like or use tailwind but if you have ever tried to create a mock up with bootstrap, you'd know the pain involved.

The only area bootstrap really shines is the layout.

jbreezy:
but my tailwind does this without the JIT being configured

Are you sure?

It might be because recent tailwind installations now comes JIT enabled by default but I still doubt this.

Besides, enabling jit is actually simpler than it sounds or look in word. It is as simple as adding a key and value to an object.

Karleb:


Are you sure?

It might be because recent tailwind installations now comes JIT enabled by default but I still doubt this.

Besides, enabling jit is actually simpler than it sounds or look in word. It is as simple as adding a key and value to an object.

100% sure

jbreezy:
100% sure

This is why.

Karleb:


This is why.

oooh oooh coolies!!!