I used to hate Tailwind but when I used it for a really big project that's when I started to appreciate it. It saves me hundreds of hours in styling.

As a small note: inset is an actual property in CSS which is a shorthand for the directional properties top, right, bottom, left. Much like using padding or margin to shorthand padding-right and margin-bottom. It's not TW exclusive which means you can use it in your own CSS :)

I've tried many ways to write CSS over the years. For me, the most scalable way of writing CSS is "CSS modules with global variables". When we are following a _token based design system_ , we can have pre-set values for colors, spacing, font scale etc to help maintain consistency. Additionally, CSS modules resolves the issue of naming conflict which otherwise was difficult without a proper naming convention that everyone in the team had to follow. The issue I've noticed with Tailwind is that it makes component look ugly with way too many classes. However, it does increase productivity, no denial about that.

I had been using the utility classes of Bootstrap for years before Tailwind came along. Because of the limited features of the Bootstrap utility classes, I had to augment it with SASS for more bespoke styles, now I can do 95% of my styling using Tailwind with a tiny tiny global plain CSS for those real edge cases. It's great.

Ones you go tailwind you can never go back

The amount of effort the Tailwind team has put into adhering to research-backed best design principles is a highly under-appreciated aspect of Tailwind. The ability to produce high-quality UI with very little knowledge of things like optimal typography sizing and complimentary colours is incredible. You can read up on the science behind it on Refactoring UI. Adam and his team have done an incredible job making UI best practices accessable to developers without design know-how. Couple this with IntelliSense, Language Processing Servers and Autocomplete extensions for most major IDEs and you have an abstraction that truely adds an immense amount of value. Not only lowering the build-out time of applications, but also making them more scalable and maintainable.😎

Love the honesty here. I went to try it on my last project thinking it'd be as easy to use as bootstrap. It definitely has a learning curve, but I also see the advantages. Also, the setup really isn't THAT bad, but learning how to use it is a curve.

About the first problem, you will nerver need to name things if you use scoped styles of libs like Vue and Svelte, and even without them, you don't need to add an id or a class to every single DOM Element, if it was the case, add an id or class just for the first Element and use the appropriated selector for that, like ".main-navbar > ul", using SCSS or any PostCSS nesting plugin this is even easier.

It seems like people forget you can still have CSS classes and style tags in your app’s CSS file for the more universal stuff like buttons, text boxes, etc. Inline styles are just super nice for single use things like navigation headers, etc.

Tailwind vs plain CSS is, really, an extension of the old "composition vs inheritance" debate. The "cascade" in Cascading Stylesheets is inheritance, defining a broadly-scoped thing that is then refined and overridden in a hierarchy. On the other hand, Tailwind is compositional, where individual tiny pieces are assembled as-needed into something larger.

Another amazing video! I haven't used it yet but it did convert me into trying to create utility classes that can be reused all over vs. a all-in-one class which I might have to repeat with a slight variation elsewhere.

I tried Tailwind a couple of times, but decided to stay with good old SCSS. I personally think classes do a great job making your html/jsx self-explanatory. It's much easier to distinguish between, for example, buttons and text links by looking at their class names rather than a bunch of tailwind styles. In Tailwind projects I saw it was solved by creating hundreds of separate components most of which were used only 1-2 times in the whole project. This not only turns codebase into an unreadable component hell, but also sometimes seriously impacts performance. SCSS actually resolves all CSS issues I had. You can create mixins to reuse huge sets of css properties, and most frameworks support scoped styles which solve class name collision issues. I don't hate Tailwind, it does its job, just in a different way with different issues. I personally prefer having clean markup and readable git diffs for styles

I went from thinking Tailwind was stupid because "its not difficult creating classes and SASS makes this easy!", then I began working in a company that uses tailwind exclusively for styling (as little manual styling as possible) and after 3 months of using tailwind I am loving it 100%. I even remade my passion project to include tailwind due to how easy it is to use

What I've found really useful as opposed to tailwind is SCSS modules for components that import standard UI stylings from a master file. That way you get the usability of compact, descriptive classes for components without breaking styling in other parts of the app if styling changes need to be made in this part of the app.

love the humor in this, and the crash back to reality you give devs that have lost sight of what's important. Great work as always, keep it up, and thank you.

I started using Tailwind like two weeks ago and I have to say: although it's not easy to get started in the beginning, a lot of things actually make sense. I don't have to worry about the precise px values anymore and I think it helps with understanding the "mobile first" approach. I have been doing frontend for a couple of years now, but for the first time I feel like it is quite easy to tell the components how they should actually behave. Less code, more CSS classes :)

Inset-0 is the same as inset: 0; And is totally valid css in itself. Personally i tried tailwind and decided it was not for me.

Great explanation, I have an interview next week, and the whole day I was looking for a better explanation of tailwind, went through many yt videos, but was confused, thanks, I got the perfect explanation which I was looking for.

I personally firstly split my HTML into multiple components and then use different element types to use for my CSS selectors instead of only divs with classes. Not only does this save me a bunch of code ( - ), it is also a lot prettier, complies web and accessibility standards (Using lists to list elements instead of jamming a flexbox onto a random div) and even after months of not looking at the code I can directly see what rule does what, as I use selector nesting (nav > ul = Navigation links for example). I personally hate the jquery/php way of just giving everything a separate class. That is not what they are meant to be used for.

I have been backend developer from years. Time to time I used to check some frontend/Css stuff and my site always looked horrible. I was like without designer I simply can't get look, alignment, layout that looks like a Pro work. The chaos with raw CSS was just pushing me behind always. Than I tried Tailwind CSS and boy..I never looked back. All of sudden everything sounds logical and well thought out. Now I'm able to consistently produce high quality site layouts without any designer help. In my opinion what Tailwind CSS brings to the table is order and logic in totally chaotic CSS world. Most of the time you can assume what utility class names within Tailwind CSS. No need to go into complicated SAAS and all other syntax sugar totally avoidable stuff.

2:30 does this abstraction cost anything at runtime or is it rolled out somewhere before this? (Are any of these CSS abstractions computationally cheaper than vanilla CSS minified? or maybe web still stuffs its ear and starts screeching at these type of questions still??)

I've been having to work with a system that uses Tailwind CSS that another company wrote and none of it made any sense coming from bootstrap. This really helped understand why there was no "baseline" style I could find like Bootstrap has. Thank you! Liked and subscribed

My interest in tailwind began when I tried to basically reinvent it without noticing. Started composing ~sort of standardized~ classes on a project which, when I compared to Tailwind, some were even _identical_

I just started learning Tailwind CSS and got the notification about the new video immediately…

hey Mr. @Fireship, in regards to the long lines you mentioned AND the separation of HTML & CSS, what do you think about the idea of extracting the styling out of the HTML to a separate SCSS file in combination with BEM and using SCSS' @extend keyword. As an example: ``` .faq { $border-radius: 1.25rem; @extend .bg-gray-100; &__header { @extend .align-items-center; @extend .d-flex; @extend .flex-column; @extend .gap-2; @extend .pt-5; } } ``` I've been using this approach for more than an year and I enjoy separated HTML/CSS, the power of SCSS (nesting, variables), short HTML lines and encapsulation due BEM naming convention. Ah and to add to this I've done it with Bootstrap, but might as well apply it to Tailwind as well. What are your thoughts?

Generally a pretty solid video. One gripe I have is that you point out flaws of standard CSS approach and how tailwind solves it, then you list tailwind flaws and show tools that can help deal with them. The thing is - anything compared to basic, no-tool CSS approach will be better. But there are things that help you make CSS still be CSS and solve the issues that you mention (SCSS, style scoping, stuff like that).

awesome video again thx for this

as a react developer, i just can’t deal with bloated jsx, especially when i have to write a lot of conditional classes, styling and internal functions

I just started using it and mostly use it just for the layout and then CSS for everything else. It just makes sense to me to separate concerns that way while not putting tons of extra lines in my html. I find tailwind easy but my main concern is going back to fix something. finding the right command would be like looking for a needle in a haystack. And if you have "cards" or "containers" that share repeating code you would have to switch it everywhere. Instead of switching one line of code that applies to a class in CSS

One thing: the "purge" method where it's pre generated all variants, then removed the unused ones is a legacy mode. Since 2.1 the default mode is JIT and generates the CSS classes based on the class names used in your HTML/JS code.

You know he's bout to drop video on the topic when he asks about it in community posts 💀

I just learned it 2 days ago and did the first project yesterday with it. I dont like to clutter my code with inline style but to be honest, its not too bad. Good thing about doing it with React is that you have a lot of compenents and it breaks up the code in differnet files so it doesnt seem cluttered. Now that extension, i am definitely going to be using it!

Never used Tailwind, and I still can't bring myself to.. Similar to replacing terminal with git guis, I think it helps a _lot_ with learning to use the original CSS where you are writing properties and seeing the result. I'm also a big believer in very tidy HTML, with minimal classes. It shows the dev in a single glance what that page is doing, and how it's set up.

Love your content. Great videos. Have you done one on PicoCSS yet? Where does pico fit in?

Another problem that was not added here, is the fact that the HTML will usually not be cached (if you use SSR), compared to the CSS, which is usually cached. That means, that you will increase the size of each response. But this is usually fixed by still using classes for elements, but instead of vanilla CSS in the classes, you use the Tailwind preprocessors. Anyways, nice video, really helpful.

While I haven't used Tailwind much, I much prefer just using plain SCSS. Quite a few of the problems that Tailwind is designed to solve are just React-isms in my opinion, and I don't use React. One of the advantages that I do think Tailwind has is that it makes it harder to introduce visual inconsistencies and the way it's structured lends itself to good visual design. Overall I still prefer writing SCSS, though.

SASS is my way nowadays, and Its pretty fine. css with code nesting is god-like already. Tailwind helped me out a bit early on when i wasnt too sure of standards to use (had poor css writing, many overlapping classes and stylings going on). SCSS keeps things organized for me very consistently, and if I still want to follow a utility based approach, tailwind showed how easy it was to do so imo.

How did you highlight the root css of a tw class :O ... mine doesn't work by default ? is that a vscode plugin? I am using tw 1.9.6 atm

It does make me consider how many younger developers understand where we've been with CSS and where it has led us - I mean, sure, these woods look awful scary if you are in them, but step outside ... hell, you just want to light them on fire. So, concepts like Tailwind are a LONG time in the making - look up "block-element-modifier" if you don't believe me. If you want to go back further, go languish in the Zen Garden, some real home truths were presented WAY back then - before some of you were out of nappies. Look it up - launched in 2003. Now, ALL of this absurd confusion can be totally ignored if you are building a small website or a simple application. Seriously, just use plain old CSS. This _only_ make sense in the world of massively complex web applications used by millions of people. That's cool, because those apps are so massive and so complex, they form black holes, eat themselves and somebody decides to recode them every 2 years, so they can justify their senior developer role... "Who coded this shit! - we need to start again!" "Gosh Darnit! - this page loads like 40kb more CSS than it needs! - we need MOAR POWER and PERFORMANCE! - I suggest we spend the next 12 months eating up the entire budget of our department to shave 30kb off that and load pages 100 milliseconds quicker!" Wonderful - then marketing and SEO comes along and bloats your supercharged performance powerhouse of a website with 1MB of render blocking tracking scripts - JOB DONE! - wh000t! "Sorry developer nerds, we need to keep our SEO-Juice - you just suck it down, 'cos the CEO says so, mmm'kay?" Some time later: CEO: "Why is our website so slow!" Charismatic marketing type SEO dude that kisses CEO ass: "Yeah, that's the web devs - they suck!" CEO: "Bring me the severed head of the principal engineer!"

Very good video with valid criticism. I do like Tailwind but I don't use it, especially on big projects, because it's extremely hard to maintain it. I lost count of how many times I had to re-write a whole component because there was so many tailwind classes I had no idea what was going on. In my opnion, Styled Components solves all the issues with vanilla CSS without losing the power of CSS.

Completely agree with the conclusion. Back in the day, i researched a lot about which tech i should pick for front end dev. I came to the conclusion that all these choices are simply tools to make the same end result and i think it applies here too

Or you could just use CSS Grid with scoped classes to immediately remove one of the two major problems that Tailwind helps solve. If I had to choose between the problem of naming classes and the problem of extremely convoluted CSS that messes up my templates, I choose the former. Naming is just not that big a deal, really.

Depends on how it's used. If I can't look at a the inline class and know what's going on because it's too long I'll break it into a sass file with standard css but use @apply for useful tailwind classes like my-1 or responsive classes. Gives me all the benefits of speed and keeping things neat and orderly. This way I can have something like @apply sm:text-sm md:text-md lg:text-lg in a single class that I can throw around everywhere without having to copy paste the same thing inline and without dealing with media queries.

I once had the same idea that Tailwind is based on, before it existed, and created my own library of css classes similar to Tailwind's. But I didn't like the html being cluttered and not having the styles separate. I also like to theme things, and that also became more difficult. Since then, I learned to fully master scss/sass and think it's much more powerful , creates more legible code and is easier to maintain. I'd never go back to plain css though, at least at it's current state.

One thing it also promotes a css pattern, called functional css or atomic css. Among the other benefits you mentioned, Where specificity is no longer a large concern. Just as inline styles can look ugly and long - selectors can be even worse. This pattern has existed for a long time and can be especially useful in large code bases. Also in large code bases it can actually greatly reduce bundle size! especially for css. I have seen these patterns prevent so many bugs. And no more devs trying to add in !important, or a id selector on top of a class selector, etc... Still, there are pros and cons like you mentioned.

I tried Tailwind before learning much CSS. I felt like I was having to learn CSS to understand how to use Tailwind. I switched to plain CSS for now and got so much more done.

I think svelte's scoped styling removes a lot of the need for tailwind. If you're composing components correctly then you probably aren't worrying about long class names, or global styles

Tailwind has addressed some of the core problems brought about by all the historical cruft and technical debt in CSS. It's innovative, but I think it's not quite there yet. Hopefully it will prove to be a stepping stone towards a much neater solution.

some reason to use the typescript are the details on the js which not affordable than java right

One of the biggest things I love is how it handles things like media queries and state. Being able to write something like "flex flex-col md:flex-row" saves several lines of CSS, and tells me exactly what it does.

Completely agree. I like it because duplicating styles/components between projects is a breeze, and then refactoring to fit the new project’s design is so simple.

I love tailwind but lately I've been hooked into using sx props from ui libraries like mui and mantine etc. This allows me not only to select pseudo classes but nested classes of an element especially if it's a third party component that uses multiple elements inside it.

There is a select few utility classes that are nice to have from frameworks such as Tailwind or any other CSS framework, such as layouts, grids and font-weights. However, I find that large tailwind projects are hard to maintain, it quickly becomes a mess, it gets hard for new team members to join the project and quickly understand what happening. I'd rather spend a little extra time and create my own CSS for my need, it makes it a lot easier to work with in the long haul and ends up saving time, makes it easier for colleagues to join the project. Not only do I write my own SCSS, but most of the time I can completely reuse my SCSS structure for new project, saving me A TON of time. If you're somehow saving time with Tailwind, I suspect people don't actually know how to write good SCSS. As I said, a bit of extra one-time investment creating a good SCSS structure, components and perhaps a few of your own utility classes. But after that, it's incredibly easy.

I love how you make your videos, they always make me laugh meanwhle I learn something useful. BTW I am a part of the tailwaind cult

i really like Tailwind, but as someone that has been writing vanilla CSS for ages, I feel that if someday CSS adds the ability of breakpoints and states (like hover, focus, etc.) directly on inline-css, Tailwind will fall into the same category of Bootstrap's utility classes.

I enjoy writing pure css but it's true that it can become bloated quite easily. I often use tailwind for most styling when I need to be faster and and just add custom css here and there when doing something fancy. But from time to time pure css is the way for me, I think I learn more from doing it directly :)

I have used bootstrap most of my earlier time and its easier to use the predefined styles, components. The cons that in that time no purging feature was available + my modified and added styles easily get more than 400 + KB of size (lots of unused styles though). Nowdays started using tailwind, i barely get 30 - 40KB of final css bundle. I don't have much issues with readability cause i can create mental model reading those classes. And not switching between css and html is best thing for me.

Tailwind really was a game changer for me. The biggest thing is writing predictable classes that just work whether it’s on desktop or mobile. I’d create little bugs and have to hack around to get my vanilla css to look good on mobile and desktop. Just like any technology there is a learning curve, but it’s worth it!

I'm glad I started before all these frameworks and tools, all the choices must feel overwhelming for new developers. Our biggest problem back then was getting things to work on old IE

Personally, I see it odd to have all the single details of css styles within a class. However, when it comes to large projects, it doesn't really matter since doing so really saves a lot of time.

Started with Bootstrap as a student. To me Tailwind looks very similar but a bit more customzable, and more daunting for a begginer. However I haven't tried it in earnest yet. Once I get the hang of Bootstrap I might end up switching to Tailwind

I don't like tailwind, I keep trying to find it hard to compose I just keep going to css

My friend is really big on Tailwind. He is a lead dev for MetaMask and since he uses Tailwind his whole team has to switch to it now 😂 He's loving it.

Just started using tailwind on my react project, day one. Hated it to start with but by the end of the day I understood it a bit better, not fully sold on it yet but still early days in this project so we'll see how it goes.

This came up in my feed at the perfect time. I've been using Bootstrap for awhile because I'm lazy, but I've been looking for an alternative for small projects which Pico is perfect for. Plus it makes me think of Peco, the little mutant onion character from "Breath of Fire 3" so, bonus points there.

Right now im using Material UI with React, and it saves me tons of time, with the "sx" prop i can make some small customisations, and if i want to fully customize it i can style the components globally. It is my favorite choice for now.

The major concern with css for me is the decision fatigue, in big projects you've multiple levels of abstraction, if you wanna change the color of some font, it has to be changed in multiple css files, there's heirarchy of css patterns in big projects like root element will have these classes by default etc. In tailwind i dont need to care about that, just add the classes wherever is needed.

i started styling stuff many years ago with table layouts, yes that time when you had to style shadows with png, or even with jpg without alpha channel. 😂 so i went through many css concepts over the years (SCSS, bem etc.). i'm working in a web agency and for the frontend team and myself we found that css utility first frameworks like tailwind works the best for us. i think there is no right or wrong - there are many ways to solve problems. for us the big advantage with for example tailwind is the consistency in the styling. you have to use the same for example paddings over the whole project (ex. p-4). sure with "normal css" you can do that with css or scss variables. but the chance you use a custom padding is higher in a css/scss file. another extremly important argument for big and fast growing project is the overall css file size. with tailwind the file size remain almost the same no matter how big the project is because you always use the same classes and after purge it's extremly small. in contrast to normal css you have to create and download new css files (newcomponent.css) with potentential new css custom properties. often you have to assign special css names just for a simple layouting (aligning 2 elements horizontal with silly names comp__inner). so the css file size grows over time. the webperformance suffer. there are other advantages like specificity (even with correctly BEM), working in big frontend, teams etc. ...like i said. there are many ways and there is no right or wrong, but i found this is (at least at the moment) the best way for me. 😊

I gotta be honest, when building custom UIs with React I highly prefer Chakra UI since it is way easier to build dynamic styles. With Tailwind I always have to use template literals and looks so blowed up. In Chakra every CSS property is just a prop with a value and you even have prestyled elements like a Modal or a Card for instance that look pretty decent. And the most annoying thing is the spacing system... I mean comeon I always reduce the root fontsize to 62.5% so I have either to create one spacing value for each rem value in the tailwind config or I go with brackets... I don't know, Tailwind does not look to good to me but maybe I am just using it wrong.

I have my react components and separate scoped/modular SCSS files for that component - this approach is so much cleaner and easier than bloated jsx elements with tailwind. It's also so much easier to debug in browser and make changes.

Never fails to bring happiness as I see a fireship video.

It made more since once I realized one needs to look at Tailwind as a utility language and not just a styling option. My only gripe is implementing it into a project, with all the generated pages and directives. They need to simplify it a lot more.

Love the conclusion. I used to be very opinionated about coding styles, frameworks, etc. However I learned to simply adapt to whatever the team I'm joining in is using. I just don't join teams who use Angular, Ember, Vue Ruby, PHP, Python, Rails, Laravel, Django, Bootstrap, Foundation, Bulma, Elm, read more...

Just when I thought of making a project to learn tailwind 😭👍🏼

I would like to hear an opinion on Chakra UI, Tama GUI or similar. With them you pass utilities as props instead of class names and they can be type checked and dynamic.

I wonder your opinion on the "PicoCSS" you mentioned at the end. Because very simple things are magic, the key is whether there is flexibility in customization. I look forward to your opinion.

I have looked at tailwind multiple times over the past few years, however I feel like many of the problems it tries to solve are already solved by component frameworks like Vue or React when the styles of a component are scoped to that component only. That way you can have good class names without having to worry about breaking something somewhere else and without having the ugly html and toolibg hassels.

For me, BEM gets round the naming problem with CSS. You only have to come up with a name for the block element really. And being able to name blocks is kind of a requirement when working on a website/app anyway. Tailwind is a headache, the team I work in have decided to use it because back-end devs want to be able to make changes without doing any real CSS. A disciplined team using BEM or similar naming convention is the best approach IMO

Being proficient at tailwind means I no longer have to dread creating new stylesheets. Before I had to contemplate the amount of time it would take to write a react module, and now i can write them twice as fast

styled components solve many problems and combine the best features of Sass and JSX. I've started using it since 1 week for my first professional project and its really cool. In addition to that, People who says that I write some properties that can be replaced by classes, i tell them that the classes that they write inline css is the same. Depends on how fast you are at typing. and which vs code extensions you are using to help you.

I'm a noob programmer and one of the things that I really hated was using boostrap because somehow my mind can't understand how it works so I could never made any of the cool pretty things they advertise on their website. All I had to do with tailwind was copy and paste and it frigging worked. And I even managed to acommodate it to my project. It was the first time I actually managed to make my website look good by myself. so, I really don't care what other people think. I'm sticking with tailwind until I find something better for me

I do full stack development and I never liked writing css. All the naming, media queries etc. i just hate doing it. Learning TailwindCSS only took a few months for me and now I use it in all my projects. It makes building a website so much faster and easier for me.

With scoped CSS in modern frameworks like svelte components, the need to give class names is massively reduced. For the example you showed, I would just have my nav link selectors as "nav ul li a". Keep your modules small so there is no possible collision. It's good practice regardless of the CSS naming anyway. Regarding collocation, this is something you can do in regular CSS also. Just put 95% of your CSS in the component where your template is. In svelte it's litterally the same file already. I agree that having CSS coming from 5 different files and figuring out which parts apply to your particular element is going to waste more time than it will save. The shorter syntax of tailwind is a nice plus, but also something you can mostly solve by using a CSS preprocessor like stylus, so you don't have to type curly brackets and semicolumns anymore.

i find it that when writing an app where the design doesn't really matter much/it's a tool it's ok to use bootstrap/tailwind, but when i write something custom for a client that wants a beautiful presentation, i just start with style resets and then vanilla css

1. Read about directives in Tailwind 2. Read about arbitrary values in Tailwind 3. Love Tailwind forever from now

If we only use what we liked, then maintainability would plummet, some could argue that's the state of things already, and I wouldn't stop them. My gripe with Tailwind, is that no matter the circumstance, it's swimming against the current, because you are dragging the responsibility for design back to HTML when that's supposed to be the role of CSS. SASS makes a lot more sense in almost all circumstances, because it keeps the styling element where it should be, requires less to setup, invites the potential for style remixing, and is much easier maintain.

Man in the morning, I get a cup of coffee, hit play on one of your videos and just smile and enjoy. You are making the life of us developers a happy life, interesting, and getting us out of this hellish boredom of coding! You just make coding and news of new techs much more interesting to listen to ! Bro just to mention the " 66% fewer characters animation" omg! I cannot stop laughing .If anyone is interested to fast-forward to the spot, the time is 2:34. hahahahahahahhah Man you are honestly full of humor and I love it! I cannot stop laughing man seriously. My tears are coming out of my eyes out of laughter.

any recommend to make a layout for responsive ?

After working on a bajillion projects in my career: whatever your tech stack, just be consistent and try to write code that plays to its strengths. I don’t care what you’re using so long as you keep things sensible, we’ll-written, and organized.

Used bootstrap, CSS, SASS and Tailwind... its the ideal middle ground between SASS and Bootstrap. For me its a easy way to do custom CSS (like you would in SASS or vanilla CSS) with less mess.... just command + K to search for whatever you want... the documentations is super good!

Hye , buddy material Ui is good choice? To design webpage?

What theme you are using in VSCode?

I began using it with the expectation it was going to be like Bootstrap and Material UI. Then I realized it was a utility helper and saw its power. It's definitely not the right choice )although Daisy UI can come to the rescue) if you want prebuilt elements. But it's impressive when you are building design systems.

My main issue with Tailwind, isn't even about Tailwind itself. But I've seen a lot of newer, starting web developers going to Tailwind immediately, and I worry that this is resulting in those people having less understanding of how it works under the hood. CSS may be a bit cumbersome to write, but in learning it you come to understand many core underlying principles of how the browser's actually work and render your page. I've seen people using Tailwind who don't understand what cascading means, and are constantly redefining things that are inherited. Understanding Tailwind doesn't necessarily make you a better CSS developer, but understanding CSS will likely make you a better Tailwind developer. Understanding CSS itself also makes it easier to switch between styling libraries, people who learn exclusively Tailwind and haven't spent time understanding how CSS works may find it harder to switch to other frameworks like Pico as stated in the video, may have a harder time wrapping their head around the differences. I feel Tailwind is best used when you already know at least some CSS.

You can still use postcss and separate the classes with the @apply rule with Tailwind. You don't to need to place all the classes in the HTML directly.

I feel like all we need is a tool to quickly add some of the functionality from tailwind but for the most part just plain css with sass is better i think. Like I understand that you say we can use class names instead of needing to write 4 lines to achieve the same but we can manually put it in our css aswell to apply it to our elements instead of dealing with installing tailwind.

I still use SASS 😂. I used tailwind but while working with other frontend developer but 99.9 I work alone 👌🏼

I think tailwind is a great tool if you know how to use it and when to use it, for the problem of too much classes over an element I would suggest to extend tailwind classes into one using @apply so if a group of tailwind classes are used often and they are too many then is good to have a simple class like .app-nav with all the @apply tailwind classes required.

I've used Tailwind for a project and bailed on it. What I didn't like about it was trying to learn all of the Tailwind shortcut tags for simple things that I could just do in CSS (i.e. text-center, I mean why??). In addition, when it comes to building an app that can be branded and reformatted for layouts, having the Tailwind tags embedded into the HTML seemed very limiting. However, I have not used it enough to come to any any real conclusions but maybe there are best practices for it that I would just need to understand. I still prefer frameworks like Material UI where the components are mostly pre-built to save me tons of time trying to write the functionality but I can choose to overwrite the CSS myself, but that is a personal bias, curious on other comments.

First time using Tailwind, I was lost and didn't love it but also didn't hate it. In Laravel everything was done with bootstrap but I hate it because it's not fun anymore ;) When they added in Tailwind and I got the hang on it, I have to say, I love it. Yeah you could change stuff or so but I think that will come with everything we use.