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.

@frontendfyi

2 ай бұрын

Couldn’t agree more!

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

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

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

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

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.

@frontendfyi

2 ай бұрын

Amazing! Glad to hear it was useful to you!

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

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.

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!

@frontendfyi

2 ай бұрын

For sure, I totally agree! Tailwind is great either way, and they give you the option to choose whichever option you like best!

You literally made my life so much easier

Great video i also customized the break points for responsive ness

which font do you use in vscode, its beautiful

This is very useful, thanks!

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.

@frontendfyi

2 ай бұрын

Couldn't agree more! Glad you thought the video was useful!

I feel like this is a beginner level tutorial. Not how "pros" use it.

@frontendfyi

2 ай бұрын

Well I kinda agree with you that it’s something you assume “everyone knows”. Which is why I didn’t make a video about it for so long. But looking at the number of views it’s clearly something people value.

@deletrious

2 ай бұрын

@@frontendfyi sure. it also can be a result of clickbait. which was my experience.

@frontendfyi

2 ай бұрын

Sorry you felt that way. It for sure wasn’t my intention. I see many people use tailwind with their default config, and by experience I know such a cluttered config won’t result in a consistent UI, and thus is rarely the way “professionals” (very generalized, I know) use it. Explaining that to people was my only intention. Thanks for your feedback though, really appreciate it!

@denverjamesduran2750

2 ай бұрын

So just because it's "beginner level" pros doesnt use it? Lol title is NOT clickbait in my opinion.

@frontendfyi

2 ай бұрын

@denverjamesduran2750 appreciate it ❤️

I think that makes great sense, thank you for sharing

@frontendfyi

2 ай бұрын

Glad you like it! Thanks for commenting too!

Dude, you've got to do a video on Aceternity UI. Just came across this minute - it is is simply amazing!!!

@frontendfyi

2 ай бұрын

I love their website! Manu is actually a frontendfyi pro member too! 🔥 They definitely inspired me to create some sort of components page in the future too!

@alyxx997

2 ай бұрын

those are not even responsive and they are poorly coded, its easier to do those from scratch

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.

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!

@frontendfyi

2 ай бұрын

Fully agree with you! Definitely don’t throw anything out that’s useful and matches your design, like the spacing scale. Just make sure you keep in the things you like (eg don’t have font sizes that aren’t in your design). When trying to make a (large) consistent website in my opinion this is vital, especially when for example working with a team at an agency. As for the docs - that is true. However, because the autocomplete and linting of tailwind is so good, I noticed there’s way less situations I need to look at the docs nowadays! 😁 Luckily it’s only values you change too. People shouldn’t start changing the way the flex box utility works for example! Thanks for your good comment, appreciate it!

@simonswiss

2 ай бұрын

Yep, all great points! @@frontendfyi

How would you approach variants e.g. button primary/secondary? The recommendations ive seen either just look like regular CSS or its a lot of if statements in the components which I think causes more problems esp if you need to move frameworks or you're using multiple technologies in your stack.

@frontendfyi

2 ай бұрын

I really enjoy working with Class Variance Authority. But only do that if the component is really large, otherwise it's a lot easier to just make an inline if-statement. It's all about balance I think. I made a video about how I use CVA too: kzread.info/dash/bejne/dGp61KauYrTIpJM.html Hope it helps!

Thanks for this amazing video

Very useful, thanks.

Great video, I really like Tailwind. What keyboard do you use? Sounds amazing

@frontendfyi

2 ай бұрын

Thanks! The keyboard is de Mode Sonnet keyboard.

Good topic, thanks!

Hello. Nice video. Can you tell me what font are you using and if it has ligatures?

@MG-wx8yx

2 ай бұрын

I'm waiting for his reply too. Please you happen to know it from elsewhere, please let me know too.

@frontendfyi

2 ай бұрын

The font is called Recursive Mono Casual Static

@Wydder

2 ай бұрын

@@frontendfyi thank you

6:08 I wonder what kind of extension you use to display colors like that in VS Code. I wish I had it.

@philippmac1890

2 ай бұрын

Search for "colorize" or "Color Preview" in extensions. There are several plugins that do this type of highlighting.

@frontendfyi

2 ай бұрын

It is called 'Color Highlight'.

holly frank dude, i had no idea how to do this but this is exact thing i was thniking to add in my project. because I like tailwind css a lot but i dont want to use all the colors like 10 diff variants of red or whatever color.

@frontendfyi

2 ай бұрын

Glad it was helpful to you!

Let's say you're working on a large project to a branding document that specifies border radius as 6px across the board for any components with rounded edges (buttons, inputs, selects). Traditionally we would use a CSS variable for the border radius, apply that to each of these components at element level and be done with it. To achieve the same thing in tailwind without repeating yourself everywhere you need to make a component to wrap button, input, select with your classnames which will be repeated for each component because of the lack of cascading. Let's say you add 30 more components with rounded edges, then the design document changes to say these now have square edges. Traditionally we would then go change border-radius to 0px in the variable. To do this with tailwind you now have to play find the class in 50+ files. I really am trying to "get" tailwind but my feeling right now is that I am not drinking the kool aid. I can see the use for Tailwind for rapid prototyping if you're fluent, but without cascading and with inline class soup I cannot see how this can possibly be a good thing for very large collaborative projects.

@frontendfyi

Ай бұрын

I really love your thoughts here! And I do think you have some very valid points too. Would you maybe be up to record a video together where we discuss these things? I think we can have great, open and honest discussion together! Love to talk about the benefits of both vanilla css as well as tailwind.

@zebraforceone

Ай бұрын

@frontendfyi I dont have the equpiment to do decent content but as someone that was around when CSS first emerged id be happy to give some talking points on why i cant understand tailwind

@frontendfyi

Ай бұрын

@zebraforceone it also doesn’t need to be super professional. It could be in a sort of a Google meet setting! Just 2 people talking about the good old days of css, why css has grown so much and is super cool nowadays, and what potential ways could be tailwind might be of interest to you. Because I definitely have some ideas for your border radius “problem” too that I would love to show you.

what are you using to display the hex colors visually like that

@frontendfyi

2 ай бұрын

It's the Color Highlight vscode extension.

What extension you use to preview colors in tailwind config

@SkyLee91

2 ай бұрын

It is called 'Color Highlight'.

Nice tips 👌

Very usefull thanks

What's the name of the font, if you don't mind please? I love it.

@frontendfyi

2 ай бұрын

The font is called Recursive Mono Casual Static

@MG-wx8yx

2 ай бұрын

Again, thank you brother@@frontendfyi

Which vscode theme do you use?

@frontendfyi

2 ай бұрын

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

If you setup Tailwinds with npx tailwwidcss init, it will pretty much do most of the setup for you, and the only manual thing you do is to setup your blob pattern.

@frontendfyi

2 ай бұрын

Yup, that’s true! Only make sure to now use the extend if you don’t have to then 😁

Great video, useful advices. Like!

@frontendfyi

2 ай бұрын

Thank you!

ok but what if i'd like to override colors but have default tailwind spacing? how to partially override theme

@frontendfyi

2 ай бұрын

You only override the properties you add the empty object for. Just don’t add spacing and you still have all of those!

can please make a explanation about a good responsive utility usage practically, that is more of standard.

@frontendfyi

2 ай бұрын

Could you elaborate a little bit more on what you’re exactly looking for?

@deadlylive_gaming7154

2 ай бұрын

@@frontendfyi i wanted to learn how the professionals uses responsive utility's of tailwind / configures theme overriding for responsive screens, components width/height design, texts, images, for that, i would like see an explanation video of talking an good website as example for demonstration how it's implemented & common practices.. btw still this video about tailwind helped nicely...

@frontendfyi

2 ай бұрын

@deadlylive_gaming7154 thank you for explaining! I think that’s a very broad topic though! I will give it some thought to see how I could turn this into a video. Glad this video was already useful for you!

It is in fact what I was looking from tailwind. I was in doubts, should I switch to it only because of this excess defaults.

@frontendfyi

2 ай бұрын

Glad I got you interested in tailwind then again!

sorry i think you would get this question a lot as a content creator but would you please tell me the name of theme you use in vscode?

@frontendfyi

2 ай бұрын

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

@ammarmughal91

2 ай бұрын

@@frontendfyi thank you :)

I love your vscode theme, what's the name of it?

@frontendfyi

2 ай бұрын

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

What is your vs code theme?

@frontendfyi

2 ай бұрын

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

What's the VSCode theme???

@frontendfyi

2 ай бұрын

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

What fontface are you using?? Its amazing!

@frontendfyi

2 ай бұрын

The font is called Recursive Mono Casual Static

You should not use export default in cjs files, despite that, great video

@frontendfyi

2 ай бұрын

Would you advise using mjs instead?

@ceopaludetto

2 ай бұрын

@@frontendfyi Actually it depends on a lot of factors, nowadays tailwind is smart enough to even resolve .ts extensions, so you can use export default with .ts extension if you prefer. But the key is, either stick with module.exports and .cjs or export default and everything else

Anyone knows the name of the font please?

@frontendfyi

2 ай бұрын

The font is called Recursive Mono Casual Static

@MG-wx8yx

2 ай бұрын

Thank you so much for your response@@frontendfyi

very interesting

Your Thumbnail is very funny my friend 🤣🤣

@frontendfyi

2 ай бұрын

Hahaha. So sorry for making an idiot of myself 😂

Hi! People say it's a clickbait but I think they missed the point where beginners are your target audience since they want to know how PROS do tailwind. I cannot with the ignorance 😭

Glad I clicked on this

What's stopping us from using Tailwind is the convenience of styled components

whats yout vscode theme

@frontendfyi

2 ай бұрын

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme The font is called Recursive Mono Casual Static

Comment for algo. Nice info in this video. Thanks.

@frontendfyi

2 ай бұрын

Appreciate it ❤️

When I started learning Tailwind I found this by accident with autocomplete and never started using extend.

@frontendfyi

2 ай бұрын

That's so great!!

@gokulakrishnanr8414

2 ай бұрын

Ah, interesting! Yeah, autocomplete can be a game-changer when learning Tailwind. Glad you found it by accident 😅

@gokulakrishnanr8414

2 ай бұрын

Awesome! Yeah, Tailwind's autocomplete can save time and streamline your workflow. Glad you found it helpful! (14 words)

This is good point in some projects. But also bad point... What happens if you use something like shadcn.ui which is based on all tailwind defaults? If you won't extend, but overwrite lets say colors, all places where shadcn.ui is using all those tailwind provided colors, will break.

@frontendfyi

2 ай бұрын

That is right indeed. In my opinion you shouldn't use shadcn 100% as it comes, you tweak things like spacings, font sizes, colors etc to match your design system anyways. At least that is what I do, for consistency. Or actually, I don't even use Shadcn because it doesn't add more than a few tailwind classnames, I just use Radix Primitives directly and then add my own styles on top of it. But again, you're totally right in that. Not sure if it is a bad thing though.

@coolemur976

2 ай бұрын

@@frontendfyi Not sure about the tweaking shadcn for it to work, you want those components to work out of the box without tweaking them. And only style afterwards. Imagine you run shadcn command to add new component and you have to spend all day fixing styles (depending on component complexity) for it to work by design. Instead of dropping it in, using it, and if everything is as you expected - adding some styles. (the main problem - it would throw lint errors for those classnames) I mean, yeah you can use it like you do - with radix, or with additional modifications. But this won't fit every project. And people who watch this video is not necessarily start from the scratch of design. The idea of overwriting instead of extending itself is very useful.

By the way when you build your project tailwind will not include any class you don't use

@frontendfyi

2 ай бұрын

That is true indeed! I do mention that in the video too.

if our devs cant find or dont know a tailwind class they just write a module css... :(

@frontendfyi

2 ай бұрын

So sorry to hear….

Thanks for making this video Jeroen! There's two problems with this approach: 1. You can't prototype as fast 2. It breaks developer expectations (that classes will be there) A better approach is to: 1. Create semantic tokens (bg-brand-*, bg-muted-*, bg-success-*, bg-danger-* for colors, p-fluid-* for space scale, text-fluid-* for type scale, etc) 2. Use components to build your UI that only use your semantic tokens Allowing all of your Tailwind's default utility classes shine through doesn't increase your CSS bundle ✅ You can prototype fast and easily. I often find myself using bg-red-500 and other colors to see the boundaries of components when debugging or doing layout ✅ You don't break developer expectations ✅ The learning curve is almost inexistent because there's only one thing to remember: use semantic tokens ✅ Your design is still consistent ✅ This is what I do at VerveUI 😊

First to comment 😂

@frontendfyi

2 ай бұрын

First to like your comment ❤️

{2024-05-17}

why ?? haha

@frontendfyi

2 ай бұрын

The best question to ask!

the only way to work with tailwind is to make reusable components

Man who only understood the correct way to use Tailwind in 2024 (lol) wants to tell me how pros use it? You've got to be joking

@frontendfyi

2 ай бұрын

Glad you enjoyed the video! 😉 Not sure where you got the 2024 part though.

@haikelareff

2 ай бұрын

rilexs dude

Tailwind is just blind vendor-locking to proprietary syntax. Learn CSS, use CSS Modules or CSS in JS to survive Tailwind's death.

@frontendfyi

2 ай бұрын

Haha, I think I read the same article as you did. There's a small part of truth in this - but even still I don't think it outweighs the benefits Tailwind bring to me. Sure, if Tailwind one day dies I have a HECK of a problem in converting everything over to either a tool that can support similar syntax, or something completely different. But firstly Tailwind is open source, so at least I can use the older version of a bit and don't need to move over in a single day, and secondly the same could of course be said if you built your apps in React and that dies one day 🤔 But again, I do get some of the points. Just use whatever you like, it's totally fine. I used plain CSS, CSS in JS and many other tools in the past. All are great and you can built great things with them.

@landsman737

2 ай бұрын

@@frontendfyi I can accept using Tailwind in only one case: developer does not have feeling for coding in CSS, or it's a backend developer who does not care. Today's CSS is really mature. There is no reason for using LESS, SASS etc that we had in past. Embrace pure CSS is the goal. You will learn something that you can replicate for very long time without so much breaking changes. And as nice to have you will get styles which you can move to whatever framework or even language you want. There is no vendor-locking, no obsolescence. You have everything in your power.

@landsman737

2 ай бұрын

In short: I take it from an investment point of view. After 15 years I'm back to the beginning, when writing in pure CSS with new features is a joy! Simplicity, beauty.

@frontendfyi

2 ай бұрын

@landsman737 100% agree that css is very capable nowadays. I’ve been a css purist for my whole life and I would definitely consider myself more towards an advanced css user than someone who doesn’t gave feeling for coding in css. I even tried tailwind a dozen times before and thought it sucked. Until one day it clicked and I really enjoyed it. Not to say it is perfect, there are definitely things about tailwind that still suck, but there’s also many things I really enjoy. Especially the auto completion of your theme is one of them, as well as the fact that with css I’ve always been hesitant to delete stuff because god knows where someone decided to use that classname too. Of course I would never use css in such a way myself (everyone says that about themselves), but when working in a team this is often the end result. With tailwind that’s way less of a worry for me. Of course css @ scope and other things can help with that, but it’s still not perfect i think. But again - neither is perfect and I can understand both parties very well.

@WoWUndad

2 ай бұрын

Sass and tailwind is so bad compared to css/inline css

Sorry but pros do not use Tailwind......

@frontendfyi

2 ай бұрын

Would love to hear your reasoning about it

@punkweb

2 ай бұрын

Agreed. Tailwind is an intelligence test, using it means you failed.

@atirpok3

2 ай бұрын

Hahaha ok. I guess it depends on where you work, because most of the teams I work with these days use it.

@punkweb

2 ай бұрын

@@atirpok3 people use nextjs too, doesn't make either of them good. In 3 years every youtuber will have clickbait videos titled "I was wrong about tailwind" and be promoting some new equally stupid styling fad.

@atirpok3

2 ай бұрын

@@punkwebI’ve been using tailwind in production environments for more than four years. It’s not a fad and I have zero qualms about it. Plain CSS is more work than I ever feel like doing and it’s a nightmare in large projects.