Tailwind is evil, it pollutes your jsx code and it cannot do some of the basic stuff that UI frameworks offer these days, like media queries in js (useMediaQuery). Basically what Tailwind does is compile a huge list of classes before any js code is actually run. This means you cannot use any kind of variable value from js. The only way to do so, is by using CSS variables and change the value of those in runtime using JS. A very cumbersome approach, thats very difficult to understand for people who didnt write the code (or if you dont work on the project for a while). You cannot access any of the values used in Tailwind from JS, so you're completely locked into doing things "their way" (very opinionated framework). Modern UI frameworks offer ways to access the defined values, like your theme/pallete or the defined breakpoints.
All Tailwind does is create obscure classnames that you have to learn. Instead of using the CSS that you already know.
<divclassName="bg-white mt-4">
If you refuse to use a modern UI framework. Why not just use the style property instead of Tailwind CSS...
No, I actually worked with it and discovered the many things Tailwind just cannot do, without very dirty workarounds. Also, its Tailwind that is trying to replace CSS, you're writing class names, not CSS.
I actually worked with it and discovered the many things Tailwind just cannot do, without very dirty
Like what?
you're writing class names, not CSS
You understood CSS wrong. It's all about composing classes and reuse it. You should write more reusable CSS as you can to do not repeat it again and again. Tailwind provides a shortcut to skip the writing CSS for general purpose styles and avoid a lot of duplicates.
I use both, CSS Utility framework (Tailwind) and CSS Components Framework (Bootstrap, Antd, etc). In my opinion, Tailwind best fit for team who work together (frontend, backend, UI/UX), but Bootstrap or Antd fit for Fullstack Dev.
I think the fact that Tailwind is utility-first is ideal for creating an application, whether it's web or mobile (I've used it for several months with React Native) if you have a specific design that you want to implement and the flexibility you have is incredible .
A lot of people like to comment on the fact that we have to memorize several classes, but over time it becomes totally natural when compared to other css frameworks.
Regarding the "pollution" of jsx and making it more difficult to read, there are several ways to accomplish this, the simplest is to create a variable outside the functional component and add styles to it (but you can also use css and scss modules, twin, etc). Another aspect is that we can also create our design system with tailwind, from colors, spacing, etc.
I don't put myself as a fan of anything, because in reality the stack and libs change from project to project, but I think it's incorrect to look only at some aspects and not at others (this discussion could take days).
CSS is already natural. Why learn something else that offers no extra benefit. Thats just arrogant framework behavior if you ask me. Tailwind CSS is basically saying: "We're better than the people who came up with CSS, so we're just going to rename a small percentage of CSS syntax to custom classnames, cuz we're rebel bruh!"
there are several ways to accomplish this
If a framework forcefully introduces problems that you need to fix in order to stay anywhere near clean code principles, why use the framework at all... Its a bad framework. <- emphasis on period.
Another aspect is that we can also create our design system with tailwind
You can do that with modern UI frameworks aswell, most of them offer ways to define/override pretty much every aspect and actually offer good documentation on how to do so. For example in Mui: mui.com/material-ui/customization/...
And we havent even began to touch on the fact that you definitely do not want to run any a11y linting on an application using Tailwind.
The discussion only takes days because the Tailwind fanboys obsessively want to stay rebel and produce web applications that do not follow any web standard.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Tailwind is evil, it pollutes your jsx code and it cannot do some of the basic stuff that UI frameworks offer these days, like media queries in js (
useMediaQuery
). Basically what Tailwind does is compile a huge list of classes before any js code is actually run. This means you cannot use any kind of variable value from js. The only way to do so, is by using CSS variables and change the value of those in runtime using JS. A very cumbersome approach, thats very difficult to understand for people who didnt write the code (or if you dont work on the project for a while). You cannot access any of the values used in Tailwind from JS, so you're completely locked into doing things "their way" (very opinionated framework). Modern UI frameworks offer ways to access the defined values, like your theme/pallete or the defined breakpoints.All Tailwind does is create obscure classnames that you have to learn. Instead of using the CSS that you already know.
If you refuse to use a modern UI framework. Why not just use the
style
property instead of Tailwind CSS...Oh no! It's a few characters longer! facepalm
Everyday a TW hater bringing JS oriented style as argument to replace CSS.
No, I actually worked with it and discovered the many things Tailwind just cannot do, without very dirty workarounds. Also, its Tailwind that is trying to replace CSS, you're writing class names, not CSS.
Like what?
You understood CSS wrong. It's all about composing classes and reuse it. You should write more reusable CSS as you can to do not repeat it again and again. Tailwind provides a shortcut to skip the writing CSS for general purpose styles and avoid a lot of duplicates.
I think you may find Chakra UI more suitable UI solution for you
chakra-ui.com/
Chakra UI is very good too yes, I have more experience with Mui though.
In my opinion Chakra UI is the best UI framework.
I use both, CSS Utility framework (Tailwind) and CSS Components Framework (Bootstrap, Antd, etc). In my opinion, Tailwind best fit for team who work together (frontend, backend, UI/UX), but Bootstrap or Antd fit for Fullstack Dev.
I think the fact that Tailwind is utility-first is ideal for creating an application, whether it's web or mobile (I've used it for several months with React Native) if you have a specific design that you want to implement and the flexibility you have is incredible .
A lot of people like to comment on the fact that we have to memorize several classes, but over time it becomes totally natural when compared to other css frameworks.
Regarding the "pollution" of jsx and making it more difficult to read, there are several ways to accomplish this, the simplest is to create a variable outside the functional component and add styles to it (but you can also use css and scss modules, twin, etc). Another aspect is that we can also create our design system with tailwind, from colors, spacing, etc.
I don't put myself as a fan of anything, because in reality the stack and libs change from project to project, but I think it's incorrect to look only at some aspects and not at others (this discussion could take days).
CSS is already natural. Why learn something else that offers no extra benefit. Thats just arrogant framework behavior if you ask me. Tailwind CSS is basically saying: "We're better than the people who came up with CSS, so we're just going to rename a small percentage of CSS syntax to custom classnames, cuz we're rebel bruh!"
If a framework forcefully introduces problems that you need to fix in order to stay anywhere near clean code principles, why use the framework at all... Its a bad framework. <- emphasis on period.
You can do that with modern UI frameworks aswell, most of them offer ways to define/override pretty much every aspect and actually offer good documentation on how to do so. For example in Mui: mui.com/material-ui/customization/...
And we havent even began to touch on the fact that you definitely do not want to run any a11y linting on an application using Tailwind.
The discussion only takes days because the Tailwind fanboys obsessively want to stay rebel and produce web applications that do not follow any web standard.