You might find the article ‘CSS Utility Classes and “Separation of Concerns”’ from Adam Wathan interesting. He wrote this before going on to create Tailwind and in it he discusses pretty much exactly what you described at 1:35.
the dude isn't a css wizard either, he was just a backend dev who didn't like css like most of us, I find most of his arguments to be on par with the opposition and just made to almpst blindy defend the approach, he basically made the same thing as tachyons basscss etc and managed to hype it to other developers in the same situation, tailwind is just convenient to start a project with, no need to switch files, most classes are intuitive, good docs and good intellisense, the best combo for people who don't like css but still have to write some
The thing that really got me using tailwind was picking up the VSCode extension that gives you autocomplete for all the classes and a nice tooltip of their exact CSS. Made it a lot faster to learn. I really love that it makes the brain-to-outcome time super low. You just tell the div to do the thing and it does the thing. No coming up with weird class names, no keeping CSS and HTML in sync, no styled-components boilerplate, much more powerful than inline styles because you get hover: and focus: and everything else for free. And it's super easy to customize -- I added my own directives for "hocus" (aka hover+focus), "hocus-within", "hocus-visible", etc to cut down duplication, and a few custom classes (which get directive support out of the box). But not only is it easy and BLAZINGLY FAST to write, it's easy to come back to and make changes. No tracking down classes, no worries about cascading, nothing. You just look at the div, see what it's doing, and change it. I think Tailwind is the best CSS framework or paradigm that I've ever used. It only has two downsides. First, you have to learn tailwind. It's not as hard as it sounds, if you know CSS you just learn the tailwind name for things. Like I said, the VSCode extension makes this 1000x easier. Second, your code can get a little W I D E. It's really not that big of a deal, though. Especially compared to how easy it makes your life. It's not like it's even hard to read or anything, people just care too much about code aesthetics lol.
I am not sure if it is the same extension (probably) but I have my VScode also configured so that class names automatically get hidden inside "..." until you edit the classname. Makes the HTML look as neat as the original HTML+CSS but with the capabilities and clarity of tailwind.
@@sdtok527 I feel like that just allows you to hide antipatterns. For me, just keep the logic and the UI separate! When you're looking at the UI component, you probably want to see the classes anyway.
@@githoweb actually it makes no technical choices based on an editor extension (how could it? the extension was developed _after_ tailwind xD). also readability and maintainability are, like, the two things tailwind drastically improves?? um, so all i said was that the extension helped me _learn_ tailwind (just like the Rust extension helped me _learn_ the standard library). it is not required, simply useful for those starting out. so, yes, it would be valid to criticize tailwind for requiring you to learn a new set of CSS primitives. but the other things you actually said are silly.
a vscode extension inline fold does a great job hiding the classname (in react "i guess it should work for all html file") unless the cursor is not in that specific className="..." so when you look at the file it looks clean
@@knoraziel well you can create a class and there add apply tailwind class i dont see any reason to use this as its same as css then whats the point tailwind is pure css which ruin the html
Come back 3 years later to that site. Inspect element on the thing, change the CSS that pops-up. Looks good? Right-click, copy rule, paste it onto wherever that thing is, move on with your life.
1:28 when I started actually learning how to use css effectively (started with bootstrap) I basically ended up with the same thing: a bunch of utility classes and the odd class for a specific component like a jumbotron, for example
I don't think you need to know tailwind. You definitely need to know pure CSS and ask the docs for the equivalent. It worked perfectly for me, I was up to speed in 2 days
@@imagineiffcomyup. The tailwind crowd just never took the time to learn css. Css has come a long way in the last 5ish years and is super simple and robust now.
@@hamm8934 tailwind is basically inline css, but you can use pseudo element and media query. Also, if you still write abstracted classes, which is against tailwind's philosophy, it still works great. Imagine if you have a crazily complicated button used everywhere, you define class .btn in @layer components. And for some reason, you need a green button as opposed to the blue button one day. If you're writing the old css, even if you have .bg-green. Because most likely btn and bg-green doesn't necessarily have higher priority over each other, it just depends on how you wrote the css months ago. Then you probably need to add a .btn.btn-green to make the selector more specific. But if you follow the new layers architecture, which is adopted by tailwind, you know a utility class will always have higher priority.
the great thing about tailwind is how much needless complexity it takes out of css, we used to create these intricate semantics for classnames just to use 50% of the properties repeated in 20 other places
I would argue that this is the awful thing about tailwind. You are polluting all your markup with shorthand versions of the CSS properties. It takes me back to the days of the "style" attribute, before we had CSS. I get it for rapid prototyping but for large applications, I'm just not convinced.
@@zebraforceone that's a fundamental misunderstanding of my point because what you call polluting is just taking away a layer of semantic abstraction. When you're dealing with contained reusable components you have no need to create an arbitrary layer of semantics for the css, all you're doing is offloading work from the parsing of the html to the parsing of the css for example, why do i need a .tabs css component structure when i have a tabs component that already comes with functionality
@@NathanHedglin I haven't used Tailwind much, but I really don't get the argument that "tailwind is inline styles all over again" when it's nothing like that. Yes your HTML gets more markup, but it's nothing like writing inline styles.
After 11 months ^^ this point. Specially in vue files where it is supported as part of the component file tailwind doesnt make any sense. Specially with something like scss.
If you know css well, there's almost no learning curve to tailwind though. Maybe once in a while you may come across some properties that you can't guess your way through, but that happens very rarely
Yeah, scss is very nice, but, come back to that project after one year because the client wants to "update" the design. You're going to kick yourself in the nuts xD. Also, team-work. It forces teams to continuously read, understand and try to remember your css classes instead of just implementing the design.
@@LucyPLM All of those things are still true for tailwind, it's not magic. Expecting team members to mentally visualize the effect of lots of utility classes is worse than having to look up a class or just inspect in the browser.
@@LucyPLM I've never really had that problem as I avoided using utility classes and instead just used a stylesheet per component that automatically applies a hash to the classname to avoid clashes. For common re-usable stuff that usually just lives in CSS variables. So no problem with maintenance. I definitely see the benefits of tailwind and am in no way saying one way is better I just prefer this way.
@@LucyPLM 😅 no need to kick anybody in the nuts ! You know you can make your design system in scss too ? And reuse it in each project too ? Because like Tailwind system, you can configure what you want to match the Designer's demands. More : you can decide what to configure. :) I think we can find a better system for all in the middle of Tailwind (CSS Purge, design system), Bootstrap (Components), and SCSS (semantic css and markup, configurability and design system) : the best of each worlds. 🙂
I kind of understand why people use the tailwind, but I on the other side. I use Angular framework and it always creates components with a css file. So if you decouple your components that are not much big, it's fine to just write css and the files turns out not so big. Plus, when you using saas or less, you can make mixins and easily inherit some styles.
But that still means you have to come up with names for things you are styling, avoid name clashing if there is no style scoping, you are mostly repeating same styling all over the place (flex, color: xyz etc.) and in the end people have trouble writing CSS that's maintainable so most projects end with CSS that's spaghetti even if it is split into per component styles. Also, with this approach each project is unique, while Tailwind offers you a "framework" of styles. Onboarding new people into a Tailwind project is easier compared to a fully custom CSS from scratch project. Don't get me wrong, I still use vanilla CSS and SASS extensively because of some of the capabilities it has (nesting primarily) and I still don't use Tailwind a lot. I did experiment with Tailwind a bit, it's crazy powerful for component based applications. If you are building a simple website, just go for vanilla CSS and that's it.
@@rand0mtv660 I agree with you that is sometimes hard to come up with names and of course if I come to a project with Tailwind I won't argue with people and accept it. Probably this is the only case for me to fully dive into Tailwind and I can't refuse that my opinion will be the same.
@@artur1998g I mean the best thing for you is to try Tailwind and form your own opinions and conclusions. Don't listen to everyone else, just try it for yourself and see if you like it or not. You are not forced to like it, but at least if you like it or don't like it you'll have arguments from your own experience and not just from reading some blog post.
@@rand0mtv660 there's a big difference between a design system and utilities. Coming up with names while hard is a good thing, encouraging mental laziness and project disorganization because of that is not a good reason to use X. Repeating the same styling is an organizational issue, tailwind is built on repeating itself. tailwind doesn't not enforce maintainability. Onboarding to tailwind still insists that people must know the projects systems same as if it had streamlined custom CSS. Every argument for tailwind is an argument against it.
My rule of thumb is to use scoped styles all the time and as you know all best modern framework can work with styles in one file with script and html, else use tailwind.
If it changes the way you structure your code or architecture, it's a framework (React). If you can just drop it into what you were already doing, it's a library (leftpad, isArray, is-positive-integer).
I think this Def needs to be finessed a little. For example, a state management package for a framework (or the deluded library in Reacts case) dictates the structure of your code, but I would get scornful looks if I called redux or pinia a framework.
@@JeyPeyyDepends of the jQuery plugins you use, but if you are doing a website with jQuery it does not change the way you do things like React. When you are using React everything must be React way
@@yegorzakharov8514 I would call Redux a library for React. But I'm only putting 5 seconds of thought behind these assertions. Stating the broad principle another way: if swapping the thing out for a competitor is easy, it's probably a library. If doing so requires a codebase rewrite and Senior Architect's approval, it's probably a framework.
Many folk also forget that tailwind is css - ie. it is still cascading - no need to apply classes on children that have a parent element - if you can define them on the parent, ie like text size, color. Things like space-x/y on the parent etc get you a long way with spacings too for example.
It seems that Tailwind is that "make your own classes that do things", but with a convention that we all agree and we use in all the projects, so that yes, you have to learn that this mean that, but this will always mean that (except in JS), instead of meaning different things depending on who implemented it. You can see it right away, even if it is not as nice looking.
Tailwind is obviously one of those techs which you will hate when you see first, but as you gradually get used to, you will start appreciating how simple is it to use for getting shit done. I used to hate it (just thought it is a worse version of bootstrap), but I can't live with without it these days. Guys/Girls, first try it out before assuming.
I mean some people give their opinion while knowing what it is, if you thought it was bootsrap then you didn't look at it at all, It's also simple to get shit done with vanilla css or styled jsx like solutions, I appreciate tailwind but I see how it could become problematic in certain situations like when needing to restyle a project, as always you trade things for immediate convenience
@@heroe1486 yaya for sure. That is totally fine, and is a conscious decision. Not every project needs tailwind. Heck, you could even use a component library that uses tailwind underneath. But I hate when people don't even try out libraries and call them bad.
I started my life only using python and trying to analize data without any expertise, then first created a Django project to web, and only used bootstrap too, now I started in react/node (next.js), and can't live without tailwind, and by this time my company software is a little bit big, and understandable.
I've fought against tailwind for months, hating it because of how ugly it makes my HTML.. but then I begrudgingly used it on a larger fullstack project and brother, tailwind was a godsend. I have a love/hate relationship with it now because I really don't want to use it but I acknowledge how significantly easier it is to use at the same time. & I'm just a solo dev at the moment, I can only imagine how useful it is in a team.
I hate inline css, so my first look at tailwind left me skeptical. I really had to try it for myself, and once I did I thought it was the coolest thing ever.
@@zebraforceone Probably using it on a greenfield project and not having to deal with gargantuan strings of text copy-pasta'd across multiple components
I don't understand why people keep wanting to do one thing only. It's like either use utility classes or don't, but how about using both? I generally write my css with utility classes for all the small stuff like color, font-size, spacing, ... But when it comes to more complex things like media queries or grid templates I write them in separate scss files This keeps my html code clean and also avoids repetition in the scss
Why make your own randomly named utility classes again and again for every project when you can just use tailwind where there's a standardized way to do that? On top of that it's super annoying to have a mix of ways to do something in one project. Its super helpful to be able to see the css attached to the markup instead of having to jump between a css file and markup. Html looking "clean" is super overrated, tailwind boosted my productivity massively abd refactoring is miles easier than trying to understand someone's 1000 line css file.
Yeah you're right, especially when it has a compile step and thus comes at no cost, same for mixing tailwind with a component library. For complex media queries or things that requires too much logic anyway using tailwind is just complicated things and conflict with the initial goal of using tailwind
this is also what i do, i use tailwind for defining layout like flex, flex directions, alignment, padding, margin, and then use css for theming, animations, media queries, transitions etc
@@stugeh For the part about making the utility classes, I'm working on a Figma plugin that generates most of them for me based on the design (This is cool in a team since it allows developers and designers to have a clear way of communicating design changes) For jumping between files, I've configured my Nvim in a way that makes it basically painless. Most of the time all I have to do is type the first word of the custom class name and hit enter to go where I want to go And as for HTML looking clean, It's just preferences I guess You also mention long css files, but since I only use css files for things like hover effects and such, they very very rarely go above 50 lines There is an interesting css philosophy that inspired me when creating my way of working called "cubeCSS" Also, if I'm not mistaken tailwind doesn't support things like `min()` `max()` and `clamp()` and I rely on those really heavily to make my responsive design feel as seamless as possible
I totally agree with this. People seems to forget that tailwind is only a thin layer of abstraction over css with additional features. We still have to work out our way to build up a design system and tokens to organize our code
i can foresee that you won't like hmtx eventually, because you realize u would need to duplicate the tailwind classes in partial responses and full page responses. since they are duplicated, they can diverge. same is true of the markup itself, but that's smaller and less likely to change, than the styling. I'm looking into how can I solve this problem in Clojure with Enlive or maybe Specter over XML trees.
> u would need to duplicate the tailwind classes in partial responses and full page responses Why wouldn't you build your full page responses from those partials? Most backend templating engines let you create a full page from multiple smaller components.
8:36 just inspect element? This is the same thing as extracting html into components or partials, but for styling. If its fine to extract html into partials or components (or whatever terminology you use) then it’s fine to do the same with styling. If you don’t, then how do you know you are applying consistent styling and not missing something and unknowingly creating small visual inconsistencies? Then later on, some developer has to decide whether the omission was purposeful or not.
CSS would be more bearable with better tooling, but because it's cascading and global, there's no way for my tools to know where a style is defined. If it was locally scoped to components in a way that my LSP could jump to it, it wouldn't be as bad
And if we could make selectors/rules of other selectors/rules. custom properties help somewhat but we should be able to prototype with the noise tools like tailwind then roll it up into a names for design systems using just CSS.
I was skeptical of tailwind but it's extremely easy to use and fast. One may worry about having to remember a lot of utility classes, but truth is that after 1 day you will already remember what matters (but you do need the vscode extension). And in any case using the docs is superfast. Setup takes a few seconds. Code uglyness is not noticeable. It actually made me want to make more stuff because I don't have to worry about the graphics anymore (and I knew css decently). I'm never gonna go back.
As I understand it: A library is just code you import. A framework includes other stuff like media and executables. Because Tailwind runs a preprocessor which generates and transforms code, that makes it a framework. Or something like that?
I think the point was even if you know CSS you have to jump around to look up the style rules to get context. Assuming your as fluent in tailwind as you are in CSS, you avoid having to jump around files to figure out what’s going on.
At that point, Tailwind just becomes another layer of abstraction on top of inline CSS, which is the real solution to less jumping around files in a project.
@@aquapenduluminline css is a little more verbose than css classes most of the times, and with things like react, your “inline” styles are an object that ends up adding tons of lines of code
Why is the talking point ever repeated it's weird. You still end up doing that with tailwind because containing elements are also a tailwind soup. When in devtools the affecting CSS is right there, the idea that if your in a component everyone can visualize EXACTLY what it visually looks like only because of tailwind is ridiculous. This idea of locality of purpose being used to justify tailwind ignores the word cascade in CSS.
@@TheNewton Tailwind cascades perfectly fine. And if you're fluent enough in Tailwind then reading the classes is about as fast as reading a paragraph in a novel (near instant). And also like reading, you can visualize it. You can't gain fluency in a day, so the first 6 weeks or so are of course painful.
@@Leon-bb8fc it can be vague, but it's about breaking things down to simplest parts basically like utility-classes, design-tokens, etc. It can be as simple as `.button-color, .bc { color: red; }` or `.bcr { color:red;}` To some it may mean the aggregate classes you've composed together that represent a part of a design and whether you process that into a single class or just refer to it by the component name as an "atomic" part i.e: button type="button" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900" .
@@TheNewton To put this in my own word, it's about grouping specific elements with the same styles and re-use them wherever fit, does that sound correct? e.g. .base-button { font-size: 1rem; font-weight: 400; } .red-button { color: red; } .blue-button { color: blue; } Page A: This should be red Page B: This now should be blue, but same base styles
In the purest since, a framework is a library that you register callbacks to your code, then call a function in it that takes over everything (like an event loop). If a library doesn't do that, then it's just a library, and not a framework. However, in 2001, Mac OS X made .framework directoeies that were basically .dylib files wrapped in metadata and resources. That's a large source of confusion, but if you're writing event handlers for a library, then it's probably a framework. The nomenclature is just a convention, though, since they're all libraries.
Well, Tailwind actually is understandable without knowing Tailwind, because the classes are usually 1:1 mappings of CSS rule names... Which is also why I think it's kinda silly. It's pleasant to use for most cases, and the configuration framework it's built on is amazing. I did not have a good time building web components with Tailwind though. And, overall I think it would be much better to have a SCSS framework instead built on-top of Tailwind's core principles. That allows the compiler to exclude stuff that's not in use, and gives the developer more control. Especially when creating component frameworks and re-usable styles for use in multiple services. But for a single website or web app it's great!
"are usually 1:1 mappings" and if not just go through 30,000 utility classes and if you can't find it well it must exist so wasiting time looking assuming your understanding is based instead of just writing organized CSS and thus improving fundamental skills, ez.
@@TheNewton Clearly you never worked in big projects, or in at least a long lived project where development is never stopped even after release. After some time and a couple of devs along the line, organized CSS is not a thing. Realistically speaking.
"Framework" "library" quite sure it's neither? It's a generator like the templ cmdl tool. It even has the same --watch argument to keep it running. (love using the two together btw)
Bootstrap was table based design rehashed. Tailwind is inline styles again (they even add to reinvent the Cascading from Cascading Style Sheet with the group system). So, 5 or 10 years from now we'll get a "semantic" craze again. Maybe based around domain defined components. And we'll get Semantic Web Garden to succeed CSS Zen Garden.
Semantis is a great example of why tailwind is bad, things like the article,section and ul elements alone are enough to target with CSS without having to foist inline styles on them and all their children. Tailwind encourages some ugly unusable sites when the css is missing.
A lot of tailwind's class names actually have a good pattern where you dont have to memorize the whole language to use well if you already know CSS. Albeit I have experience with CSS since before CSS3 so I'm a bit biased since at some point CSS began to click for me
The part of memorizing something u need to use daily. One would think that after looking something up 2-3 times, you would have memorized it by then just after seeing it thrice
Here is why I use Vanilla JavaScript: It's because I spent time learning the language. This means, it's not _optiional_ to sue jQuery (is anyone using that anymore?). It might not be optional to use TypeScript however... But yeah that's next on the list I guess.
I mean, if people are going to argue that the clutter can be ignored by having a plugin that hides the `class="..."`, then I argue: I'm pretty sure most IDEs let you open multiple panels at the same time Personal workflow is to use it (unocss more often) for unique details like margins and whatever in specific places (the one special button in a menu of same buttons or whatever), but still preferring defining 'component' styling in semantic css classes instead of in the component itself. As opposed to what some people have said, it seems to make more sense having a central file as the source of information about your 'theme', and have it be css, not js. So my usual component will look like `` and that one specific element will be ``
Tailwind has extensions that WILL make your life even easier, autocomplete for classes, hide/show classes if they are getting in the way with a keybind, sort classes on save so you know where to look for certain classes when trying to make a change, it allows you or others to immediatelly understand what is happening just by looking at the code, it allows teams to make changes without making random half-assed named classes and appending to a long ass cluttered css file (propably duplicating 2-3 or more other classes that are already there), it is even better when you use it on reusable classes/components and did i mention ZERO (0) unused css? And no it is not like inline css, try using media queries or :hover effects with inlince css YA CAN'T
The solution to less jumping around to understand a piece of markup code isn't Tailwind. The solution to that is inline CSS - even less jumping around than Tailwind.
But then you miss out on one of the bigger benefits Tailwind brings, standardization through good enough defaults with the ability to fine tune it down the line when it really matters. It's a lot easier to prototype something where your boxes all have the "shadow" class, compared to using "box-shadow: 4px 4px 0 #efefef" everywhere and then later trying to find all those variations of it because it needs tweaking.
@@Ab4kus It may help in rapid prototyping when you need to get a certain "look" out of the door ASAP, but for fine-tuning and long-term maintenance, they're gonna be replaced with inlines. Ain't no way I'm asking my successor to take over a frontend full of Tailwind.
@@Ab4kus Tailwind is the real worst option. You still have to jump around source files to see what's going on behind layers of indirection and still end up with verbose markup.
@@aquapendulum everything you said before "verbose markup" is incorrect, there are no layers, in fact, that's why you end up with the "verbose markup" so you're contradicting yourself. And the "verbose markup" part itself is what Tailwind admits to in its documentation, and is what most developers accept as an acceptable trade-off for the benefits it brings.
Tailwind is a meta css framework if you compare it with bootstrap, bootstrap has fixed classes mostly focused on components, with too few utilities, Tailwind instead can generate a css framework (like bootstrap) from your particular design tokens to generate utilities, but also it is pluggable, so you can for example add components by installing a plugin like daisyui, so as a basis tailwind is focus on generating utilities, but the rest can be added through plugins which you have a pretty awesome collection available like typography for example... Also you can avoid repetition by creating your on classes with @apply directive
I honestly prefer rolling my own: frameworks break more easily or can go out of favor and everyone use something else anyways.... at lest homegrewn solutions tend to be more minimal and I have more direct access to codes. So with this i disagree. However I agree with locality: the two is not in conflict!
Tailwind is awesome, as much as I hate vanilla CSS, tailwind made it tolerable for me to do front-end. Every bit of information about your design is in one place. You don't confuse yourself coming back from file to file or using the find function in vscode.
@prime, curious your thoughts on the new panda-css from chakra folks. I'm a huge fan of tw myself, but have a positive first impression of panda-css and going to give it a try. I think I saw a video where you were $hiting on using styled, emotion, etc,. and panda sort of feels like that, but is more like typed version of tw. styles don't roll of fingers like tw (once becomes second nature) because not a simple (endless) string, but the type safety appeals to me, esp. what passing a style as prop (not the tailwind way, but there are cases), and there are several nice features that not going to go into here, but that address some tw pain points for me (and open up some new capabilities).
People who like Tailwind just don't like CSS if you look really deep into it. You could do (almost) everything with inline styles, so why do they not do it? Tailwind has syntax for inline conditional styles and predefined patterns
there is a video of an asian woman comparing web design in the east (CJK or China/Japan/Korea) vs Western web design because web pages in CJK are packed with information and you can scroll for hours and they are organized and lots of details and information and colors, while western pages are focused on a single topic/object and a lot more dark colors and she explains that it has to do with the art, and east-asian culture in general, Asians have grown in cities and a culture that has too many information everywhere and they want and expect too many information and in their sites they reflect that, customers want all the information to buy stuff. So Asians are happy with tail-wind and to us tail-wind looks awful.
but I am not asian and I like tailwind. because I hate DRY robot-persons that forced me to write a style for a component used only in one place in the whole app
@@josephgay-cj2fcjust search for "japan internet weird design", it should be one of the top 2 videos I haven't watched either one, but got recommended to me several times lol
I see a lot of comments about using frameworks supporting scoped styles and else tailwind. What about Tailwind combined with Frameworks supporting scoped styles?
As someone that was skeptical about Tailwind, it's pretty nice to use. However, I personally prefer to use it in combination with CSS files when more structure is beneficial. When there is a grid layout that changes between different resolutions, there's no way I'm doing that in tailwind, forget it. Alternatively, if there is a hover effect where when the parent is hovered, 2-5 other elements are animated and you need to only run it on certain resolutions. Yes, you can do it with Tailwind, but it becomes harder to understand what the f is happening in the Tailwind util classes. Side note: The largest benefit for me, is the css size and not the syntax.
On learning a language and not being a look up monkey. The trick is to guess at what you think the code should be. Trying and then seeing if we were right or wrong is how we learn. You don't learn to touch type in the shortest time by staring at the keyboard. You learn to touch type the fastest by guessing which key is the one you need and then press that guess. Look at the screen and see what comes up. Same with coding. Start guessing and you'll start to know how to code and not how to look it up. It's like chatGPT, it made billions of billions of bad guesses and eventually discovered a way to make better guesses.
The best solution to the problem Tailwind solves is Suzy Grids. It's like tailwind but as SASS mixins, layout has no business in an HTML file, therefore layout classes don't belong there either. They belong in the CSS layer.
I wanted to hate tailwind so bad, but I went full crack addict on it. I would drown my closest friends if it meant I would only ever need to write tailwind. The lsp is ridiculously good also.
Yeah I think most people that shit on Tailwind haven't actually tried it at all and have just seen long class strings in HTML and decided it's bad. My only worry trying Tailwind was that I wasn't going to be able to customize it and that it would limit me a lot, but seeing how I can configure every property such as color or spacing or add whatever I want and that it appears in autocomplete with :hover and whatever modifiers already in VSCode when working with it was a gamechanger for me. I still have to use it extensively to see its downsides, but I'm kicking myself for not trying it earlier.
@@rand0mtv660 i tried tailwind and now i can't go back! all my personal projects are in tailwind. i'll only use sass if my work really needs it(a legacy project)
@@nivethan_me " lsp is ridiculously good also." "also their class sorting prettier plugin" It's like everyones CSS tooling is bad so they have to lean on yet another abstraction.
"you must know all of Tailwind" is only partially true. Yes, it is true that you must know it, but if you have experience in CSS, then (most of..) the class names are very intuitive. Either you have to learn CSS and live with the context switch, or you have to learn CSS, intuit most of Tailwind Classes and look up the few that confuses and live in harmony
Tailwind has a vscode prettier/plugin that reorders the classes in the html to their recommended order. makes it easier to read those blocks of class names
@@TheNewton if you use tailwind all the way down that is minimized, especially if used within components, when you go back to look at the component later you can gather fairly well what is going on
In my case, I undertand css from tailwind, been using bootstrap for years before but never look deep into css. Sadly my company don't want to use it because other developers prefer bootstrap.
I was so on the fence about using it but with so many people using it I have it a chance. I would never go back I strictly used only css and I had tried bootstrap and hated it but tailwind makes copy and pasting someone’s code amazing. I’m not a UI artist so using some else code is amazing. I tweak what I need and I know if I ever need to change something I easily can. The portability factor is the best part. If you ever tried copying some solution to a UI problem from stack overflow or codepen and tried to make It work with your css you’ll know what I mean
Yeah you're right, kind of the same for me, it enables easy copy paste of "components" without bringing libraries or importing hard to understand and modify giant css files. But it doesn't mean we can't use other solutions for our own code, tailwind comes at no cost so you can mix it with vanilla css, styled jsx scoped styles, UI component libraries etc
7:38 breakpoint classes are frustrating… does the css apply or not apply when above or below that breakpoint.. so many permutations of possibilities of what will apply when.
We wouldn’t need tailwind if html allowed attributes like style:hover=“…” style::before=“…” etc. or supported some syntax to allow inlining of all or most of the special css pseudo classes and elements, selectors, combinators, etc.
3:22 I disagree that you need to know tailwind before you use tailwind, you only need to know CSS, and you can use tailwind almost immediately, just look to documentation from time to time for the names and that's it
"just look to documentation from time to time for the names and that's it" The second sentence disproves the first sentence. Every argument for tailwind is an argument against it.
The “you have must tailwind” thing is so weird for me. At lest in vscode theres a plugin that gives you intellisense for classes and what they represent I assume a nvim plugin that does the same is very straightforward
That's one of the ways you know it's bunk proponents present features like magic ignoring their real problems are with bad css tooling and project organization.
You really hardly need to know tailwind at all to use tailwind. If you know css, you can guess at it and intellisense is there to provide the feedback you need. You learn most of it in a day just by using it. Some things aren't this way (I'm looking at you "leading"... print designer term instead of css term... umm, not the best decision there), but most of it is. And if you're defining/extending your theme to fit a good designer's well-crafted figma design, then you're really golden.
The thing I have against Tailwind CSS is that it renders the markup unreadable. It has its purpose in component based frameworks, but using Tailwind without such framework is pure overkill.
Which version of hell do you want 😂 Tom’s version isn’t documented so I know which I’m forced to choose. There’s only vanilla extract, css modules, and pandas js. All have their downside and it’s a choice of the least ugly. At least the tw docs are pleasant and that’s good enough for me.
This guy missed all the points I made when I tried it: 1) The main problem with CSS is regression. By enforcing markup "pulling" styles instead of styles being pushed, you avoid unintended and undetected side effects in other parts of the UI. 2) CSS as a language resists structure. By not having stylesheets, you can't fail to structure them. 3) By constraining the available design space, you can't go down a rabbit hole trying out different pixel values of a button margin for two hours. 4) The proliferation of component-based libraries nullifies the main drawback of Tailwind, which is re-use.
I disagree on you saying "you have to know it". If you know CSS, you know most of Tailwind. For 90% of cases, just take what you would normally write and reduce it down to one -two words. display: flex -> flex position: absolute -> absolute padding-right: 1rem -> pr-4 justify-content: center -> justify-center background-color: black -> bg-black
Same, I disagree with the "you have to know Tailwind". What you have to know is CSS, the way someone uses Tailwind is by thinking about CSS. And, bonus feature, by using Tailwind, at least in my experience, you get better at CSS.
After the launch of React Server Components it definitely is a framework. And it makes a lot of checks in html attributes in development. Before hooks React was probably a library, but after it is not anymore. When you use hooks everything must be adapted to hooks way
And anyway according to the react team "you should use a (meta)framework if you want to build apps with React", which made me ditch react and nextjs after years since the latter is now a brand new (unstable although labeled stable) framework
Here it comes: yes, I agree that learn your sh** is important but if for reasons you are forced to juggle 5 different languages and you never know hoe long before you get re-orged... well learning the language becomes a luxury
I really don't get tailwind, I haven't done enough frontend to suffer from the issues it tries to solve but I can't understand how having a million utility classes is better than having ur css styles in the same file as the component in raw css form
Give that code to somebody else and ask him to change the design. Or, the other way around, ask a friend to make an website, or get some website from a friend that did his own things in css, and then change the design based on his requests. After that, do something with tailwind, a complete website. And you will see the whole difference and why anybody that went from CSS to ui libraries to bootstrap loves tailwind.
it's for people that assume 1 library can fix CSS tooling or don't want to bother with well formed custom organization of CSS, such as in prototyping or teams without frontend devs. If you don't struggle to name and organize what some part of the UI is, probably avoid tailwind.
I would love to see an article about Tailwind _not_ praising it. I like Tailwind, but surely _someone_ who has tried it must've disliked it, or is it literally that the Venn diagram of those who dislikes it and those who haven't tried it are 1:1? I'd almost believe it.
I've never heard anything as cursed as "We need CSS on the backend."
We need CSS as a database
CSS as database query language.
.users[id = 2] .customers[id = 5]
We need CSS as code compiler
You could make sql in the front-end, so why not css for database
Turns out CSS is faster than SQL.
“We need CSS in the backend”
Aww hell nah💀
CSS for config files and CRUD interfaces instead of direct db calls.
You might find the article ‘CSS Utility Classes and “Separation of Concerns”’ from Adam Wathan interesting. He wrote this before going on to create Tailwind and in it he discusses pretty much exactly what you described at 1:35.
the dude isn't a css wizard either, he was just a backend dev who didn't like css like most of us, I find most of his arguments to be on par with the opposition and just made to almpst blindy defend the approach, he basically made the same thing as tachyons basscss etc and managed to hype it to other developers in the same situation, tailwind is just convenient to start a project with, no need to switch files, most classes are intuitive, good docs and good intellisense, the best combo for people who don't like css but still have to write some
@@heroe1486who actually likes CSS?
The thing that really got me using tailwind was picking up the VSCode extension that gives you autocomplete for all the classes and a nice tooltip of their exact CSS. Made it a lot faster to learn. I really love that it makes the brain-to-outcome time super low. You just tell the div to do the thing and it does the thing. No coming up with weird class names, no keeping CSS and HTML in sync, no styled-components boilerplate, much more powerful than inline styles because you get hover: and focus: and everything else for free. And it's super easy to customize -- I added my own directives for "hocus" (aka hover+focus), "hocus-within", "hocus-visible", etc to cut down duplication, and a few custom classes (which get directive support out of the box).
But not only is it easy and BLAZINGLY FAST to write, it's easy to come back to and make changes. No tracking down classes, no worries about cascading, nothing. You just look at the div, see what it's doing, and change it. I think Tailwind is the best CSS framework or paradigm that I've ever used. It only has two downsides. First, you have to learn tailwind. It's not as hard as it sounds, if you know CSS you just learn the tailwind name for things. Like I said, the VSCode extension makes this 1000x easier. Second, your code can get a little W I D E. It's really not that big of a deal, though. Especially compared to how easy it makes your life. It's not like it's even hard to read or anything, people just care too much about code aesthetics lol.
I am not sure if it is the same extension (probably) but I have my VScode also configured so that class names automatically get hidden inside "..." until you edit the classname. Makes the HTML look as neat as the original HTML+CSS but with the capabilities and clarity of tailwind.
@@sdtok527 I feel like that just allows you to hide antipatterns. For me, just keep the logic and the UI separate! When you're looking at the UI component, you probably want to see the classes anyway.
the extension is called "inline fold" and it's amazing@@sdtok527
It makes a technical choice depending on an editor's extension, as a workaround to an annoying flaw (readability and maintenability)... 😕
@@githoweb actually it makes no technical choices based on an editor extension (how could it? the extension was developed _after_ tailwind xD). also readability and maintainability are, like, the two things tailwind drastically improves??
um, so all i said was that the extension helped me _learn_ tailwind (just like the Rust extension helped me _learn_ the standard library). it is not required, simply useful for those starting out.
so, yes, it would be valid to criticize tailwind for requiring you to learn a new set of CSS primitives. but the other things you actually said are silly.
a vscode extension inline fold does a great job hiding the classname (in react "i guess it should work for all html file") unless the cursor is not in that specific className="..." so when you look at the file it looks clean
Tailwind sucks so bad that they have to come with an extension to hide all those classes in the markup 🤗
@@knoraziel well you can create a class and there add apply tailwind class i dont see any reason to use this as its same as css then whats the point tailwind is pure css which ruin the html
@@ulrich-tonmoy Tailwind's apply Considered Harmful.
@@Amaraticando why
@@ulrich-tonmoy there's a disclaimer on the docs. And the creators regret creating this feature.
But didn't we stop using and in favor of css because separating style from markup was good? Now it's bad?
I have always iterated css in the browser, and when I get what I want I copy it to my code.
"We need css in the backend"
@keyframes for the terminal 🎉
Come back 3 years later to that site. Inspect element on the thing, change the CSS that pops-up. Looks good? Right-click, copy rule, paste it onto wherever that thing is, move on with your life.
This, I can't agree more brother
1:28 when I started actually learning how to use css effectively (started with bootstrap) I basically ended up with the same thing: a bunch of utility classes and the odd class for a specific component like a jumbotron, for example
I don't think you need to know tailwind. You definitely need to know pure CSS and ask the docs for the equivalent. It worked perfectly for me, I was up to speed in 2 days
@@imagineiffcom Do it - you'll be amazed at how simple it really is.
@@imagineiffcomyup. The tailwind crowd just never took the time to learn css. Css has come a long way in the last 5ish years and is super simple and robust now.
@@hamm8934 tailwind is basically inline css, but you can use pseudo element and media query.
Also, if you still write abstracted classes, which is against tailwind's philosophy, it still works great.
Imagine if you have a crazily complicated button used everywhere, you define class .btn in @layer components.
And for some reason, you need a green button as opposed to the blue button one day.
If you're writing the old css, even if you have .bg-green. Because most likely btn and bg-green doesn't necessarily have higher priority over each other, it just depends on how you wrote the css months ago. Then you probably need to add a .btn.btn-green to make the selector more specific.
But if you follow the new layers architecture, which is adopted by tailwind, you know a utility class will always have higher priority.
same, but I was used to using bootstrap utilities so it was REALLY quick to pick up
@@li_tsz_fungwell if that's ur issue behind not using CSS, it simply means u r a noob.
the great thing about tailwind is how much needless complexity it takes out of css, we used to create these intricate semantics for classnames just to use 50% of the properties repeated in 20 other places
I would argue that this is the awful thing about tailwind. You are polluting all your markup with shorthand versions of the CSS properties. It takes me back to the days of the "style" attribute, before we had CSS.
I get it for rapid prototyping but for large applications, I'm just not convinced.
@@zebraforceone that's a fundamental misunderstanding of my point because what you call polluting is just taking away a layer of semantic abstraction.
When you're dealing with contained reusable components you have no need to create an arbitrary layer of semantics for the css, all you're doing is offloading work from the parsing of the html to the parsing of the css
for example, why do i need a .tabs css component structure when i have a tabs component that already comes with functionality
@@zebraforceoneutilities classes aren't anything like inline CSS.
@@zebraforceoneim in the opposite camp, i dont see any way that is easier to scale without tailwind
@@NathanHedglin I haven't used Tailwind much, but I really don't get the argument that "tailwind is inline styles all over again" when it's nothing like that. Yes your HTML gets more markup, but it's nothing like writing inline styles.
We're just gonna pretend scoped css doesn't exist tho?
After 11 months ^^ this point. Specially in vue files where it is supported as part of the component file tailwind doesnt make any sense. Specially with something like scss.
@@ShaffafAhmed
Neither scoped css not scss replaces what tailwind does, I'm not sure what are you talking about.
If you know css well, there's almost no learning curve to tailwind though. Maybe once in a while you may come across some properties that you can't guess your way through, but that happens very rarely
Some still encapsulate multiple classes or have unintuitive names like for hidden and invisible
You just need to know what each class does and youre set
@@cmelgarejo yeah either know the pattern or have to memorize or search through 37,080 utility classes, what and endrun this system does on people.
Tailwind is good, but I still prefer scoped scss, built in design system is a huge plus but I just like the more native syntax of scss
Yeah, scss is very nice, but, come back to that project after one year because the client wants to "update" the design. You're going to kick yourself in the nuts xD.
Also, team-work. It forces teams to continuously read, understand and try to remember your css classes instead of just implementing the design.
@@LucyPLM All of those things are still true for tailwind, it's not magic. Expecting team members to mentally visualize the effect of lots of utility classes is worse than having to look up a class or just inspect in the browser.
@@LucyPLM I've never really had that problem as I avoided using utility classes and instead just used a stylesheet per component that automatically applies a hash to the classname to avoid clashes. For common re-usable stuff that usually just lives in CSS variables. So no problem with maintenance.
I definitely see the benefits of tailwind and am in no way saying one way is better I just prefer this way.
@@LucyPLM 😅 no need to kick anybody in the nuts ! You know you can make your design system in scss too ? And reuse it in each project too ? Because like Tailwind system, you can configure what you want to match the Designer's demands. More : you can decide what to configure. :)
I think we can find a better system for all in the middle of Tailwind (CSS Purge, design system), Bootstrap (Components), and SCSS (semantic css and markup, configurability and design system) : the best of each worlds. 🙂
I kind of understand why people use the tailwind, but I on the other side. I use Angular framework and it always creates components with a css file. So if you decouple your components that are not much big, it's fine to just write css and the files turns out not so big. Plus, when you using saas or less, you can make mixins and easily inherit some styles.
But that still means you have to come up with names for things you are styling, avoid name clashing if there is no style scoping, you are mostly repeating same styling all over the place (flex, color: xyz etc.) and in the end people have trouble writing CSS that's maintainable so most projects end with CSS that's spaghetti even if it is split into per component styles. Also, with this approach each project is unique, while Tailwind offers you a "framework" of styles. Onboarding new people into a Tailwind project is easier compared to a fully custom CSS from scratch project.
Don't get me wrong, I still use vanilla CSS and SASS extensively because of some of the capabilities it has (nesting primarily) and I still don't use Tailwind a lot. I did experiment with Tailwind a bit, it's crazy powerful for component based applications. If you are building a simple website, just go for vanilla CSS and that's it.
@@rand0mtv660 I agree with you that is sometimes hard to come up with names and of course if I come to a project with Tailwind I won't argue with people and accept it. Probably this is the only case for me to fully dive into Tailwind and I can't refuse that my opinion will be the same.
@@artur1998g I mean the best thing for you is to try Tailwind and form your own opinions and conclusions. Don't listen to everyone else, just try it for yourself and see if you like it or not. You are not forced to like it, but at least if you like it or don't like it you'll have arguments from your own experience and not just from reading some blog post.
@@rand0mtv660 there's a big difference between a design system and utilities.
Coming up with names while hard is a good thing, encouraging mental laziness and project disorganization because of that is not a good reason to use X.
Repeating the same styling is an organizational issue, tailwind is built on repeating itself.
tailwind doesn't not enforce maintainability.
Onboarding to tailwind still insists that people must know the projects systems same as if it had streamlined custom CSS.
Every argument for tailwind is an argument against it.
@@TheNewtonnot css front end people thinking they are masters of some advanced art 💀
My rule of thumb is to use scoped styles all the time and as you know all best modern framework can work with styles in one file with script and html, else use tailwind.
If it changes the way you structure your code or architecture, it's a framework (React).
If you can just drop it into what you were already doing, it's a library (leftpad, isArray, is-positive-integer).
I think this Def needs to be finessed a little. For example, a state management package for a framework (or the deluded library in Reacts case) dictates the structure of your code, but I would get scornful looks if I called redux or pinia a framework.
Is jQuery a framework?
@@JeyPeyyDepends of the jQuery plugins you use, but if you are doing a website with jQuery it does not change the way you do things like React.
When you are using React everything must be React way
@@yegorzakharov8514 I would call Redux a library for React. But I'm only putting 5 seconds of thought behind these assertions.
Stating the broad principle another way: if swapping the thing out for a competitor is easy, it's probably a library. If doing so requires a codebase rewrite and Senior Architect's approval, it's probably a framework.
Yup. A framework is anything that has
1. Inversion of control
2. A group of libraries
Many folk also forget that tailwind is css - ie. it is still cascading - no need to apply classes on children that have a parent element - if you can define them on the parent, ie like text size, color. Things like space-x/y on the parent etc get you a long way with spacings too for example.
Hearing him explain 😂 css and tailwind. We love you prime. I feel so inferior sometimes but not today
Main issue is this: there is nothing worse than coming back to something and saying, "wtf is going on here??"
It seems that Tailwind is that "make your own classes that do things", but with a convention that we all agree and we use in all the projects, so that yes, you have to learn that this mean that, but this will always mean that (except in JS), instead of meaning different things depending on who implemented it. You can see it right away, even if it is not as nice looking.
Tailwind is obviously one of those techs which you will hate when you see first, but as you gradually get used to, you will start appreciating how simple is it to use for getting shit done.
I used to hate it (just thought it is a worse version of bootstrap), but I can't live with without it these days.
Guys/Girls, first try it out before assuming.
I mean some people give their opinion while knowing what it is, if you thought it was bootsrap then you didn't look at it at all, It's also simple to get shit done with vanilla css or styled jsx like solutions, I appreciate tailwind but I see how it could become problematic in certain situations like when needing to restyle a project, as always you trade things for immediate convenience
@@heroe1486 yaya for sure. That is totally fine, and is a conscious decision. Not every project needs tailwind. Heck, you could even use a component library that uses tailwind underneath. But I hate when people don't even try out libraries and call them bad.
I started my life only using python and trying to analize data without any expertise, then first created a Django project to web, and only used bootstrap too, now I started in react/node (next.js), and can't live without tailwind, and by this time my company software is a little bit big, and understandable.
I've fought against tailwind for months, hating it because of how ugly it makes my HTML.. but then I begrudgingly used it on a larger fullstack project and brother, tailwind was a godsend.
I have a love/hate relationship with it now because I really don't want to use it but I acknowledge how significantly easier it is to use at the same time. & I'm just a solo dev at the moment, I can only imagine how useful it is in a team.
I use atomic design with tailwind. I don't even see the classes anymore
Same. It's so usefull on bigger projects...
I still hate how ugly it is in some way, but it is nice to have everything so easily readable in one place
I feel like Tailwind is what people would've wrote if inline CSS was easier to write and it's similar to OOP argument all over again
I hate inline css, so my first look at tailwind left me skeptical. I really had to try it for myself, and once I did I thought it was the coolest thing ever.
I'm in the former camp at the moment. What made you change your mind?
@@zebraforceone Probably using it on a greenfield project and not having to deal with gargantuan strings of text copy-pasta'd across multiple components
its a mess and its HELL when you need to stylize a specific section and dont have backend access to add extra classes or IDs
I don't understand why people keep wanting to do one thing only.
It's like either use utility classes or don't, but how about using both?
I generally write my css with utility classes for all the small stuff like color, font-size, spacing, ...
But when it comes to more complex things like media queries or grid templates I write them in separate scss files
This keeps my html code clean and also avoids repetition in the scss
Why make your own randomly named utility classes again and again for every project when you can just use tailwind where there's a standardized way to do that?
On top of that it's super annoying to have a mix of ways to do something in one project. Its super helpful to be able to see the css attached to the markup instead of having to jump between a css file and markup.
Html looking "clean" is super overrated, tailwind boosted my productivity massively abd refactoring is miles easier than trying to understand someone's 1000 line css file.
Yeah you're right, especially when it has a compile step and thus comes at no cost, same for mixing tailwind with a component library.
For complex media queries or things that requires too much logic anyway using tailwind is just complicated things and conflict with the initial goal of using tailwind
this is also what i do, i use tailwind for defining layout like flex, flex directions, alignment, padding, margin, and then use css for theming, animations, media queries, transitions etc
@@stugeh For the part about making the utility classes, I'm working on a Figma plugin that generates most of them for me based on the design (This is cool in a team since it allows developers and designers to have a clear way of communicating design changes)
For jumping between files, I've configured my Nvim in a way that makes it basically painless. Most of the time all I have to do is type the first word of the custom class name and hit enter to go where I want to go
And as for HTML looking clean, It's just preferences I guess
You also mention long css files, but since I only use css files for things like hover effects and such, they very very rarely go above 50 lines
There is an interesting css philosophy that inspired me when creating my way of working called "cubeCSS"
Also, if I'm not mistaken tailwind doesn't support things like `min()` `max()` and `clamp()` and I rely on those really heavily to make my responsive design feel as seamless as possible
I totally agree with this. People seems to forget that tailwind is only a thin layer of abstraction over css with additional features. We still have to work out our way to build up a design system and tokens to organize our code
tom is a genuis
yes duh
Tom’s css classes probably wouldn’t support comments
i can foresee that you won't like hmtx eventually, because you realize u would need to duplicate the tailwind classes in partial responses and full page responses. since they are duplicated, they can diverge.
same is true of the markup itself, but that's smaller and less likely to change, than the styling.
I'm looking into how can I solve this problem in Clojure with Enlive or maybe Specter over XML trees.
This here is wisdom
> u would need to duplicate the tailwind classes in partial responses and full page responses
Why wouldn't you build your full page responses from those partials? Most backend templating engines let you create a full page from multiple smaller components.
@@ArkhKGB If you do this, you're back to the same problem that tailwind is supposed to solve, no? Jumping around from file to file.
With partial responses you would use template fragments (e.g. golang blocks). Then you only write the code once and can return the fragments.
8:36 just inspect element? This is the same thing as extracting html into components or partials, but for styling. If its fine to extract html into partials or components (or whatever terminology you use) then it’s fine to do the same with styling. If you don’t, then how do you know you are applying consistent styling and not missing something and unknowingly creating small visual inconsistencies? Then later on, some developer has to decide whether the omission was purposeful or not.
This comment deserves more appreciation! Spot on, my friend 👏
CSS would be more bearable with better tooling, but because it's cascading and global, there's no way for my tools to know where a style is defined.
If it was locally scoped to components in a way that my LSP could jump to it, it wouldn't be as bad
And if we could make selectors/rules of other selectors/rules. custom properties help somewhat but we should be able to prototype with the noise tools like tailwind then roll it up into a names for design systems using just CSS.
in a vue project that is exactly how things are....
The way it handles media queries and theming is just chef's kiss.
I was skeptical of tailwind but it's extremely easy to use and fast.
One may worry about having to remember a lot of utility classes, but truth is that after 1 day you will already remember what matters (but you do need the vscode extension).
And in any case using the docs is superfast.
Setup takes a few seconds.
Code uglyness is not noticeable.
It actually made me want to make more stuff because I don't have to worry about the graphics anymore (and I knew css decently).
I'm never gonna go back.
As I understand it: A library is just code you import. A framework includes other stuff like media and executables. Because Tailwind runs a preprocessor which generates and transforms code, that makes it a framework. Or something like that?
Yeah but react is considered a library even though it has a jsx compiler in it.
@@anarchoyeasty3908 There's NO way you can call react a "library". It's a full on framework!
I think the point was even if you know CSS you have to jump around to look up the style rules to get context. Assuming your as fluent in tailwind as you are in CSS, you avoid having to jump around files to figure out what’s going on.
At that point, Tailwind just becomes another layer of abstraction on top of inline CSS, which is the real solution to less jumping around files in a project.
@@aquapenduluminline css is a little more verbose than css classes most of the times, and with things like react, your “inline” styles are an object that ends up adding tons of lines of code
@@Slashx92 If you are concerned about verbosity in the markup, neither Tailwind nor inline CSS is the solution.
Why is the talking point ever repeated it's weird.
You still end up doing that with tailwind because containing elements are also a tailwind soup.
When in devtools the affecting CSS is right there, the idea that if your in a component everyone can visualize EXACTLY what it visually looks like only because of tailwind is ridiculous.
This idea of locality of purpose being used to justify tailwind ignores the word cascade in CSS.
@@TheNewton Tailwind cascades perfectly fine. And if you're fluent enough in Tailwind then reading the classes is about as fast as reading a paragraph in a novel (near instant). And also like reading, you can visualize it. You can't gain fluency in a day, so the first 6 weeks or so are of course painful.
How is Tailwinds not just writing everthing with inline CSS styles, but with an alias system to shorten the syntax?
:hover :after :dark text-color-primary in config
I think that's pretty much it, but with the added benefit of some utility classes too.
It pretty much is that. Except they've extract out just the most useful functions of CSS, in a way that they work together reliably.
Tailwind with atomic design is SO good. Used it for a project and the newer devs never had to write any CSS
what does atomic design mean. Could you give some examples or a repo I can see it being used?
@@Leon-bb8fc it can be vague, but it's about breaking things down to simplest parts basically like utility-classes, design-tokens, etc. It can be as simple as `.button-color, .bc { color: red; }` or `.bcr { color:red;}`
To some it may mean the aggregate classes you've composed together that represent a part of a design and whether you process that into a single class or just refer to it by the component name as an "atomic" part i.e:
button type="button" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
.
@@TheNewton To put this in my own word, it's about grouping specific elements with the same styles and re-use them wherever fit, does that sound correct?
e.g.
.base-button { font-size: 1rem; font-weight: 400; }
.red-button { color: red; }
.blue-button { color: blue; }
Page A:
This should be red
Page B:
This now should be blue, but same base styles
@ThePrimeagen "I effectively created Tailwind before Tailwind" lol nice ; )
In the purest since, a framework is a library that you register callbacks to your code, then call a function in it that takes over everything (like an event loop). If a library doesn't do that, then it's just a library, and not a framework. However, in 2001, Mac OS X made .framework directoeies that were basically .dylib files wrapped in metadata and resources. That's a large source of confusion, but if you're writing event handlers for a library, then it's probably a framework. The nomenclature is just a convention, though, since they're all libraries.
Well, Tailwind actually is understandable without knowing Tailwind, because the classes are usually 1:1 mappings of CSS rule names... Which is also why I think it's kinda silly.
It's pleasant to use for most cases, and the configuration framework it's built on is amazing.
I did not have a good time building web components with Tailwind though. And, overall I think it would be much better to have a SCSS framework instead built on-top of Tailwind's core principles. That allows the compiler to exclude stuff that's not in use, and gives the developer more control. Especially when creating component frameworks and re-usable styles for use in multiple services.
But for a single website or web app it's great!
You can do that. You can alter, add, change tailwind's core and build your things on top of it. And it also "purges" unused css. It does everything.
@@LucyPLM I'm not saying you can't, just saying it would be better. Kinda defeats the purpose to have lots of custom stuff on top imo.
"are usually 1:1 mappings"
and if not just go through 30,000 utility classes and if you can't find it well it must exist so wasiting time looking assuming your understanding is based instead of just writing organized CSS and thus improving fundamental skills, ez.
@@TheNewton Clearly you never worked in big projects, or in at least a long lived project where development is never stopped even after release. After some time and a couple of devs along the line, organized CSS is not a thing. Realistically speaking.
CSS is the worst programming language ever
One thing I love about the frontend is how all 3 languages - html/css/js - are simultaneously amazing and horrible at the same time.
As a CSS engineer, I can confirm
KEKW
Pug, Tailwind and Htmx can replace in most cases those three devils
@@danielvaughn4551imo html isn't that bad it's just markup. The other 2 are tho
"Framework" "library" quite sure it's neither? It's a generator like the templ cmdl tool. It even has the same --watch argument to keep it running. (love using the two together btw)
Theres two types of people,
- People who hate tailwind
- People who hated tailwind
Bootstrap was table based design rehashed. Tailwind is inline styles again (they even add to reinvent the Cascading from Cascading Style Sheet with the group system). So, 5 or 10 years from now we'll get a "semantic" craze again. Maybe based around domain defined components. And we'll get Semantic Web Garden to succeed CSS Zen Garden.
Ngl Semantic Web Garden sounds great. I'm a huge fan of Semantic.
Semantis is a great example of why tailwind is bad, things like the article,section and ul elements alone are enough to target with CSS without having to foist inline styles on them and all their children. Tailwind encourages some ugly unusable sites when the css is missing.
A lot of tailwind's class names actually have a good pattern where you dont have to memorize the whole language to use well if you already know CSS. Albeit I have experience with CSS since before CSS3 so I'm a bit biased since at some point CSS began to click for me
and hey if you don't just search through over 30,000 class names like it's a lanaguage reference , easy peasy.
The part of memorizing something u need to use daily. One would think that after looking something up 2-3 times, you would have memorized it by then just after seeing it thrice
Here is why I use Vanilla JavaScript: It's because I spent time learning the language. This means, it's not _optiional_ to sue jQuery (is anyone using that anymore?). It might not be optional to use TypeScript however... But yeah that's next on the list I guess.
I mean, if people are going to argue that the clutter can be ignored by having a plugin that hides the `class="..."`, then I argue: I'm pretty sure most IDEs let you open multiple panels at the same time
Personal workflow is to use it (unocss more often) for unique details like margins and whatever in specific places (the one special button in a menu of same buttons or whatever), but still preferring defining 'component' styling in semantic css classes instead of in the component itself. As opposed to what some people have said, it seems to make more sense having a central file as the source of information about your 'theme', and have it be css, not js. So my usual component will look like `` and that one specific element will be ``
Tailwind has extensions that WILL make your life even easier, autocomplete for classes, hide/show classes if they are getting in the way with a keybind, sort classes on save so you know where to look for certain classes when trying to make a change, it allows you or others to immediatelly understand what is happening just by looking at the code, it allows teams to make changes without making random half-assed named classes and appending to a long ass cluttered css file (propably duplicating 2-3 or more other classes that are already there), it is even better when you use it on reusable classes/components and did i mention ZERO (0) unused css? And no it is not like inline css, try using media queries or :hover effects with inlince css YA CAN'T
The solution to less jumping around to understand a piece of markup code isn't Tailwind. The solution to that is inline CSS - even less jumping around than Tailwind.
But then you miss out on one of the bigger benefits Tailwind brings, standardization through good enough defaults with the ability to fine tune it down the line when it really matters. It's a lot easier to prototype something where your boxes all have the "shadow" class, compared to using "box-shadow: 4px 4px 0 #efefef" everywhere and then later trying to find all those variations of it because it needs tweaking.
@@Ab4kus It may help in rapid prototyping when you need to get a certain "look" out of the door ASAP, but for fine-tuning and long-term maintenance, they're gonna be replaced with inlines. Ain't no way I'm asking my successor to take over a frontend full of Tailwind.
@@aquapendulum how is that a solution to anything? You end up with the worst of both options.
@@Ab4kus Tailwind is the real worst option. You still have to jump around source files to see what's going on behind layers of indirection and still end up with verbose markup.
@@aquapendulum everything you said before "verbose markup" is incorrect, there are no layers, in fact, that's why you end up with the "verbose markup" so you're contradicting yourself. And the "verbose markup" part itself is what Tailwind admits to in its documentation, and is what most developers accept as an acceptable trade-off for the benefits it brings.
Tailwind is a meta css framework if you compare it with bootstrap, bootstrap has fixed classes mostly focused on components, with too few utilities, Tailwind instead can generate a css framework (like bootstrap) from your particular design tokens to generate utilities, but also it is pluggable, so you can for example add components by installing a plugin like daisyui, so as a basis tailwind is focus on generating utilities, but the rest can be added through plugins which you have a pretty awesome collection available like typography for example... Also you can avoid repetition by creating your on classes with @apply directive
Probably my favorite thing about Tailwind is, that it's literally just CSS. There is nothing crazy about it. And because of that it runs e-very-where.
another big TWCSS pro is that due to the high reusability of the classes, the compiled css file has a smaller footprint.
I completely agree "learn a language". But CSS just always seems like chaos to me.
+1 for playing Unreal Tournament at 640 in 1999.
I honestly prefer rolling my own: frameworks break more easily or can go out of favor and everyone use something else anyways.... at lest homegrewn solutions tend to be more minimal and I have more direct access to codes. So with this i disagree. However I agree with locality: the two is not in conflict!
tailwind takes one day max to learn.
Tailwind is awesome, as much as I hate vanilla CSS, tailwind made it tolerable for me to do front-end. Every bit of information about your design is in one place. You don't confuse yourself coming back from file to file or using the find function in vscode.
That's why people like TW because they hate front end and want a more limited experience
@prime, curious your thoughts on the new panda-css from chakra folks. I'm a huge fan of tw myself, but have a positive first impression of panda-css and going to give it a try. I think I saw a video where you were $hiting on using styled, emotion, etc,. and panda sort of feels like that, but is more like typed version of tw. styles don't roll of fingers like tw (once becomes second nature) because not a simple (endless) string, but the type safety appeals to me, esp. what passing a style as prop (not the tailwind way, but there are cases), and there are several nice features that not going to go into here, but that address some tw pain points for me (and open up some new capabilities).
Tailwind is just fancy bootstrap utility classes
People who like Tailwind just don't like CSS if you look really deep into it. You could do (almost) everything with inline styles, so why do they not do it? Tailwind has syntax for inline conditional styles and predefined patterns
Who likes CSS?
@@LucyPLM I do. It's an incredible flexible and powerful language.
there is a video of an asian woman comparing web design in the east (CJK or China/Japan/Korea) vs Western web design because web pages in CJK are packed with information and you can scroll for hours and they are organized and lots of details and information and colors, while western pages are focused on a single topic/object and a lot more dark colors and she explains that it has to do with the art, and east-asian culture in general, Asians have grown in cities and a culture that has too many information everywhere and they want and expect too many information and in their sites they reflect that, customers want all the information to buy stuff. So Asians are happy with tail-wind and to us tail-wind looks awful.
Where can I watch that video? Sounds very interesting
@@josephgay-cj2fc ua-cam.com/video/Opy-SjDU0UY/v-deo.html i think this one
ua-cam.com/video/Opy-SjDU0UY/v-deo.html
but I am not asian and I like tailwind. because I hate DRY robot-persons that forced me to write a style for a component used only in one place in the whole app
@@josephgay-cj2fcjust search for "japan internet weird design", it should be one of the top 2 videos
I haven't watched either one, but got recommended to me several times lol
I see a lot of comments about using frameworks supporting scoped styles and else tailwind. What about Tailwind combined with Frameworks supporting scoped styles?
As someone that was skeptical about Tailwind, it's pretty nice to use. However, I personally prefer to use it in combination with CSS files when more structure is beneficial.
When there is a grid layout that changes between different resolutions, there's no way I'm doing that in tailwind, forget it.
Alternatively, if there is a hover effect where when the parent is hovered, 2-5 other elements are animated and you need to only run it on certain resolutions. Yes, you can do it with Tailwind, but it becomes harder to understand what the f is happening in the Tailwind util classes.
Side note: The largest benefit for me, is the css size and not the syntax.
On learning a language and not being a look up monkey. The trick is to guess at what you think the code should be. Trying and then seeing if we were right or wrong is how we learn. You don't learn to touch type in the shortest time by staring at the keyboard. You learn to touch type the fastest by guessing which key is the one you need and then press that guess. Look at the screen and see what comes up. Same with coding. Start guessing and you'll start to know how to code and not how to look it up. It's like chatGPT, it made billions of billions of bad guesses and eventually discovered a way to make better guesses.
The best solution to the problem Tailwind solves is Suzy Grids. It's like tailwind but as SASS mixins, layout has no business in an HTML file, therefore layout classes don't belong there either. They belong in the CSS layer.
there IS css in the backend. they are called "decorators"
I wanted to hate tailwind so bad, but I went full crack addict on it. I would drown my closest friends if it meant I would only ever need to write tailwind.
The lsp is ridiculously good also.
also their class sorting prettier plugin
@@nivethan_methat completely breaks with templating laguages :,(
Yeah I think most people that shit on Tailwind haven't actually tried it at all and have just seen long class strings in HTML and decided it's bad.
My only worry trying Tailwind was that I wasn't going to be able to customize it and that it would limit me a lot, but seeing how I can configure every property such as color or spacing or add whatever I want and that it appears in autocomplete with :hover and whatever modifiers already in VSCode when working with it was a gamechanger for me. I still have to use it extensively to see its downsides, but I'm kicking myself for not trying it earlier.
@@rand0mtv660 i tried tailwind and now i can't go back! all my personal projects are in tailwind. i'll only use sass if my work really needs it(a legacy project)
@@nivethan_me " lsp is ridiculously good also."
"also their class sorting prettier plugin"
It's like everyones CSS tooling is bad so they have to lean on yet another abstraction.
"you must know all of Tailwind" is only partially true.
Yes, it is true that you must know it, but if you have experience in CSS, then (most of..) the class names are very intuitive.
Either you have to learn CSS and live with the context switch, or you have to learn CSS, intuit most of Tailwind Classes and look up the few that confuses and live in harmony
So I could write 15 classes to make a "small box' or just write he styling once and call it small box everywhere. Hmmmmm
Tailwind has a vscode prettier/plugin that reorders the classes in the html to their recommended order. makes it easier to read those blocks of class names
tailwind, htmx, and alpinejs are all great at locality of behavior and keeping things together in a way to where it's easy to see what's going.
Except in CSS there's this tricky word "cascade".
@@TheNewton if you use tailwind all the way down that is minimized, especially if used within components, when you go back to look at the component later you can gather fairly well what is going on
Locality of Behavior > Separation of Concerns.
This is why HTMX is great, too.
In my case, I undertand css from tailwind, been using bootstrap for years before but never look deep into css. Sadly my company don't want to use it because other developers prefer bootstrap.
I was so on the fence about using it but with so many people using it I have it a chance. I would never go back I strictly used only css and I had tried bootstrap and hated it but tailwind makes copy and pasting someone’s code amazing. I’m not a UI artist so using some else code is amazing. I tweak what I need and I know if I ever need to change something I easily can. The portability factor is the best part. If you ever tried copying some solution to a UI problem from stack overflow or codepen and tried to make
It work with your css you’ll know what I mean
Yeah you're right, kind of the same for me, it enables easy copy paste of "components" without bringing libraries or importing hard to understand and modify giant css files. But it doesn't mean we can't use other solutions for our own code, tailwind comes at no cost so you can mix it with vanilla css, styled jsx scoped styles, UI component libraries etc
Bet Tom writes production web apps with just pure HTML and JSON.
7:38 breakpoint classes are frustrating… does the css apply or not apply when above or below that breakpoint.. so many permutations of possibilities of what will apply when.
We wouldn’t need tailwind if html allowed attributes like style:hover=“…” style::before=“…” etc. or supported some syntax to allow inlining of all or most of the special css pseudo classes and elements, selectors, combinators, etc.
3:22 I disagree that you need to know tailwind before you use tailwind, you only need to know CSS, and you can use tailwind almost immediately, just look to documentation from time to time for the names and that's it
"just look to documentation from time to time for the names and that's it"
The second sentence disproves the first sentence. Every argument for tailwind is an argument against it.
@@TheNewton What's your solution?
The “you have must tailwind” thing is so weird for me. At lest in vscode theres a plugin that gives you intellisense for classes and what they represent
I assume a nvim plugin that does the same is very straightforward
That's one of the ways you know it's bunk proponents present features like magic ignoring their real problems are with bad css tooling and project organization.
@@TheNewtonyou wrote 30 comments over some web design styling technology c in css doesn’t stand for church get a life this is getting silly
You really hardly need to know tailwind at all to use tailwind. If you know css, you can guess at it and intellisense is there to provide the feedback you need. You learn most of it in a day just by using it. Some things aren't this way (I'm looking at you "leading"... print designer term instead of css term... umm, not the best decision there), but most of it is. And if you're defining/extending your theme to fit a good designer's well-crafted figma design, then you're really golden.
The thing I have against Tailwind CSS is that it renders the markup unreadable.
It has its purpose in component based frameworks, but using Tailwind without such framework is pure overkill.
opinions for any css-in-rust solutions? - writing css in the same component function?
what is css supposed to do in the backend? style the terminal?
Which version of hell do you want 😂 Tom’s version isn’t documented so I know which I’m forced to choose. There’s only vanilla extract, css modules, and pandas js. All have their downside and it’s a choice of the least ugly. At least the tw docs are pleasant and that’s good enough for me.
This guy missed all the points I made when I tried it: 1) The main problem with CSS is regression. By enforcing markup "pulling" styles instead of styles being pushed, you avoid unintended and undetected side effects in other parts of the UI. 2) CSS as a language resists structure. By not having stylesheets, you can't fail to structure them. 3) By constraining the available design space, you can't go down a rabbit hole trying out different pixel values of a button margin for two hours. 4) The proliferation of component-based libraries nullifies the main drawback of Tailwind, which is re-use.
I disagree on you saying "you have to know it". If you know CSS, you know most of Tailwind. For 90% of cases, just take what you would normally write and reduce it down to one -two words.
display: flex -> flex
position: absolute -> absolute
padding-right: 1rem -> pr-4
justify-content: center -> justify-center
background-color: black -> bg-black
Same, I disagree with the "you have to know Tailwind". What you have to know is CSS, the way someone uses Tailwind is by thinking about CSS.
And, bonus feature, by using Tailwind, at least in my experience, you get better at CSS.
The biggest rule for tailwind: You gotta try it to like it.
what's the css of your moustache ?
Why is there not a good LSP that will show you the styles for a css class when you hover over it?
Tailwind is for Javascript-only dev, CSS is for CSS dev.
Tailwind is a fine FW, if we did not have all we need in CSS, we do grid/flex/transition/etc ... Plz don't use this or bootstrap any more.
CSS in the backend... if CSS, by itself, is Turing complete then it would be in the backend.
react in fact is a framework
NO
After the launch of React Server Components it definitely is a framework. And it makes a lot of checks in html attributes in development.
Before hooks React was probably a library, but after it is not anymore. When you use hooks everything must be adapted to hooks way
And anyway according to the react team "you should use a (meta)framework if you want to build apps with React", which made me ditch react and nextjs after years since the latter is now a brand new (unstable although labeled stable) framework
Here it comes: yes, I agree that learn your sh** is important but if for reasons you are forced to juggle 5 different languages and you never know hoe long before you get re-orged... well learning the language becomes a luxury
I really don't get tailwind, I haven't done enough frontend to suffer from the issues it tries to solve but I can't understand how having a million utility classes is better than having ur css styles in the same file as the component in raw css form
Give that code to somebody else and ask him to change the design.
Or, the other way around, ask a friend to make an website, or get some website from a friend that did his own things in css, and then change the design based on his requests.
After that, do something with tailwind, a complete website. And you will see the whole difference and why anybody that went from CSS to ui libraries to bootstrap loves tailwind.
it's for people that assume 1 library can fix CSS tooling or don't want to bother with well formed custom organization of CSS, such as in prototyping or teams without frontend devs.
If you don't struggle to name and organize what some part of the UI is, probably avoid tailwind.
I would love to see an article about Tailwind _not_ praising it.
I like Tailwind, but surely _someone_ who has tried it must've disliked it, or is it literally that the Venn diagram of those who dislikes it and those who haven't tried it are 1:1? I'd almost believe it.
What if hovering over a classname previewed css??
I hated fighting bootstrap to make an original design!