How the PROS Use Tailwind
Вставка
- Опубліковано 12 чер 2024
- 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!
✨ Become a PRO today via www.frontend.fyi/pro
#tailwind #frontend #css #html #webdevelopment - Наука та технологія
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.
Couldn’t agree more!
Use HSL or RGBA for colours to allow opacity control. Even tailwind recommends it this way.
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!
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.
Amazing! Glad to hear it was useful to you!
That's exactly I gave up pretty quickly and ain't dig more. Great video!
I appreciate you sharing this, it's very helpful!
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.
Nice! And dont forget we can safelist any of the classes, handy when applying dynamically!
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!
For sure, I totally agree! Tailwind is great either way, and they give you the option to choose whichever option you like best!
thanks, this is actually what i want to know to make consistent design system
Thank you for the video! Very helpful!
Can you please make a comparison video about unocss & 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!
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!
Yep, all great points! @@frontendfyi
You literally made my life so much easier
Dude, you've got to do a video on Aceternity UI. Just came across this minute - it is is simply amazing!!!
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!
those are not even responsive and they are poorly coded, its easier to do those from scratch
This is very useful, thanks!
Great video i also customized the break points for responsive ness
which font do you use in vscode, its beautiful
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.
Did not know about that, its super useful thanks for sharing that !!
Glad it was useful to you!
Very useful, thanks.
Great video, I really like Tailwind. What keyboard do you use? Sounds amazing
Thanks! The keyboard is de Mode Sonnet keyboard.
I feel like this is a beginner level tutorial. Not how "pros" use it.
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.
@@frontendfyi sure. it also can be a result of clickbait. which was my experience.
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!
So just because it's "beginner level" pros doesnt use it? Lol title is NOT clickbait in my opinion.
@denverjamesduran2750 appreciate it ❤️
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.
Couldn't agree more! Glad you thought the video was useful!
Good topic, thanks!
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.
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: ua-cam.com/video/B6FrDu2Qbt0/v-deo.html Hope it helps!
I think that makes great sense, thank you for sharing
Glad you like it! Thanks for commenting too!
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.
Glad it was helpful to you!
Hello. Nice video. Can you tell me what font are you using and if it has ligatures?
I'm waiting for his reply too. Please you happen to know it from elsewhere, please let me know too.
The font is called Recursive Mono Casual Static
@@frontendfyi thank you
Thanks for this amazing video
ok but what if i'd like to override colors but have default tailwind spacing? how to partially override theme
You only override the properties you add the empty object for. Just don’t add spacing and you still have all of those!
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.
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.
@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
@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 extension you use to preview colors in tailwind config
It is called 'Color Highlight'.
Nice tips 👌
what are you using to display the hex colors visually like that
It's the Color Highlight vscode extension.
6:08 I wonder what kind of extension you use to display colors like that in VS Code. I wish I had it.
Search for "colorize" or "Color Preview" in extensions. There are several plugins that do this type of highlighting.
It is called 'Color Highlight'.
Very usefull thanks
Which vscode theme do you use?
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 name of the font, if you don't mind please? I love it.
The font is called Recursive Mono Casual Static
Again, thank you brother@@frontendfyi
Great video, useful advices. Like!
Thank you!
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?
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
@@frontendfyi thank you :)
What's the VSCode theme???
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?
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
I love your vscode theme, what's the name of it?
It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static
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.
Glad I got you interested in tailwind then again!
What's stopping us from using Tailwind is the convenience of styled components
can please make a explanation about a good responsive utility usage practically, that is more of standard.
Could you elaborate a little bit more on what you’re exactly looking for?
@@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...
@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!
Kinda basic , but good content. Would not titulate the video with the wording ”pro” in uppercase as it’s not representative. ”Do this before starting your tailwind project” would be more in line with the content. Great presentation and pace, keep up the good work! 👏
Appreciate the feedback! 🙏 Kinda agree with you that the title is a bit clickbaithy yeah. Unfortunately there’s still so many people using tailwind “as is”, and therefore missing out on the best way to use it in my opinion. And even the only way in a professional context I’d say. So yeah, that was what the title was based on at least 😅
Thanks again for your honest opinion! Hope you stick around!
Glad I clicked on this
whats yout vscode theme
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.
Yup, that’s true! Only make sure to now use the extend if you don’t have to then 😁
What fontface are you using?? Its amazing!
The font is called Recursive Mono Casual Static
Anyone knows the name of the font please?
The font is called Recursive Mono Casual Static
Thank you so much for your response@@frontendfyi
very interesting
You should not use export default in cjs files, despite that, great video
Would you advise using mjs instead?
@@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
Your Thumbnail is very funny my friend 🤣🤣
Hahaha. So sorry for making an idiot of myself 😂
When I started learning Tailwind I found this by accident with autocomplete and never started using extend.
That's so great!!
Ah, interesting! Yeah, autocomplete can be a game-changer when learning Tailwind. Glad you found it by accident 😅
Awesome! Yeah, Tailwind's autocomplete can save time and streamline your workflow. Glad you found it helpful! (14 words)
Comment for algo. Nice info in this video. Thanks.
Appreciate it ❤️
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 😭
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.
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.
@@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
That is true indeed! I do mention that in the video too.
Your approach is a little different from this one (ua-cam.com/video/MAtaT8BZEAo/v-deo.html) that uses CSS variables to create a theme that extends the utility classes. By using CSS variables, every utility that references that variable will automatically change when you modify the variable. I think mixing both approaches would be the best way to go.
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 😊
if our devs cant find or dont know a tailwind class they just write a module css... :(
So sorry to hear….
which pro, show me
{2024-05-17}
the only way to work with tailwind is to make reusable components
First to comment 😂
First to like your comment ❤️
why ?? haha
The best question to ask!
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
Glad you enjoyed the video! 😉 Not sure where you got the 2024 part though.
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.
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.
@@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.
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.
@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.
Sass and tailwind is so bad compared to css/inline css
Sorry but pros do not use Tailwind......
Would love to hear your reasoning about it
Agreed. Tailwind is an intelligence test, using it means you failed.
Hahaha ok. I guess it depends on where you work, because most of the teams I work with these days use it.
@@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.
@@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.