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.
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.
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!
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!
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.
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!
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.
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!
What is the code editor you are using here? Also please tell me about the font. It also has a few handwritten type. The color code showcase also seems a bit different. In vs code i get a small box of color before the code. But i like the way the color is shown as the background of each value.
That's exactly I gave up pretty quickly and ain't dig more. Great video!
6 หลายเดือนก่อน +1
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 😊
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.
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.
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: th-cam.com/video/B6FrDu2Qbt0/w-d-xo.html Hope it helps!
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.
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!
Haha no worries. We don’t all have to agree. The thing is just that for larger projects you don’t want to have variables (theme settings) that aren’t really part your design system. Thus limiting what’s in the theme will make tour project more consistent, since you can only use what’s part of the design system.
I ran a 100k+ line project, and throughout it's lifetime it gathered around 70 global classes. I see very little benefit of using tailwind. Tho I can imagine someone being convinced it is better than plain old CSS. It is definitely more inviting with all those promises. For me, the single problem CSS had that it took a lot of typing to get to some encapsulation. Since the dawn of preprocessors that has been solved. Now we have pollution of the global scope with the illusion of reusability. Just like the other 50 CSS libraries that came before it.
The thing is though that you don’t repeat full classes, you do repeat styling lines without those classes though. Eg display: flex, margin-top: 2rem, etc. That is what tailwind reuses, not full classes. And those are definitely repeated multiple times in a 100k lines project. I even think that if you have 100k lines of css and you would switch to tailwind, you might end up with perhaps only using 10k lines.
@@frontendfyi Overall project size, not just css. I don't like using a lot of properties so the css is quite light. Specifically flex and margin-top did not repeat that often. But I understand what you mean. I see no difference between attaching 5 classes to a div and 5 css properties. Tho' more realistically TW is like a 5 to 4 ratio. Programatically what you are doing with TW is five = 5 and use five where 5 is needed. Then you have to take into consideration the learning curve. That can cost a couple of thousand worth of developer time per developer already familiar with CSS and a preprocessor. My major point is that nobody will talk about TW in 5 years time and I don't want to build something that lasts only 5 years. Statistically I should be right on this. It will be around, sure, but nobody will touch it. Can be scraped from a project? Yeah .. but that's even more developer time. Am I using it? Yeas.. I am here, aren't I? I am not the only one who makes technical decisions and it is hard to argue with a change to pad the linkedIn profile.
@szeredaiakos I totally agree with you that tailwind will be gone in the future. Might be a few years, might a bit longer. It’s definitely not here to stay forever. I’ve tried to work with tailwind for a few years, and constantly gave up because I hated it and thought css was better in many ways. After trying it for the nth time it finally clicked and I now enjoy it very much. Not trying to convince you to liking it, just letting you know that I was on “the other side” too, and could never imagine that I was going to like it. Yet here I am 😂 The only thing I still want to touch on is the learning curve. It’s definitely there. But don’t forget the learning curve people go through when onboarding your vanilla css project. Despite it being just css, it’s still a form of architecture someone setup, and you still need to learn that when onboarding the project. And the downside is that there’s probably way less examples and documentation to use your own architecture than there is for Tailwind. Again not saying vanilla is bad, but the onboarding of custom projects is definitely a learning curve we sometimes tend to overlook. I really have to make a video about why I like tailwind css one day.. haha. Thanks for staying so kind in your comments by the way. Really appreciate that.
@@szeredaiakos > My major point is that nobody will talk about TW in 5 years time and I don't want to build something that lasts only 5 years. 1. Where did you got that timespan from? Tailwind has already 5 years of existence and people , and they 2. Are you seriously saying that a technollogy will just vanish out of existence? Because this is just not how things work. People still use the original AngularJS in 2024, they still make projects with it, and people are still selling solutions for it nowadays. Cobol is more than 60 years old and we are still dependant on it, even when it is hard to find people making solutions with it anymore. I still maintain codebases writen in .NET Framework years after Microsoft made something much better. Tech just don't move that fast neither to get a grip on new things nor to let them die, once you have a project in a technollogy it is much, much, much harder for it to die. When you have thousands of projects, it will stay alive. So I really don't understand you here.
@@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!
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.
I see you got some pushback on this video. Just wanted to say that I value this video as a non-tailwind user (but a Tailwind fan!) and it's a great video at illustrating how to take the training wheels off when starting to get serious with it.
Thank you so much man, really appreciate your kind words 🙏 Glad it was helpful for you. I agree it’s mainly a way of thinking that you should be able to apply on many different techniques
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.
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!
@@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
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 😭
Your approach is a little different from this one (th-cam.com/video/MAtaT8BZEAo/w-d-xo.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.
Designers and design systems come and go. Become a Tailwind expert, replace whatever meaningless deviations you’re given with tailwind defaults and thank me later 😂
That’s interesting to hear! And you don’t hate digging into someone else’s CSS code - or a project in plain CSS that 25 devs worked on over a span of 5 years even? To me that sounds a lot worse.
@@frontendfyi Imagine that you pick up an English-Chinese dictionary or simply, a book table of contents, and the entire text is not classically top-down as usual, but simply a continuous, merged text. Do you think such a text would take up less space? I think even a table of contents for two pages would fit on one page. Everything would have been in front of my eyes, I wouldn't have had to flip through the courts. That's what I decided to try to apply to the content of the documentation on the tailwindcss website: (👇) Previously, you had to scroll up and down, and now everything is in front of your eyes, very convenient =))
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.
@@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.
![[#2024MAMA] G-DRAGON - 무제(Untitled, 2014)+POWER+HOME SWEET HOME+뱅뱅뱅+FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/Ox29z5Nf1Uk/mqdefault.jpg)
Use HSL or RGBA for colours to allow opacity control. Even tailwind recommends it this way.
you can use #RRGGBBAA with hex
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!
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!
@@frontendfyi TailWind is for beginners
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
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!
For sure, I totally agree! Tailwind is great either way, and they give you the option to choose whichever option you like best!
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!
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
Really awesome man! Started with tailwind a few days ago and this helps me and my collueges a lot to keep our app consistent 👍
Nice! So glad it’s helpful for you 🙏
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.
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!
TailWind is a noob crutch
@@DeepTitanic You might want to rethink how you spend your time.
What is the code editor you are using here? Also please tell me about the font. It also has a few handwritten type. The color code showcase also seems a bit different. In vs code i get a small box of color before the code. But i like the way the color is shown as the background of each value.
That's exactly I gave up pretty quickly and ain't dig more. Great video!
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 😊
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.
Nice! And dont forget we can safelist any of the classes, handy when applying dynamically!
You literally made my life so much easier
which font do you use in vscode, its beautiful
thanks, this is actually what i want to know to make consistent design system
I appreciate you sharing this, it's very helpful!
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 😁
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 :)
Did not know about that, its super useful thanks for sharing that !!
Glad it was useful to you!
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: th-cam.com/video/B6FrDu2Qbt0/w-d-xo.html Hope it helps!
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 ❤️
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!
Great video, I really like Tailwind. What keyboard do you use? Sounds amazing
Thanks! The keyboard is de Mode Sonnet keyboard.
What extension you use to preview colors in tailwind config
It is called 'Color Highlight'.
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
I think that makes great sense, thank you for sharing
Glad you like it! Thanks for commenting too!
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
This video is a great example of reinventing the wheel. Don't repeat yourself.
Uhhhh what? Did you watch the video you commented on or something else? lol
@@frontendfyi Hehe sorry, I just don't agree with removing the default settings 😬
Haha no worries. We don’t all have to agree. The thing is just that for larger projects you don’t want to have variables (theme settings) that aren’t really part your design system. Thus limiting what’s in the theme will make tour project more consistent, since you can only use what’s part of the design system.
I ran a 100k+ line project, and throughout it's lifetime it gathered around 70 global classes. I see very little benefit of using tailwind. Tho I can imagine someone being convinced it is better than plain old CSS. It is definitely more inviting with all those promises.
For me, the single problem CSS had that it took a lot of typing to get to some encapsulation. Since the dawn of preprocessors that has been solved. Now we have pollution of the global scope with the illusion of reusability. Just like the other 50 CSS libraries that came before it.
The thing is though that you don’t repeat full classes, you do repeat styling lines without those classes though. Eg display: flex, margin-top: 2rem, etc. That is what tailwind reuses, not full classes. And those are definitely repeated multiple times in a 100k lines project. I even think that if you have 100k lines of css and you would switch to tailwind, you might end up with perhaps only using 10k lines.
@@frontendfyi Overall project size, not just css. I don't like using a lot of properties so the css is quite light.
Specifically flex and margin-top did not repeat that often. But I understand what you mean.
I see no difference between attaching 5 classes to a div and 5 css properties. Tho' more realistically TW is like a 5 to 4 ratio.
Programatically what you are doing with TW is five = 5 and use five where 5 is needed.
Then you have to take into consideration the learning curve. That can cost a couple of thousand worth of developer time per developer already familiar with CSS and a preprocessor.
My major point is that nobody will talk about TW in 5 years time and I don't want to build something that lasts only 5 years. Statistically I should be right on this. It will be around, sure, but nobody will touch it.
Can be scraped from a project? Yeah .. but that's even more developer time.
Am I using it? Yeas.. I am here, aren't I? I am not the only one who makes technical decisions and it is hard to argue with a change to pad the linkedIn profile.
@szeredaiakos I totally agree with you that tailwind will be gone in the future. Might be a few years, might a bit longer. It’s definitely not here to stay forever.
I’ve tried to work with tailwind for a few years, and constantly gave up because I hated it and thought css was better in many ways. After trying it for the nth time it finally clicked and I now enjoy it very much. Not trying to convince you to liking it, just letting you know that I was on “the other side” too, and could never imagine that I was going to like it. Yet here I am 😂
The only thing I still want to touch on is the learning curve. It’s definitely there. But don’t forget the learning curve people go through when onboarding your vanilla css project. Despite it being just css, it’s still a form of architecture someone setup, and you still need to learn that when onboarding the project. And the downside is that there’s probably way less examples and documentation to use your own architecture than there is for Tailwind. Again not saying vanilla is bad, but the onboarding of custom projects is definitely a learning curve we sometimes tend to overlook.
I really have to make a video about why I like tailwind css one day.. haha.
Thanks for staying so kind in your comments by the way. Really appreciate that.
@@szeredaiakos
> My major point is that nobody will talk about TW in 5 years time and I don't want to build something that lasts only 5 years.
1. Where did you got that timespan from? Tailwind has already 5 years of existence and people , and they
2. Are you seriously saying that a technollogy will just vanish out of existence? Because this is just not how things work. People still use the original AngularJS in 2024, they still make projects with it, and people are still selling solutions for it nowadays. Cobol is more than 60 years old and we are still dependant on it, even when it is hard to find people making solutions with it anymore. I still maintain codebases writen in .NET Framework years after Microsoft made something much better. Tech just don't move that fast neither to get a grip on new things nor to let them die, once you have a project in a technollogy it is much, much, much harder for it to die. When you have thousands of projects, it will stay alive.
So I really don't understand you here.
Thank you for the video! Very helpful!
Can you please make a comparison video about unocss & tailwind?
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!
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 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'.
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
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!
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!
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
Can't install on my mac visual studio code i use a tailwind installation via terminal. I can't install this after watching many videos on youtube.
I see you got some pushback on this video. Just wanted to say that I value this video as a non-tailwind user (but a Tailwind fan!) and it's a great video at illustrating how to take the training wheels off when starting to get serious with it.
Thank you so much man, really appreciate your kind words 🙏 Glad it was helpful for you. I agree it’s mainly a way of thinking that you should be able to apply on many different techniques
Great video i also customized the break points for responsive ness
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.
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!
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
Tailwind Docs are the best!
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
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)
Very useful, thanks.
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 😭
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
Thanks for this amazing video
Good topic, thanks!
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
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.
This is very useful, thanks!
What's stopping us from using Tailwind is the convenience of styled components
Great video, useful advices. Like!
Thank you!
Your Thumbnail is very funny my friend 🤣🤣
Hahaha. So sorry for making an idiot of myself 😂
Glad I clicked on this
Very usefull thanks
Nice tips 👌
Comment for algo. Nice info in this video. Thanks.
Appreciate it ❤️
Your approach is a little different from this one (th-cam.com/video/MAtaT8BZEAo/w-d-xo.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.
A very useful tutorial on how to use Tailwind for consistency. Thanks.
{2024-05-17}, {2024-09-18}
Nice video
Designers and design systems come and go. Become a Tailwind expert, replace whatever meaningless deviations you’re given with tailwind defaults and thank me later 😂
if our devs cant find or dont know a tailwind class they just write a module css... :(
So sorry to hear….
very interesting
I hate to dig into someone else's code that uses Tailwind😂
That’s interesting to hear! And you don’t hate digging into someone else’s CSS code - or a project in plain CSS that 25 devs worked on over a span of 5 years even? To me that sounds a lot worse.
@@frontendfyi Imagine that you pick up an English-Chinese dictionary or simply, a book table of contents, and the entire text is not classically top-down as usual, but simply a continuous, merged text. Do you think such a text would take up less space? I think even a table of contents for two pages would fit on one page. Everything would have been in front of my eyes, I wouldn't have had to flip through the courts.
That's what I decided to try to apply to the content of the documentation on the tailwindcss website: (👇)
Previously, you had to scroll up and down, and now everything is in front of your eyes, very convenient =))
dash 4kZ9AuC
simply build your tailwind he is saying
Configure* your tailwind ;)
the only way to work with tailwind is to make reusable components
which pro, show me
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
First to comment 😂
First to like your comment ❤️
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.