DEV Community

loading...

Discussion on: Jan. 24, 2020: What did you learn this week?

Collapse
practicingdev profile image
Practicing Developer

I learned that Tailwind CSS exists, and that it's fairly easy to set up, but that I probably need to practice UI/UX skills a bit more to make effective use of it.

But I'm excited to try! BootstrapVue works great for me when I'm not concerned about building a unique UX, but it never feels easy to customize Bootstrap to give a unique look and feel, even though I know it's possible.

It seems like Tailwind solves that problem, allowing you to gradually build your way up to reusable components over time.

If anyone here has good learning resources about Tailwind that they'd recommend checking out, I'd love to hear about them.

Collapse
richardeschloss profile image
Richard Schloss

I too have been wondering if tailwind is worth the time investment for me to learn. I have the Tailwind playground bookmarked which seems useful because of the intellisense. I'm in the same boat in that I think a lot in terms of BootstrapVue and native CSS3, and I'm not sure how much I would have to unlearn things before I fully understand tailwind. And it's not completely clear to me if the benefit Tailwind provides is worth the benefits it throws away: like, I can use a class "border-purple-100" but not "border-purple-150"? Whatever used to be a laundry list in css just got moved into a laundry list of class names in the HTML. Also, the other big tradeoff to me appears that changing the entire theme of a given page will become much more challenging when using utility-first framework (i.e., the class names of each element will have to be tweaked). Maybe someone can convince me otherwise.

Collapse
practicingdev profile image
Practicing Developer

About changing the theme of a whole page, I mostly assume that I would be using utility classes to build reusable components in Vue, rather than directly using the utility classes everywhere.

So taking that approach, rewriting the theme for each component would then apply the styling wherever it is used.