How the PROS Use Tailwind

Показать описание

I am a big fan of Tailwind — but not everyone is. And that is totally okay!
But if you are a fan too, or are still doubting whether you are, this video is for you. I see many people use Tailwind in the 'default' way, and I don't understand why!

Let me show you this simple trick that will make your Tailwind experience SO much better. On top of that it also makes all their linting and autocompletion tools so much better too!

#tailwind #frontend #css #html #webdevelopment

Рекомендации по теме

Комментарии

As someone who has been doing development for a long time but only recently got into tailwind, I can say that I really appreciated this video as I learned a couple of tidbits that I didn't know before.

tjans

Use HSL or RGBA for colours to allow opacity control. Even tailwind recommends it this way.

dxk

Where I work (an agency), all projects I work on have custom design and so I was never able to use defaults provided by UI frameworks or Tailwind. It just doesn't fit with the branding and vision that design has. At first I was skeptical about Tailwind because I didn't realize you can just define your custom theme.

I think that overriding the default colors and spacing is its most powerful feature. You can easily define your own custom design system and still have all responsive and pseudo classes just available to you. Default theme is nice, but as you mentioned you don't require 10 colors with 10 shades in a project, you only require a small subset of those in an actual project. The fact that Tailwind supports that custom use case is amazing. And with autocomplete in code editors, having a fully custom theme isn't that problematic because you can still easily discover what's available in your custom theme. Of course, I wouldn't recommend replacing everything because many utilities are actually useful out of the box.

I gotta thank Simon Swiss (who is in comments here) for a tutorial he made where he created a custom theme and used it and at that moment I realized how powerful Tailwind is and decided to properly give it a try.

randmtv

I'd say this makes sense for teams working on big projects that have a separate team of designers working on a design system.

But I think tailwind shines the most on how easy it is to just start a new small project and make it look pretty good by default without needing to mess with css libs or styled components. Pretty simple install and usage - and more importantly, very easy to learn. Just add a few classes and you are good to go. It gives you the option to extend but also it has great default styling options.

Great content here!

refeals

This is definitely quite usefull for teams (multiple developers working on the UI) to ensure consistency. I think that most people (myself included) would generally lean more towards "extends" since in this way you aren't touching the tailwind defaults and you can still add in your own theme definitions. But I can definitely see the argument for limiting the defaults and only including what you want.

Voidstroyer

That's exactly I gave up pretty quickly and ain't dig more. Great video!

MehmetKoseDev

Nice! And dont forget we can safelist any of the classes, handy when applying dynamically!

ElNicopewpew

I appreciate you sharing this, it's very helpful!

satya

Thank you for the video! Very helpful!
Can you please make a comparison video about unocss & tailwind?

biovawan

Very good video! I personally think that the default theme is _too good_ to not consider using, particularly the spacing scale. Also worth considering — every departure you make from the defaults means that the official Tailwind docs become somehow less useful. But yeah, if you're building a strong design system foundation and you've worked hard on all your own custom scales, that's the right approach to make Tailwind generate exactly the utilities that match your design system. Again, great work on that video!

simonswiss

I recently decided to leave Bootstrap behind and give Tailwind a try.

I'm sure I could have inferred how to do this, but getting it demonstrated with the benefits clearly spelled out is very helpful. Thanks!

JediMB

Very simple and effective. Before the advent and popularity of tailwind, i’d generate custom stylesheet generated with less css which I could now do with tailwind.

murtza.rehman

Did not know about that, its super useful thanks for sharing that !!

vinception

Great video i also customized the break points for responsive ness

parassharma

I think this video is perfect for teams that have full designs provided by a designer in something like Figma. Having too many options just slows down the developer. Thank you for sharing this. It has made me more eager to use tailwind.

joshua.hintze