Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 2,992,279 members, 7,288,886 topics. Date: Friday, 03 February 2023 at 01:36 PM

First Dance With Tailwind. - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / First Dance With Tailwind. (614 Views)

Build A React Native Login And Register Screens With Tailwind CSS And Typescript / My Largest Html/css And Tailwind Frameworks, Help With Reviews! / What Are Your Thoughts On Tailwind Css? (2) (3) (4)

(1) (Reply) (Go Down)

First Dance With Tailwind. by Rgade: 8:28pm On Jul 02, 2022
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 cool grin

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

3 Likes

Re: First Dance With Tailwind. by Karleb(m): 6:08pm On Jul 03, 2022
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?

1 Like 1 Share

Re: First Dance With Tailwind. by Rgade: 7:00am On Jul 04, 2022
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.
Re: First Dance With Tailwind. by Karleb(m): 8:43am On Jul 04, 2022
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. cheesy

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?

3 Likes

Re: First Dance With Tailwind. by tollyboy5(m): 10:35am On Jul 04, 2022
Tailwind css. Overhyped
Re: First Dance With Tailwind. by Rgade: 12:33pm On Jul 04, 2022
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. cheesy

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

1 Like

Re: First Dance With Tailwind. by Rgade: 12:33pm On Jul 04, 2022
tollyboy5:
Tailwind css. Overhyped
Give it a try man cool
Re: First Dance With Tailwind. by tollyboy5(m): 1:33pm On Jul 04, 2022
Rgade:

Give it a try man cool
Done that. Back to bootstrap
Re: First Dance With Tailwind. by niel63(m): 3:03pm On Jul 04, 2022
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.

1 Like 1 Share

Re: First Dance With Tailwind. by Rgade: 3:37pm On Jul 04, 2022
tollyboy5:

Done that. Back to bootstrap
First time I’ve seen someone ditch tailwind for bootstrap
Re: First Dance With Tailwind. by Karleb(m): 4:20pm On Jul 04, 2022
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.

1 Like

Re: First Dance With Tailwind. by Ronin1: 9:01pm On Jul 04, 2022
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.
Re: First Dance With Tailwind. by jbreezy: 9:12pm On Jul 04, 2022
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
Re: First Dance With Tailwind. by jbreezy: 9:19pm On Jul 04, 2022
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. cheesy

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
Re: First Dance With Tailwind. by Karleb(m): 5:59am On Jul 05, 2022
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.
Re: First Dance With Tailwind. by Karleb(m): 6:03am On Jul 05, 2022
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.
Re: First Dance With Tailwind. by jbreezy: 8:46am On Jul 05, 2022
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
Re: First Dance With Tailwind. by Karleb(m): 8:59am On Jul 05, 2022
jbreezy:
100% sure

This is why.

1 Like

Re: First Dance With Tailwind. by jbreezy: 9:38am On Jul 05, 2022
Karleb:


This is why.
oooh oooh coolies!!!

(1) (Reply)

Pls Help Out ( Visual Basic ) / Python / UKCIG Asked, "Which Is Doing Best Seo Static Or Dynamic Websites?

(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 - 2023 Oluwaseun Osewa. All rights reserved. See How To Advertise. 112
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.