First project I got autonomy over I both introduced React and Tailwind CSS to our tech stack. I had little to no experience with both, and after a few months I can say I’d gladly work with both again in a heartbeat. I was always fairly good with CSS, so that helped
@@rayanall7333 by building projects you don’t need to learn react you need to understand the vanilla javascript and es6 then you’re ready to go with the documentation of react.
I would recommend : 1. master CSS and Flexbox 2. get used to a component-based framework (eg. React) 3. make your life easier with Tailwind to create your components
I hear so much about "not having to worry about design" and "keeping CSS small" and "composition over inheritance." Taken to their extreme, these concerns are adverse to design. I see why utility-first is great for full-stack devs on small projects or awkward rebels frustrated by less control, but it's a huge issue when devs try to introduce this to the tech stack of a years-old enterprise project that multiple hands touch.
@@Kayzewolf built in media queries, enforcing consistency in layout and spacing, and less actual code to write. You can see examples on their website where in raw css it would be 20 lines, whereas in tailwind its 4 lins of html and a few classes.
I really like your videos. I remember when I started programming in NodeJS. I was thinking of zoom/discord clone for school (by using WebRTC or smth) so they don't have to use bad optimalized microsoft teams. Recently I watched your video about login/register page in nodejs. That all helped me to learn nodejs a lot. Thanks for your great videos, i wish you more subscribers.
@@genteka5106 I had posted this info, looks like youtube deleted it because i had linked to the app. it is a medium sized project that took couple of months . not sure how the number of users impact the choice of CSS framework.
Tailwind 3.1 seems pretty legit. Being able to use the square brackets to modify your own custom css is really powerful. It was a feature in one of the older versions, but required you to put a special "jit" feature in your configuration file. Now it's built in. If the default value of the padding defaults are exactly what you need you can just do p-[1.2rem] and it will work. You can also create custom classes for things that will be used more than once by using an '@layer components' import in the CSS file below the Tailwind imports and then @apply after you class delcaration. @layer components { .myClass { @apply p-5 h-10 mx-[50px] } }
@@ronaldtorres3366 But what benefit does a long line of @apply statements have over regular CSS? Especially when using the [] syntax as it's not even consuming any design tokens. It's just using Tailwind for the sake of using Tailwind, which isn't a great way to work. IMO, it ends up creating a codebase with a higher technical debt and with really gross git history. All of the git diff in commits will be on a single line, as apposed to having 1 CSS rule per line and seeing the commit changes much easier.
i tried a css challenge and the hard part wasn't deciding which properties to use but how to name the divs and tailwind solves that problem and i loved it.
@@Maleficarum999 Seriously. Worst case scenario, just call it wrapper. Need two? Outer and inner wrapper. But honestly anyone who struggles with thinking of appropriate abstractions is probably not very good at software design. That's what software design IS.
Maybe I'll eventually take a look at Tailwind, but I'm more used to "component" libraries, so I kinda want to stick with Bootstrap for now. Its utility classes have also been sufficient for me so far. I want the project to compile with only the needed classes though, I think there's a tooling for that.
Over my time as a web developer, which is a decade now, I tried many flavors of CSS. Started vanilla, got into Bootstrap, both 2013/2014, then Foundation with BEM and SCSS around 2016. In early 2018, I stumbled upon Tailwind for the first time. And yeah, got the same prejudices as many: too many classes, looked hard to learn, bloated CSS file etc. Really thought it wouldn't get anywhere. Later that year, around September, I watched some Laracasts and Jeffrey building some project with it. I rethought, and tried it out on some designs. What a game changer it was! As a WordPress custom theme dev, it still integrated neatly. Have been using it ever since, and never been looking back. No writing too much custom CSS, no time-consuming naming of classes. Happy Tailwind user, essentially. 🙂
This was a great video, and it helped me understand exactly what Tailwind was really about. I rarely like videos or leave comments thanking people, but I did on this one.
I didn’t realize there was something like this! I didn’t enjoy Bootstrap, so I actually went and made my own presents css, in the same way Tailwind works. This helps a ton!
I have a huge project made with scss, and it's totally a pain. sometimes a class is used in multiple components and if you delete one component you are not sure if you need to delete the scss because you might delete something important that will completely destroy other components, pretty difficult tho.
Got one doubt. If Tailwind is a utility-based CSS framework which means one CSS class per property, how it is different from writing plain CSS inline styles?
if you look into it, it offers more, specifically its a design system which you define. Plus, its not inline styles, theyre actual CSS class declerations.
because Tailwindcss offers the same toolset for all users, easier for every one to understand what classes others are using mean without having to surf through the css files
a dev mostly start avoiding design or architechture fatigue and also decision fatigue, for me vanilla css creates the former one, suppose you've two divs which share some common styling like border or flex, in css you get a choice to just include the common styling once, and that's where the design fatigue comes, now ive to look at the whole fking code to try to optimize the best minimal css which is fking pain, in tailwind you use flex property in both the divs seperately, more work but more clarity, also when you start styling a div, it gives you more perspective about the children elements and you basically starts imagining better how the site will look, you get better at css altogether
Just In Time compiler coming in hot to add edge cases without bulding all directives, all pseudoclass utilities and maaaaad speed. People be complaining about the extra markup; yet, they do not realize the massive flexibility. Plus anything tailwind labs touches is gold. Headless UI and heroicons are great examples
Idk ... i don't like it. you move your css code from your css file into your html code ... its the same as you write everything into the style attribute but with variables. i don't see any profit there.
The one advantage is, that you are able to easily change _everything_ with a certain property (like a 10px margin) in one go. Imagine, your designer tells you, that all 10px-margins should now be 12px. Or you want to create a responsive layout, where (controlled via media queries) for a certain screen size all 10px-margins should be 7px. Tailwind (and similar) adds another layer of abstraction and allows you to think about the exact design later after building the structure of your website by adjusting the actual values of the tailwind classes. But of course there are other ways to get the same result. You can use something like sass that offers various ways to accomplish the same (variables, mixins), or plain css variables. Also there are downsides of using generic css-classes. Of course your HTML becomes more complex and less readable. Having 10 classes in each element instead of maybe 1-2 bloats your HTML. Otoh you immediately get an idea what an element might look like just from looking at the list of classes it uses. In the end, tailwind (or the general idea of using generic css-classes) has advantages and disadvantages, like basically everything. It depends on the actual use case. If you want build a website with a very specific design, it might make more sense to write your own specialized set of classes, and/or use something like sass to combine those classes into the classes you will actually use in your elements. If you want just a quick site where the exact look does not matter so much, you can use bootstrap. If you want a more generic approach, or the classes bootstrap provides are not sufficient enough (because bootstrap doesn't have all the elements you need) tailwind might be the perfect solution.
@@aaronrothwell7615 Fellow svelter! Svelte + Tailwindcss is such a powerhouse it should be industry standard at this point. Although.. with svelte, what with css being scoped to a siongle page and all, the problems of native css itself is mitigated, so much so that I actually could do away with Tailwind in some occasions. I don't know. Maybe it's just Svelte that's the real MVP here.
I understand that Tailwind has some features that bootstrap doesn't. But I've been using bootstrap for several years and if you don't want, you don't need to use the built-in components because you can use only the classes just like Tailwind. The component library of bootstrap is a flexible library that's easily overridable. I totally prefer to write some CSS rules instead of having 5 lines of class names in each div.
Tailwind pretty ez to learn also there's tailwind config where you can literally define css rules. For example you can set h1 to have certain classes engraved in it so you don't have to write everything. Literally righting just (no classes) will load your defined rules. Also tailwind can be used with native css which means they have same flexibility level vs bootstrap. Also hover states focus and element states. Really simple in tailwind.
Funny how times change. Not so long ago, web devs focused on clean markup with no uneccessary classes/ids. Set a class/id to the parent and style all sub elements using child selectors etc. There was even a term for developers which over-used divs and classes - they had "divitis" and "classitis" ! :-)
first of all, great video. At 6:42 tailwind actually have a solution for this, you can make one class combining several classes and use that one instead.
@@ToddDunning ...which looks like shit. That's fine in some cases though, but if you're making a public website you don't want it to look like every other bootstrap site.
@@gnomeskejs you do realize that you can change all the value over the Sass file right? If you don't want/like the default theme of BS, you can customize it without having to re-writing the whole framework.
I love Tailwind CSS but sometimes it makes my component "heavy" to read since you have a long list of class though the div and then my eyes mixing" these big lines of CSS classes with the component logic. The way I found to separate the workflow of component with the styling is to implement and add a scss module to my component (with the @apply func) and then have styling and component logic in two separate ways. This way I can work on my function without having my eye reading the Tailwind classes inside the component
@@FaizanAnwerAli then you did not really understand what Tailwind CSS is about. It’s not only writing utilities inside the html but it’s all about productivity and time saving by simplifying your life with CSS. I don’t remember be able to deal with responsiveness so easily that tailwind does with a simply md:class rather than writing classic CSS. Grid management is also another subject where tailwind will help you earn some time
For older developers, as in having been a developer since the mid 90s, I can say when CSS came out we became conditioned to avoid things like "names" and "functionality" as part of the name...like text-red is just a no-no because you can't then change the color to blue...So ok you can have text-blue as well, but at that point, I still fail to see the point. I'd rather just write the css myself (scss actually, which makes several of these issues easier). I'm starting a new project so I thought I'd at least see what tailwind is about, but I can't get past the very essence of what it does because it clashes with 20+ years of not doing that! Though to be honest, I'm quite ingrained in boostrap because it made sense to me when it came out. I understood what it was trying to do while adhering to those principals older developers had developed.
Couldn't agree more. Just ended a Node.js Express Mongo course, my first year at studying programming, all with JS. I can't imagine using a CSS framework that just turns css properties or a mix of them into predefined classes. Makes no sense for me, just master CSS and learn how to reuse classes or combine them and that's it.
Part of being a developer these days is frustratingly forgetting about the stuff ingrained that you weren't suppose to, that you are encouraged to do now smh.
It’s not the first time the IT industry was wrong about something for 20 years before learning from failures. I only say waterfall model and itanium (very long instruction sets architecture) and mainframes
When I started programming, I was told about the importance of "separation of concerns". Never use style inline in HTML, because it had to be clean and fully separated from CSS. Well, Tailwind is more or less like inline style on the tags. But wasn't that a bad thing?
I think tailwind can be useful when you're using something like React, where emphasis is on reusability of components. I wouldn't really see myself using it with vanilla JS though since it can get messy. EDIT: I realized that he talked about what I wrote towards the end. I should've finished watching the video before commenting...
@@giorgiotran4850 yes, I agree with that and I understand but still, remember that there are other ways to scope components style (i.e. Vue' scoped style). However, I didn't want to criticize Tailwind, it was a sincere doubt.
I have worked with and without tailwind for a some time, and oh man is it useful. If you know what you are doing, tailwind gives the ability to instantly know the structure and style of a component just by looking at it (the class naming is done great). It gives you an easy file (tailwind.config.js) to theme your whole web app. And gives you the ability to really customize your styling, "unlike bootstrap" with custom values. Going with the flexibility of having both (HTML, CSS) in one file (or component) makes your life easier. Instead of switching files between HTML and CSS or scrolling up and down the document like with (styled components), tailwind lets you focus on the element itself and once you get to know the framework, makes iteration incredibly fast. I recommend tailwind to almost anyone in frontend web dev, since I haven't seen any downsides to using it. Saying it looks messy is just not having the understanding to read what the classes are doing.
I think it depends on use case, tailwind is good for component based js frameworks. If you change tailwind classes for one re-used component, it works well. But, if you are coding a landing page or some server side rendered template, where the html block u write isn't repeated. You are better of with boostrap Or foundation. You know why jquery is used most? Theme developers of WordPress, shopify, magento, Drupal, etc use jquery. Jquery gives max backwards compatibility. They also use bootstrap in theme development.
Hey Kyle, what do you think about Material UI? I think learning that and Tailwind CSS would be ideal. One gives you the possibility to customize as much as you want, the other gives the ability to design a UI on the fly.
I never use bootstrap and always make my own css because its just a template and its a pain to edit it. I never heard of tailwind before i watch this video, and now i really want to learn this. From what i heard from you in this video, tailwind is basically shorter + easier inline css, which is what i need.
I always appreciate your approch is explaing things easy. I am a beginer for React/Next js, but done dozens of amazing websites in Wordpress. I wonder why every one writing too many css(Tailwind or Classic) classes for every elements to design a simple section on a web page ? Why, so far no one made an extension for VS Code to make these css style much easier ? I mean, a pop window should be having a small canvas and tools like div/Button/inputs/etc. Just drag and drop on the canvas and design a card for example. Press generate code button. Which should convert that design to basic html/css(Tailwind) sinpets. Paste that snipetson our code. Later on one can alter that as they wish. Now for beginers seeing css code looks like a rocket science and not showing interest on web applications. Please suggest any simple tutorials to familiar for designing a simple web page. Now designing a Navbar and Sidebar with responsive features looks very hard even after 45 days of learning React.js on RUclips.
Actually this is the first video that clearly explains what Tailwind is. I reviewed several online articles and a number of videos and it seems like no one can explain what Tailwind is.
Honestly, I have a number of pre-set classes I use where it makes sense, but since the advent of CSS custom properties, I've dropped all CSS frameworks from my workflow. Now to be fair, I'm a solo developer who builds bespoke sites for small to medium sized businesses, so I'm under less pressures of time than many of my colleagues and whilst I take great care to ensure my code is clean and easy to read, I don't have to work in a team setting where code is regularly passed between developers. Tailwind sounds like a really handy library to use if you're part of a large team or you're designing without the benefit of a Live Preview feature, such as that found in Espresso, but if you can just type CSS and watch the design update in real-time, having to constantly run back to your HTML / template file to add classes to your code sounds like a real time sink. Everyone will have different circumstances and it's great that there are so many tools and libraries to help each developer build a setup which works for them. Oh and because of this channel, I now get up a five every morning and it's been life changing, so thanks for that. :)
@@avenginglettuce but you change the css, right? So either you change the css file in the html template, or change it in the css file. Either way, you had to open a file to change it. So calling that a waste of time is not right
@@khangle6872 When I open the CSS file I can change the style for ever single page on the website, I don't need to open individual template files or even pages if you're really old school. With that one file I can control the style of everything everywhere, with Tailwind I'd have to change every page which had an element which needed the style class adding. Just typing it makes me wince. Nah, it's not for me but more power to you if it works for you.
I don't know what tailwind css have, but using bootstrap and coding with classes and creating my own css styles I realized that Bootstrap is very good for creating container and in columns content, it would take a lot of time to write it on my own so bootstrap have some good stuff, but if it comes to writing something that will be presented on the site more than once, it's better to write your own CSS code. Because for example if you use 8 the same buttons and everywhere you added class="px-4 py-2 bg-blue bg-lightblue-hover d-inline-block mx-auto transition-0_3s border-around-5" then client or you will want to change to a different style, then you have to edit it 8 times or copy paste and find all places where you used the same button. But if you wrote your own code where you added only primary-button, you just edit styling of that class and it changes in all 8 places. The only classes I like to use separatly is mx-auto, everywhere I put in buttons display: inline-block to they are automaticly moved to left, so mx-auto adds margin left and right auto so the button is in center and class ml-auto makes button going to right side of container.
We are not the same obviously :). Recently I worked with tailwind. All it does is bloating the html. It looks a total mess. What is the problem with creating classes for different button as your example? Nothing. My css is in a different file, the html looks nice and clean. The time needed to learn tailwind classes is enough to learn pure css.... I am good at pure css so I can see how tailwind classes are almost like pure css... It's like going back to 1999 when we put all css in the html tags... it's hard to maintain, hard to see what is what.... this "utility first" sounds good but a bad practice. I admit tailwind looks very nice. As a design. But as a developer it is a nightmare. :) If I have to design a website I will use pure css. It's better. And no framework can do what pure css can do.
If you don't like the clutter, you can extract the classes like: .button { @apply p-4 bg-red-500 text-white; } Honestly, if you've worked with Tailwind long enough, the classes are so easy to read even without Prettier and Headwind. If you check Tailwind Discord, people fixing other people's code like candies. One problem with extracted named classes is that when you want to debug, you need to view both the HTML structure and the CSS classnames. With Tailwind, you debug directly in the HTML looking at the structure. You don't have to think about complex selectors. Tailwind also solve the problem of unscoped styles.
@@delulu6969 Maybe... we are different. You like it, I don't. I know about extracting classies. One more extra unnecessary step for me. You say people can work with each others code... sure. They know tailwind, they like it. :) I keep my mind open and I will learn it a bit more but no css framework can hold up to pure css. I can see how it is useful as an admin template (bootstrap or tailwind) as you simple copy and paste the template parts. But to create a unique front end design with any css framework? Sure not. If you are a backend developer then you need a front end developer to do that or must learn css. Period. There is no easy way out. I took my time to learn css just to be able to do the frontend without framework. So yes. We have this new tailwind as an option but I do not agree when people claim that tailwind solved this and that. It's not true. It's a unique css framework. It looks cool. It bloats the html and if one is willing to pay that price that use it. My opinion is that tailwind fans can't see the problems ad they are biased. But it's OK. I would be too. :)
@@Bevallalom You can't use Tailwind if you don't know CSS. Tailwind is not like Bootstrap. You don't have pre-styled components. You have pre-configured design system which is customizable. Otherwise, Tailwind UI, which is another paid product, is similar to Bootstrap. I'm a TALL stack developer. I had worked on websites without frameworks, WP, and also Vue. Plus, my background is graphic design. I know what a 'custom' frontend looks like. It's achievable with Tailwind.
@@delulu6969 that's good. Obviously I am new to tailwind and I don't know what one can achieve with it. As I said I like the "look&feel" but not the approach. I believe you, I will look into it deeper and maybe my opinion will change. But no guarantee 😉
Been using tailwind for a year now and am regretting it. It is basically a rename of CSS properties. It is limited (there aren’t utility classes for everything) so you end up having to customize or mix & match. It makes your markup ugly and hard to maintain. It is difficult to debug because you can just edit what all your buttons look like in the dev tools, for example. You have to memorize an additional set of names for css properties, e.g. “line height” -> “leading”. Sure it’s convenient, you don’t have to switch between CSS files and your document, but you lose the power of CSS selectors and you end up duplicating classes a lot. I’m going back to SCSS which gives you cleaner code, and flexibility.
Scss with BEM and mixings is the way to go, tailwind is a horror to debug and change forces my react project to create small component for every repetitive thing, which i don't need for small exclusive part of the page
Nice video! I’ve been using tailwind for a side project recently and I fell in love with it. I was looking for something NOT bootstrap and material UI is just not my thing.
tailwindcss is great but as a backend developer, i feel it's faster for me to use bootstrap because the components already exist. i don't have to figure out alignments and mobile friendliness. dropdown navigation menus and datepickers for dashboard interfaces. i'd like to learn more and maybe in the future use tailwindcss more but in my job, they deadlines are always due "yesterday".
@@blazi_0 from my experience, the reason is many companies hire developers (backend) and expect them to be full stack developers. managing servers, network, etc. so many devs (backend) prefer to use "ready to use" CSS frameworks like bootstrap because it's quicker and easier to use. those that have the luxury of time and patience then tailwind is a great option. since working remotely for the last couple of months, i was able to start playing with tailwindcss with test projects and it's great. the biggest issue for me with trying to learn tailwindcss is when to use grid, container, or , flex box. and that crazy alignment thing haha. so in my opinion, as a backend developer, the challenges of using tailwindcss is time and "teaching an old dog new tricks".
Well, you're comparing it to bootstrap. But I'm curious about how it compares to manual CSS. To me, it looks like you're writing your CSS in HTML. And I'd prefer them In a separate place so I'd choose manual CSS over utility-based framework like tailwind.
vanilla css has always been more flexible than these frameworks. frameworks exists only when you don't want to bother yourself with writing 100s of lines of cdoe in yet another style.css file. Writing manual css can actually be pretty painful and labour intensive. Generally you'd want to write code in sass and develop a sort of mini framwork for your custom needs
@@snowraven8829 Yes. I understand the purpose of CSS Framework. But your explanation seems to apply to component-based framework like Bootstrap. You throw some div and class and you get a well-design card out of the box. What I'm questioning here is Framework like Tailwind. They're utility-based. You don't get an already designed things out of the box. You declare the property one by one and then combine them to build the whole component, just like writing a manual CSS would. The difference however, Tailwind allows you write the CSS directly inside your HTML, but equipped with the customizability power of manual CSS. However, it feels like a mess to me to combine them together like that. I'd prefer the CSS in a separate file, which would only filled with CSS. Just like a manual CSS would.
@@owenmelbourne9602 Manually, you can't. But not with Framework like Tailwind. And here I'm not comparing inline CSS manually vs inline CSS with tailwind. It's the other way around. Read my comment again.
@@farhanaditya2647 i mean when you're working with front end frameworks like react you really don't want to switch between your css files and your js files like one million times. Tailwind excels at preventing that switch problem. You get to write css directly in html. And that is exactly what tailwind is for- providing modular classes for common css stuff. This makes working in stuff like react a whole lot easier. Yes, you can use bootstrap and if you're ready to go another mile even styled components but then again the styles they provide are opinionated. Tailwind allows you to work in similar workflow as bootstrap but allowing much more flexibility.
@Nope Leave Me Alone I am making a weather app and I couldn't agree more. After 4 years on the project, I have successfully built a programming language and a custom assembly for my weather app. I am now working on a angular clone for this programming language specifically for this project. Next up i will build my own CPU architecture for my upcoming corona tracker.
I like using the apply-directive to create my own button-classes using Tailwind. I tried using Vue-Components to achieve the same, but that just does not work well beyond buttons. This way I can still stick to the classes defined by Tailwind, but "combine" them into my own .button or .input classes to ensure uniformity across the app.
Mostly I prefer to write my own css as all these libraries have way more stuff in them than what I need. But I do use both bootstrap and tailwind css from time to time.
@@eugenereim456 there have been ways to do that way before tailwind. Using tailwind adds more CSS than it removes because you can't shorthand tailwind. (try margin:0 auto)
I didn't hear you mention a single thing about tailwind that bootstrap doesn't do. I build pages every day using bootstrap doing precisely what you mentioned p-5, px-3, m-3, my-3, h-1, h-3, etc. I'm looking at tailwind because I'm using Astro to replace wordpress and tailwind is integrated while bootstrap is not. Regardless, I am simply pulling the pieces of bootstrap that I use and encapsulating them into either the global stylesheet or components. I extended bootstrap by adding my site colors not by replacing the bootstrap colors. I simply copied bootstrap button classes and changed the pieces to create my own site buttons. Doing that is exactly how you described tailwind. This is a bit tedious but I can't see learning tailwind as being a benefit at this point. Maybe I'm missing something but bootstrap seems very easy to extend and make your own. Anyway, love your work.
I think all this things are created to be faster and more efficient and whatever, but we should all think where this leads to. I don't want end up in a working environment where I can be faster, only to be bombarded daily with different tasks cause its easy now, and we can "ad-hock" make any adjustments. I want to take my time, sip my coffee, think things through and have time to come up with a creative solution. Still working with ZURBs Foundation, and its perfect for me. I guess it all depends on your approach and what you're building.
Tailwind with React or vanilla JS = chef's kiss. I haven't had much luck getting the JIT features to work well with other libraries/frameworks, but the classes are almost worth it on their own.
Its a class hell, if youre done working on another project, and stop working in Tailwind for a month, go back to your old code and its really unreadable.
I understand that the customization offered is why one should choose tailwind over bootstrap, but I dont understand what the argument is for not just using vanilla CSS. It doesn't seem like it's valuable to use Tailwind unless you have advaced knowledge of CSS, but I dont understand the incentive of why would I work so hard to achieve that just to essentially abandon it in favor of what seems to just boil down to abbreviated syntax and abstracted naming conventions. What am I missing?
There are several reasons why sometimes tailwind is a much better fit than vanilla CSS. For Example with Tailwind you can built websites faster because you have to write less code. Also in most cases Tailwind is faster in terms of performance because it uses a special technique called "Dead Code Elimination" ... I am currently working on a video about tailwind and I am probably going to post it this friday... if you are interested in learning more about TailwindCSS 😉
across frontend, backend and data engineering tailwind is probably the best framework I've ever used. highly and well opinionated while allowing full control and flexibility.
Looks interesting. But in my experience there's a case where it feels bad: When you work on a big project, with a framework and tons of components with lots of large complex css tasks. Then you'll for sure end up with more actual css. And then you have your css mixed in two places. That kind of bugs me.
I wrote the same thing using jQuery back in maybe 2013. We used it on only one large project farmed out to a 3rd party. My Boss didn't like it but I thought it was a cool idea. Called it Stylizr as many plugins for jQ had that kind of name convention. Also a huge processing overhead looking at every element with the class of "stylizr" and then parsing out all the other shorthand to replace with longhand "style" information the browser could use. Also, completely non-reusable. Great if you don't want to open multiple files or scroll to your section but that's about it.
Tailwind is good, i had the same skepticism before and after using i changed that, but tailwind has a thing that it does not work too great with dynamic props for instance, for that something like styled components is a better approach. I am between these 2. Tailwind is easier to prototype things quickly and very scalable, while css in js is more ergonomic
Well, was forced to use Tailwind. Making styles took me more time then usually as I had to all the time go to their docs. It is prolly great for people who do not know well CSS, but for me and for colleague it was slower and less clean then simply using css. But some people in team are more backendish devs who doesn't know css so well so they like Tailwind. For me it felt like pointless abstraction over things which are for me easy, simple and fast and which I can write with closed eyes. On the other hand, it can help to avoid chaos in css as in projects with many coworkers it is really easy to create chaos, make numerous css bugs (specially when some devs are bad in encapsulating css), but this is general problem of big projects and big teams. Here Tailwind really helps to avoid many of such issues.
I disagree with those who said tailwind is great with frontend frameworks, in my experience with react tailwind fails very deeply when you want to conditionally apply classes and at the same time use JIT compiler, unfortunately JIT compiler cant excite JS so it cant detaermain the exact classes you used when building your final css file
Please please please please please please create a video of how to use tailwind properly. I am watching people using TW on large projects with big teams and it is an absolute disaster to clean up. We actually had to fire some Jr. Dev because they swore to TW and continued to destroy entire layouts without a clear understanding of its pitfalls.
I am currently working on a video about tailwind and I am probably going to post it this Friday... if you are interested in learning how to properly use TailwindCSS 😉
When I write reusable components with/without a js framework, I use semantic markup and rarely need more than 1 class on the parent element. It's called UI consistency.
What I love about tailwind that it looks like u r writing the style by ur self but actually u don't What I mean by that is like when u write flex in class u know what u r doing and u know u can do it in css but instead of writing hole word u just write flex Absolute justify-between all these classes are very similar to writing actuall css . Love it 😀
6:43 - Use can just create your own classes in your input css file and then @apply tailwind to it. for example a .btn class that has a line of tailwind classes.
I dont know if your aware, but you can actually customize everything in bootstrap, you can make the primary color be another color, and that applies to allother stuff
That would be cool! There are some good details at tailwindcss.com/docs/font-family#font-families on replacing the 3 default font family values sans, serif, and mono with your own or defining new family names like display / body.
![Tee Grizzley - Blow for Blow (feat. J. Cole) [Official Video]](http://i.ytimg.com/vi/wNLN5xsx5dc/mqdefault.jpg)
First project I got autonomy over I both introduced React and Tailwind CSS to our tech stack. I had little to no experience with both, and after a few months I can say I’d gladly work with both again in a heartbeat. I was always fairly good with CSS, so that helped
Where did u learn react ?
@@rayanall7333 by building projects you don’t need to learn react you need to understand the vanilla javascript and es6 then you’re ready to go with the documentation of react.
Bro you're like Google. You just drop the thing I'm thinking about and always at the right time.
Unpopular opinion Kyle works for google in speach recognition depratment
I was literally just searching vue-tailwind when I got the notification
Maybe you both get the same recommendations
Ikr! He made this video right when I was thinking about using Tailwind
Same . I just got a job and they want me to learn tw
I would recommend :
1. master CSS and Flexbox
2. get used to a component-based framework (eg. React)
3. make your life easier with Tailwind to create your components
As for React, i pick ChakraUI in place of Tailwind
@@abdulazeezolanrewaju843 oh yeah I built my blog with that. It's sweet! But even that is a layer above tailwind. If I'm not mistaken.
@@abdulazeezolanrewaju843 is ChakraUI more powerful than Tailwind for React?
@@husler7424 For me Yes, in the React World. you can also give it a try :)
@@ZubairAhmed1024 Yep!!
The timing couldn't be better, I literally just started looking into Tailwind tonight!
Check out The Net Ninja's Tailwind playlist. It's a great jumping on point.
I built Kyle's hair using only CSS ☝️😀
Can you share?
LMFAO 🤣🤣🤣
Kyle's was like:- concentrate on content not my Hair, lol😂
Damn. I was gonna say he truly got hit by the Tailwind.
impossible
I built my last react project with tailwind and once I got used to it, I found it fantastic. So quick to get things styled.
ye
I hear so much about "not having to worry about design" and "keeping CSS small" and "composition over inheritance." Taken to their extreme, these concerns are adverse to design. I see why utility-first is great for full-stack devs on small projects or awkward rebels frustrated by less control, but it's a huge issue when devs try to introduce this to the tech stack of a years-old enterprise project that multiple hands touch.
Actually Tailwind CSS have jit and can be easily added to already existing projects. You can quickly find guides for that.
@@eugenereim456 But when it's just CSS properties as classes, what's the point?
@@Kayzewolf Design system components
@@Kayzewolf built in media queries, enforcing consistency in layout and spacing, and less actual code to write. You can see examples on their website where in raw css it would be 20 lines, whereas in tailwind its 4 lins of html and a few classes.
@@Kayzewolf you dont want to search for 50 css file to find out exactly what is applied to the one random div
I really like your videos. I remember when I started programming in NodeJS. I was thinking of zoom/discord clone for school (by using WebRTC or smth) so they don't have to use bad optimalized microsoft teams. Recently I watched your video about login/register page in nodejs. That all helped me to learn nodejs a lot. Thanks for your great videos, i wish you more subscribers.
I did my last 2 projects in Tailwind CSS and is very productive! I was able to finish the project very fast and also I now enjoy styling.
Here's hoping no one besides you ever needs to work on it.
How big is your 2 projects?
(tech stack- next.js, tailwind, react-query, prisma, postgres)
@@sreekumarmenon I mean how long these two took to complete, and how big the amount of users the app serves
@@genteka5106 I had posted this info, looks like youtube deleted it because i had linked to the app. it is a medium sized project that took couple of months . not sure how the number of users impact the choice of CSS framework.
Tailwind 3.1 seems pretty legit. Being able to use the square brackets to modify your own custom css is really powerful. It was a feature in one of the older versions, but required you to put a special "jit" feature in your configuration file.
Now it's built in. If the default value of the padding defaults are exactly what you need you can just do p-[1.2rem] and it will work. You can also create custom classes for things that will be used more than once by using an '@layer components' import in the CSS file below the Tailwind imports and then @apply after you class delcaration.
@layer components {
.myClass {
@apply p-5 h-10 mx-[50px]
}
}
But why write that in a style sheet when you can just use regular styling. I think margin-inline: 50px is way more readable and does the same thing.
@@ronaldtorres3366 But what benefit does a long line of @apply statements have over regular CSS? Especially when using the [] syntax as it's not even consuming any design tokens. It's just using Tailwind for the sake of using Tailwind, which isn't a great way to work.
IMO, it ends up creating a codebase with a higher technical debt and with really gross git history. All of the git diff in commits will be on a single line, as apposed to having 1 CSS rule per line and seeing the commit changes much easier.
i tried a css challenge and the hard part wasn't deciding which properties to use but how to name the divs and tailwind solves that problem and i loved it.
I'm always amazed that there are stratum of people who have such a limited imagination that they can't come up with random arbitrary names.
@@Maleficarum999 Seriously. Worst case scenario, just call it wrapper. Need two? Outer and inner wrapper. But honestly anyone who struggles with thinking of appropriate abstractions is probably not very good at software design. That's what software design IS.
Maybe I'll eventually take a look at Tailwind, but I'm more used to "component" libraries, so I kinda want to stick with Bootstrap for now. Its utility classes have also been sufficient for me so far. I want the project to compile with only the needed classes though, I think there's a tooling for that.
Bootstrap doesnt have css purging OR tree-shaking. And most tool that does it usually doesnt play well with bootstrap
The main point he mentioned "if you are not good at CSS" tailwind will look awkward to you
Over my time as a web developer, which is a decade now, I tried many flavors of CSS. Started vanilla, got into Bootstrap, both 2013/2014, then Foundation with BEM and SCSS around 2016. In early 2018, I stumbled upon Tailwind for the first time. And yeah, got the same prejudices as many: too many classes, looked hard to learn, bloated CSS file etc. Really thought it wouldn't get anywhere.
Later that year, around September, I watched some Laracasts and Jeffrey building some project with it. I rethought, and tried it out on some designs. What a game changer it was! As a WordPress custom theme dev, it still integrated neatly. Have been using it ever since, and never been looking back. No writing too much custom CSS, no time-consuming naming of classes. Happy Tailwind user, essentially. 🙂
This was a great video, and it helped me understand exactly what Tailwind was really about. I rarely like videos or leave comments thanking people, but I did on this one.
I didn’t realize there was something like this! I didn’t enjoy Bootstrap, so I actually went and made my own presents css, in the same way Tailwind works. This helps a ton!
Pure css is always the best. Sass makes it much easier.
Lol loops inside CSS thanks
@@eotikurac not really
I have a huge project made with scss, and it's totally a pain. sometimes a class is used in multiple components and if you delete one component you are not sure if you need to delete the scss because you might delete something important that will completely destroy other components, pretty difficult tho.
Started using it couple days back (coming from vuetify and material UI) and I just love it. The speed I can build the UI is shockingly fast.
Got one doubt. If Tailwind is a utility-based CSS framework which means one CSS class per property, how it is different from writing plain CSS inline styles?
if you look into it, it offers more, specifically its a design system which you define. Plus, its not inline styles, theyre actual CSS class declerations.
consistency, says you have new members in the team, if they already know Tailwindcss classes, it will be easier for them to get started
because Tailwindcss offers the same toolset for all users, easier for every one to understand what classes others are using mean without having to surf through the css files
@@Forien it's a lil faster
a dev mostly start avoiding design or architechture fatigue and also decision fatigue, for me vanilla css creates the former one, suppose you've two divs which share some common styling like border or flex, in css you get a choice to just include the common styling once, and that's where the design fatigue comes, now ive to look at the whole fking code to try to optimize the best minimal css which is fking pain, in tailwind you use flex property in both the divs seperately, more work but more clarity, also when you start styling a div, it gives you more perspective about the children elements and you basically starts imagining better how the site will look, you get better at css altogether
👌
We can create component class like `.btn` in tailwind css also
Just In Time compiler coming in hot to add edge cases without bulding all directives, all pseudoclass utilities and maaaaad speed. People be complaining about the extra markup; yet, they do not realize the massive flexibility. Plus anything tailwind labs touches is gold. Headless UI and heroicons are great examples
Idk ... i don't like it. you move your css code from your css file into your html code ... its the same as you write everything into the style attribute but with variables. i don't see any profit there.
My thoughts exactly. The only difference is that you can overwrite them through a CSS file, but that's it.
Read about utility-first approach. It has been there for so long. Only that Tailwind has recently reenacted it.
Tailwind is for people who don't know what the C stands for in CSS.
feel jelous by the people who use tailwind
What I don't understand is, if each Tailwind class is like using a CSS property then why not just write CSS?
it's shorter and faster to do? Don't know honestly, I'm quite new
The one advantage is, that you are able to easily change _everything_ with a certain property (like a 10px margin) in one go. Imagine, your designer tells you, that all 10px-margins should now be 12px. Or you want to create a responsive layout, where (controlled via media queries) for a certain screen size all 10px-margins should be 7px.
Tailwind (and similar) adds another layer of abstraction and allows you to think about the exact design later after building the structure of your website by adjusting the actual values of the tailwind classes.
But of course there are other ways to get the same result. You can use something like sass that offers various ways to accomplish the same (variables, mixins), or plain css variables.
Also there are downsides of using generic css-classes. Of course your HTML becomes more complex and less readable. Having 10 classes in each element instead of maybe 1-2 bloats your HTML. Otoh you immediately get an idea what an element might look like just from looking at the list of classes it uses.
In the end, tailwind (or the general idea of using generic css-classes) has advantages and disadvantages, like basically everything. It depends on the actual use case. If you want build a website with a very specific design, it might make more sense to write your own specialized set of classes, and/or use something like sass to combine those classes into the classes you will actually use in your elements.
If you want just a quick site where the exact look does not matter so much, you can use bootstrap. If you want a more generic approach, or the classes bootstrap provides are not sufficient enough (because bootstrap doesn't have all the elements you need) tailwind might be the perfect solution.
@@imagiro1 Thanks for taking the time to explain the above. It's made everything a lot clearer!
Best thing I love about Tailwind is that it lets me do SFC in React. No more context-switching between a JS file and a CSS file.
Which is why i like svelte, its all in one file; html, js and css :D
I agree 👍
@@aaronrothwell7615 I'm react developer and sevelt looks so wired to me lol 😂
@@aaronrothwell7615 Fellow svelter! Svelte + Tailwindcss is such a powerhouse it should be industry standard at this point. Although.. with svelte, what with css being scoped to a siongle page and all, the problems of native css itself is mitigated, so much so that I actually could do away with Tailwind in some occasions.
I don't know. Maybe it's just Svelte that's the real MVP here.
You make things start making sense.. 👏
I understand that Tailwind has some features that bootstrap doesn't. But I've been using bootstrap for several years and if you don't want, you don't need to use the built-in components because you can use only the classes just like Tailwind. The component library of bootstrap is a flexible library that's easily overridable. I totally prefer to write some CSS rules instead of having 5 lines of class names in each div.
Tailwind pretty ez to learn also there's tailwind config where you can literally define css rules.
For example you can set h1 to have certain classes engraved in it so you don't have to write everything. Literally righting just (no classes) will load your defined rules.
Also tailwind can be used with native css which means they have same flexibility level vs bootstrap. Also hover states focus and element states. Really simple in tailwind.
@@nikyabodigital You don't need tailwind to write css rules to tags. My point is that whoever made this video, never actually used bootstrap.
@@JackyPup People today are getting mad with consolidated tools that have more than 2 yrs old, and all I see are buggy apps everywhere 😂
First Kyle I've seen without a hole in his wall.
Please compare tailwind vs custom CSS classes
Its very similar but a lot easier to use
Soto easier to work with and alot harder to look at 😂
You don't have to copy paste the styles. You can have a custom class suppose btn.
Funny how times change. Not so long ago, web devs focused on clean markup with no uneccessary classes/ids. Set a class/id to the parent and style all sub elements using child selectors etc. There was even a term for developers which over-used divs and classes - they had "divitis" and "classitis" ! :-)
first of all, great video.
At 6:42 tailwind actually have a solution for this, you can make one class combining several classes and use that one instead.
Yeah you can use that with Tailwind installed as a npm module with @apply -classes.
Yes but by that time I've already called a predefined Bootstrap class and it's done.
@@ToddDunning ...which looks like shit. That's fine in some cases though, but if you're making a public website you don't want it to look like every other bootstrap site.
@@gnomeskejs you do realize that you can change all the value over the Sass file right? If you don't want/like the default theme of BS, you can customize it without having to re-writing the whole framework.
I love Tailwind CSS but sometimes it makes my component "heavy" to read since you have a long list of class though the div and then my eyes mixing" these big lines of CSS classes with the component logic. The way I found to separate the workflow of component with the styling is to implement and add a scss module to my component (with the @apply func) and then have styling and component logic in two separate ways. This way I can work on my function without having my eye reading the Tailwind classes inside the component
Then what's the point of using apply directive in CSS file when you can write css directly in CSS file.
@@FaizanAnwerAli then you did not really understand what Tailwind CSS is about. It’s not only writing utilities inside the html but it’s all about productivity and time saving by simplifying your life with CSS. I don’t remember be able to deal with responsiveness so easily that tailwind does with a simply md:class rather than writing classic CSS. Grid management is also another subject where tailwind will help you earn some time
@@flo_dev last month I wasted more time with tailwind than I actually do without it. It's useless
@@FaizanAnwerAli 😅
For older developers, as in having been a developer since the mid 90s, I can say when CSS came out we became conditioned to avoid things like "names" and "functionality" as part of the name...like text-red is just a no-no because you can't then change the color to blue...So ok you can have text-blue as well, but at that point, I still fail to see the point. I'd rather just write the css myself (scss actually, which makes several of these issues easier). I'm starting a new project so I thought I'd at least see what tailwind is about, but I can't get past the very essence of what it does because it clashes with 20+ years of not doing that! Though to be honest, I'm quite ingrained in boostrap because it made sense to me when it came out. I understood what it was trying to do while adhering to those principals older developers had developed.
You can specify (and you should) your design system colors like "primary-button-color" or "main-color" and so on.
Couldn't agree more. Just ended a Node.js Express Mongo course, my first year at studying programming, all with JS. I can't imagine using a CSS framework that just turns css properties or a mix of them into predefined classes. Makes no sense for me, just master CSS and learn how to reuse classes or combine them and that's it.
"new" is tragically seen as better unfortunately...
Part of being a developer these days is frustratingly forgetting about the stuff ingrained that you weren't suppose to, that you are encouraged to do now smh.
It’s not the first time the IT industry was wrong about something for 20 years before learning from failures. I only say waterfall model and itanium (very long instruction sets architecture) and mainframes
first time watching a video of you talking with emotions and am happy to see that i watch the whole things smiling...
I just use tailwind for 3 months ago... it's amazing
this guy is one of few people I take their opinions very seriously .
I love tailwind. Custom CSS plus tailwind is all I ever need.
When I started programming, I was told about the importance of "separation of concerns". Never use style inline in HTML, because it had to be clean and fully separated from CSS. Well, Tailwind is more or less like inline style on the tags. But wasn't that a bad thing?
Agreed, utility class frameworks are trash
@@___jd Ok sir
I think tailwind can be useful when you're using something like React, where emphasis is on reusability of components. I wouldn't really see myself using it with vanilla JS though since it can get messy.
EDIT: I realized that he talked about what I wrote towards the end. I should've finished watching the video before commenting...
@@giorgiotran4850 yes, I agree with that and I understand but still, remember that there are other ways to scope components style (i.e. Vue' scoped style). However, I didn't want to criticize Tailwind, it was a sincere doubt.
I have worked with and without tailwind for a some time, and oh man is it useful. If you know what you are doing, tailwind gives the ability to instantly know the structure and style of a component just by looking at it (the class naming is done great). It gives you an easy file (tailwind.config.js) to theme your whole web app. And gives you the ability to really customize your styling, "unlike bootstrap" with custom values. Going with the flexibility of having both (HTML, CSS) in one file (or component) makes your life easier. Instead of switching files between HTML and CSS or scrolling up and down the document like with (styled components), tailwind lets you focus on the element itself and once you get to know the framework, makes iteration incredibly fast. I recommend tailwind to almost anyone in frontend web dev, since I haven't seen any downsides to using it. Saying it looks messy is just not having the understanding to read what the classes are doing.
I think it depends on use case, tailwind is good for component based js frameworks. If you change tailwind classes for one re-used component, it works well. But, if you are coding a landing page or some server side rendered template, where the html block u write isn't repeated. You are better of with boostrap Or foundation.
You know why jquery is used most? Theme developers of WordPress, shopify, magento, Drupal, etc use jquery. Jquery gives max backwards compatibility. They also use bootstrap in theme development.
shopify uses jquery for themes? I understand that its uses Remix ( react ) now.
Hey Kyle, what do you think about Material UI? I think learning that and Tailwind CSS would be ideal. One gives you the possibility to customize as much as you want, the other gives the ability to design a UI on the fly.
I never use bootstrap and always make my own css because its just a template and its a pain to edit it. I never heard of tailwind before i watch this video, and now i really want to learn this. From what i heard from you in this video, tailwind is basically shorter + easier inline css, which is what i need.
Kinda in the same boat. I prefer doing it the traditional way since I could use the practice anyway.
you really helped me !!!! I'm going with Bootstrap " This Time" ...(I'm a noob at the moment)
I always appreciate your approch is explaing things easy.
I am a beginer for React/Next js, but done dozens of amazing websites in Wordpress.
I wonder why every one writing too many css(Tailwind or Classic) classes for every elements to design
a simple section on a web page ?
Why, so far no one made an extension for VS Code to make these css style much easier ?
I mean, a pop window should be having a small canvas and tools like div/Button/inputs/etc.
Just drag and drop on the canvas and design a card for example.
Press generate code button.
Which should convert that design to basic html/css(Tailwind) sinpets.
Paste that snipetson our code.
Later on one can alter that as they wish.
Now for beginers seeing css code looks like a rocket science and not showing interest on web applications.
Please suggest any simple tutorials to familiar for designing a simple web page.
Now designing a Navbar and Sidebar with responsive features looks very hard even after 45 days of learning React.js on RUclips.
Actually this is the first video that clearly explains what Tailwind is. I reviewed several online articles and a number of videos and it seems like no one can explain what Tailwind is.
Honestly, I have a number of pre-set classes I use where it makes sense, but since the advent of CSS custom properties, I've dropped all CSS frameworks from my workflow. Now to be fair, I'm a solo developer who builds bespoke sites for small to medium sized businesses, so I'm under less pressures of time than many of my colleagues and whilst I take great care to ensure my code is clean and easy to read, I don't have to work in a team setting where code is regularly passed between developers. Tailwind sounds like a really handy library to use if you're part of a large team or you're designing without the benefit of a Live Preview feature, such as that found in Espresso, but if you can just type CSS and watch the design update in real-time, having to constantly run back to your HTML / template file to add classes to your code sounds like a real time sink. Everyone will have different circumstances and it's great that there are so many tools and libraries to help each developer build a setup which works for them.
Oh and because of this channel, I now get up a five every morning and it's been life changing, so thanks for that. :)
When you want to make custom designs as a backend developer nothing is as productive as tailwind to get up and running
@@tanzimibthesam5861 You could well be right, I just don't need it. :)
@@avenginglettuce but you change the css, right? So either you change the css file in the html template, or change it in the css file. Either way, you had to open a file to change it. So calling that a waste of time is not right
@@khangle6872 When I open the CSS file I can change the style for ever single page on the website, I don't need to open individual template files or even pages if you're really old school. With that one file I can control the style of everything everywhere, with Tailwind I'd have to change every page which had an element which needed the style class adding. Just typing it makes me wince. Nah, it's not for me but more power to you if it works for you.
@@avenginglettuce unless your html markup is terribly organized and duplicate everywhere, each "unique" component is defined once and only once
I don't know what tailwind css have, but using bootstrap and coding with classes and creating my own css styles I realized that Bootstrap is very good for creating container and in columns content, it would take a lot of time to write it on my own so bootstrap have some good stuff, but if it comes to writing something that will be presented on the site more than once, it's better to write your own CSS code.
Because for example if you use 8 the same buttons and everywhere you added class="px-4 py-2 bg-blue bg-lightblue-hover d-inline-block mx-auto transition-0_3s border-around-5"
then client or you will want to change to a different style, then you have to edit it 8 times or copy paste and find all places where you used the same button.
But if you wrote your own code where you added only primary-button, you just edit styling of that class and it changes in all 8 places.
The only classes I like to use separatly is mx-auto, everywhere I put in buttons display: inline-block to they are automaticly moved to left, so mx-auto adds margin left and right auto so the button is in center and class ml-auto makes button going to right side of container.
We are not the same obviously :). Recently I worked with tailwind. All it does is bloating the html. It looks a total mess. What is the problem with creating classes for different button as your example? Nothing. My css is in a different file, the html looks nice and clean. The time needed to learn tailwind classes is enough to learn pure css.... I am good at pure css so I can see how tailwind classes are almost like pure css...
It's like going back to 1999 when we put all css in the html tags... it's hard to maintain, hard to see what is what.... this "utility first" sounds good but a bad practice.
I admit tailwind looks very nice. As a design. But as a developer it is a nightmare. :)
If I have to design a website I will use pure css. It's better. And no framework can do what pure css can do.
I agree 100%
If you don't like the clutter, you can extract the classes like: .button { @apply p-4 bg-red-500 text-white; }
Honestly, if you've worked with Tailwind long enough, the classes are so easy to read even without Prettier and Headwind. If you check Tailwind Discord, people fixing other people's code like candies. One problem with extracted named classes is that when you want to debug, you need to view both the HTML structure and the CSS classnames. With Tailwind, you debug directly in the HTML looking at the structure. You don't have to think about complex selectors. Tailwind also solve the problem of unscoped styles.
@@delulu6969 Maybe... we are different. You like it, I don't. I know about extracting classies. One more extra unnecessary step for me. You say people can work with each others code... sure. They know tailwind, they like it. :)
I keep my mind open and I will learn it a bit more but no css framework can hold up to pure css.
I can see how it is useful as an admin template (bootstrap or tailwind) as you simple copy and paste the template parts. But to create a unique front end design with any css framework? Sure not. If you are a backend developer then you need a front end developer to do that or must learn css. Period. There is no easy way out. I took my time to learn css just to be able to do the frontend without framework.
So yes. We have this new tailwind as an option but I do not agree when people claim that tailwind solved this and that. It's not true. It's a unique css framework. It looks cool. It bloats the html and if one is willing to pay that price that use it.
My opinion is that tailwind fans can't see the problems ad they are biased. But it's OK. I would be too. :)
@@Bevallalom You can't use Tailwind if you don't know CSS. Tailwind is not like Bootstrap. You don't have pre-styled components. You have pre-configured design system which is customizable. Otherwise, Tailwind UI, which is another paid product, is similar to Bootstrap. I'm a TALL stack developer. I had worked on websites without frameworks, WP, and also Vue. Plus, my background is graphic design. I know what a 'custom' frontend looks like. It's achievable with Tailwind.
@@delulu6969 that's good. Obviously I am new to tailwind and I don't know what one can achieve with it. As I said I like the "look&feel" but not the approach. I believe you, I will look into it deeper and maybe my opinion will change. But no guarantee 😉
Just did a personal project w Tailwind and I’ll tell you what, it’s brutal reading divs flooded with class names
Been using tailwind for a year now and am regretting it. It is basically a rename of CSS properties. It is limited (there aren’t utility classes for everything) so you end up having to customize or mix & match. It makes your markup ugly and hard to maintain. It is difficult to debug because you can just edit what all your buttons look like in the dev tools, for example. You have to memorize an additional set of names for css properties, e.g. “line height” -> “leading”. Sure it’s convenient, you don’t have to switch between CSS files and your document, but you lose the power of CSS selectors and you end up duplicating classes a lot. I’m going back to SCSS which gives you cleaner code, and flexibility.
Scss with BEM and mixings is the way to go, tailwind is a horror to debug and change forces my react project to create small component for every repetitive thing, which i don't need for small exclusive part of the page
Nice video! I’ve been using tailwind for a side project recently and I fell in love with it. I was looking for something NOT bootstrap and material UI is just not my thing.
Dude could you please make a tailwind tutorial series where you make components? I would love to see that!
learn css so you will be able to do that, kekw
tailwindcss is great but as a backend developer, i feel it's faster for me to use bootstrap because the components already exist. i don't have to figure out alignments and mobile friendliness. dropdown navigation menus and datepickers for dashboard interfaces. i'd like to learn more and maybe in the future use tailwindcss more but in my job, they deadlines are always due "yesterday".
Yup don't think tailwind is for backenders
@@blazi_0 from my experience, the reason is many companies hire developers (backend) and expect them to be full stack developers. managing servers, network, etc. so many devs (backend) prefer to use "ready to use" CSS frameworks like bootstrap because it's quicker and easier to use. those that have the luxury of time and patience then tailwind is a great option. since working remotely for the last couple of months, i was able to start playing with tailwindcss with test projects and it's great. the biggest issue for me with trying to learn tailwindcss is when to use grid, container, or , flex box. and that crazy alignment thing haha.
so in my opinion, as a backend developer, the challenges of using tailwindcss is time and "teaching an old dog new tricks".
Well, you're comparing it to bootstrap. But I'm curious about how it compares to manual CSS. To me, it looks like you're writing your CSS in HTML. And I'd prefer them In a separate place so I'd choose manual CSS over utility-based framework like tailwind.
vanilla css has always been more flexible than these frameworks. frameworks exists only when you don't want to bother yourself with writing 100s of lines of cdoe in yet another style.css file. Writing manual css can actually be pretty painful and labour intensive. Generally you'd want to write code in sass and develop a sort of mini framwork for your custom needs
you cant do media queries or hover states etc if you wrote inline styles
@@snowraven8829 Yes. I understand the purpose of CSS Framework. But your explanation seems to apply to component-based framework like Bootstrap. You throw some div and class and you get a well-design card out of the box.
What I'm questioning here is Framework like Tailwind. They're utility-based. You don't get an already designed things out of the box. You declare the property one by one and then combine them to build the whole component, just like writing a manual CSS would.
The difference however, Tailwind allows you write the CSS directly inside your HTML, but equipped with the customizability power of manual CSS. However, it feels like a mess to me to combine them together like that. I'd prefer the CSS in a separate file, which would only filled with CSS. Just like a manual CSS would.
@@owenmelbourne9602 Manually, you can't. But not with Framework like Tailwind. And here I'm not comparing inline CSS manually vs inline CSS with tailwind. It's the other way around. Read my comment again.
@@farhanaditya2647 i mean when you're working with front end frameworks like react you really don't want to switch between your css files and your js files like one million times. Tailwind excels at preventing that switch problem. You get to write css directly in html. And that is exactly what tailwind is for- providing modular classes for common css stuff. This makes working in stuff like react a whole lot easier. Yes, you can use bootstrap and if you're ready to go another mile even styled components but then again the styles they provide are opinionated. Tailwind allows you to work in similar workflow as bootstrap but allowing much more flexibility.
Tailwind is absolutely amazing if u work in a team.
@Nope Leave Me Alone okay, let's keep it friendly here, there's no need to call people names because you disagree.
@Nope Leave Me Alone I am making a weather app and I couldn't agree more. After 4 years on the project, I have successfully built a programming language and a custom assembly for my weather app. I am now working on a angular clone for this programming language specifically for this project. Next up i will build my own CPU architecture for my upcoming corona tracker.
@Jack Saat this is generally a good reason why top companies have design systems
I like using the apply-directive to create my own button-classes using Tailwind. I tried using Vue-Components to achieve the same, but that just does not work well beyond buttons. This way I can still stick to the classes defined by Tailwind, but "combine" them into my own .button or .input classes to ensure uniformity across the app.
I think tailwind is great for non-JS applications.
In react you have much better UI solutions, such as Radix or Chakra
Mostly I prefer to write my own css as all these libraries have way more stuff in them than what I need.
But I do use both bootstrap and tailwind css from time to time.
Tailwind comes with integrated postcss plugin that allows you remove all unused classes and your css file can be less than 50kb
@@eugenereim456 there have been ways to do that way before tailwind. Using tailwind adds more CSS than it removes because you can't shorthand tailwind. (try margin:0 auto)
I didn't hear you mention a single thing about tailwind that bootstrap doesn't do. I build pages every day using bootstrap doing precisely what you mentioned p-5, px-3, m-3, my-3, h-1, h-3, etc. I'm looking at tailwind because I'm using Astro to replace wordpress and tailwind is integrated while bootstrap is not. Regardless, I am simply pulling the pieces of bootstrap that I use and encapsulating them into either the global stylesheet or components. I extended bootstrap by adding my site colors not by replacing the bootstrap colors. I simply copied bootstrap button classes and changed the pieces to create my own site buttons. Doing that is exactly how you described tailwind. This is a bit tedious but I can't see learning tailwind as being a benefit at this point. Maybe I'm missing something but bootstrap seems very easy to extend and make your own. Anyway, love your work.
Bro I dig your whole channel, you helped me a lot of times. But what I want to see now is you playing that jackson! I've also got one. Cheers :)
I think all this things are created to be faster and more efficient and whatever, but we should all think where this leads to.
I don't want end up in a working environment where I can be faster, only to be bombarded daily with different tasks cause its easy now, and we can "ad-hock" make any adjustments.
I want to take my time, sip my coffee, think things through and have time to come up with a creative solution. Still working with ZURBs Foundation, and its perfect for me.
I guess it all depends on your approach and what you're building.
Just used Tailwind in my recent project and I admit it's really addictive and awesome
Tailwind with React or vanilla JS = chef's kiss. I haven't had much luck getting the JIT features to work well with other libraries/frameworks, but the classes are almost worth it on their own.
You had my curiosity. But now you have my attention.
I don't understand how is this different from inline styling
Its a class hell, if youre done working on another project, and stop working in Tailwind for a month, go back to your old code and its really unreadable.
Inline style won’t be able to do pseudo classes like hover: or focus: So you’re limited to styling just the default look of elements.
Great video Kyle. I've been using Bootstrap, but it sounds like Tailwind is the way to go for my needs. Thanks!
Very informative video! thanks Kyle!
Please do a react+tailwind tutorial, Thank you!
Hey, newbie here. Aren’t react and tailwind kind of similar? Thanks
Nevermind, he kind of answers the question at the end.
It's pointless if you don't understand CSS first. And if you do, then you'd probably prefer not to use it.
I understand that the customization offered is why one should choose tailwind over bootstrap, but I dont understand what the argument is for not just using vanilla CSS.
It doesn't seem like it's valuable to use Tailwind unless you have advaced knowledge of CSS, but I dont understand the incentive of why would I work so hard to achieve that just to essentially abandon it in favor of what seems to just boil down to abbreviated syntax and abstracted naming conventions.
What am I missing?
There are several reasons why sometimes tailwind is a much better fit than vanilla CSS. For Example with Tailwind you can built websites faster because you have to write less code. Also in most cases Tailwind is faster in terms of performance because it uses a special technique called "Dead Code Elimination" ...
I am currently working on a video about tailwind and I am probably going to post it this friday... if you are interested in learning more about TailwindCSS 😉
Great and simple explanation. Exactly what I was looking for. Thanks!
Tailwind + Ant Design in a React or Angular project is
across frontend, backend and data engineering tailwind is probably the best framework I've ever used. highly and well opinionated while allowing full control and flexibility.
Looks interesting. But in my experience there's a case where it feels bad: When you work on a big project, with a framework and tons of components with lots of large complex css tasks. Then you'll for sure end up with more actual css. And then you have your css mixed in two places. That kind of bugs me.
I wrote the same thing using jQuery back in maybe 2013. We used it on only one large project farmed out to a 3rd party. My Boss didn't like it but I thought it was a cool idea. Called it Stylizr as many plugins for jQ had that kind of name convention. Also a huge processing overhead looking at every element with the class of "stylizr" and then parsing out all the other shorthand to replace with longhand "style" information the browser could use. Also, completely non-reusable. Great if you don't want to open multiple files or scroll to your section but that's about it.
Tailwind is good, i had the same skepticism before and after using i changed that, but tailwind has a thing that it does not work too great with dynamic props for instance, for that something like styled components is a better approach. I am between these 2. Tailwind is easier to prototype things quickly and very scalable, while css in js is more ergonomic
you are reading my mind thank you so much !!!!!🔥🔥
Tailwind CSS lets you write shortcuts for what you would normally write in your CSS files
Well, was forced to use Tailwind. Making styles took me more time then usually as I had to all the time go to their docs. It is prolly great for people who do not know well CSS, but for me and for colleague it was slower and less clean then simply using css. But some people in team are more backendish devs who doesn't know css so well so they like Tailwind. For me it felt like pointless abstraction over things which are for me easy, simple and fast and which I can write with closed eyes.
On the other hand, it can help to avoid chaos in css as in projects with many coworkers it is really easy to create chaos, make numerous css bugs (specially when some devs are bad in encapsulating css), but this is general problem of big projects and big teams. Here Tailwind really helps to avoid many of such issues.
Very informative video. Thank you!
hey ...you told me you will and you did it...nice to have your opinion
I disagree with those who said tailwind is great with frontend frameworks, in my experience with react tailwind fails very deeply when you want to conditionally apply classes and at the same time use JIT compiler, unfortunately JIT compiler cant excite JS so it cant detaermain the exact classes you used when building your final css file
?? Not true. You shouldn't be generating classes like m-${margin} but conditionally applying a CSS class isn't a problem, tailwind or not
vanilla forever !
fax
I’ll still probably go with bootstrap because it’s just more fast to crank something out, that can be really handy at times
Great to the point video. Thanks man!
Please please please please please please create a video of how to use tailwind properly. I am watching people using TW on large projects with big teams and it is an absolute disaster to clean up. We actually had to fire some Jr. Dev because they swore to TW and continued to destroy entire layouts without a clear understanding of its pitfalls.
I am currently working on a video about tailwind and I am probably going to post it this Friday... if you are interested in learning how to properly use TailwindCSS 😉
Kyle, your content is fabulous!
thats why I love MUI for type safety
When I write reusable components with/without a js framework, I use semantic markup and rarely need more than 1 class on the parent element. It's called UI consistency.
Thanks for letting us know!
To your last point, you're perfectly able to extract css components when using a simple html/js site without react/vue.
It will take me time to change but am still stuck with MDB. Good content 👍
What I love about tailwind that it looks like u r writing the style by ur self but actually u don't
What I mean by that is like when u write flex in class u know what u r doing and u know u can do it in css but instead of writing hole word u just write flex
Absolute justify-between all these classes are very similar to writing actuall css . Love it 😀
Bootstrap my favourite 👍
what you said on bootstrap is incorrect. instead of importing whole bootstrap, you can import only layout, utilities or other parts of bootstrap.
furthermore I make bootstrap more flexible with @emotion/styled react plugin. by making use of the 'css' prop
I'd like to see Tailwind pit against something like Pico CSS.
Maybe I'll do a video about it then 🤔
Good level headed and unbiased advice
With Tailwind instead of writing "card" now you can write 5 times longer throughout your code. Use it now!
It's really a matter of whether you want to make your code simpler or whether you want your website to look less generic and more your own.
@@namun4 less generic? I was talking about styled css. Heck, even BS can be customized right of the bat through its sass file.
6:43 - Use can just create your own classes in your input css file and then @apply tailwind to it. for example a .btn class that has a line of tailwind classes.
tailwind css is good because everyone who pumps it has a course on it... besides, there is no reason for tailwind css.
Lmaoooo. Tailwind is actually good
I dont know if your aware, but you can actually customize everything in bootstrap, you can make the primary color be another color, and that applies to allother stuff
Great video! Can you make a video on how you customized the fonts?
That would be cool! There are some good details at tailwindcss.com/docs/font-family#font-families on replacing the 3 default font family values sans, serif, and mono with your own or defining new family names like display / body.