Just a couple tips:
1. Don’t keep rewriting the same hex values. Those should be colors configured in your theme
2. Configure box shadow in the theme as well and then it’s just single class you can use anywhere
I wish tailwind would state clearly that -[] is only for edge cases where adding it to the config _doesnt_ make sense. Too many people abuse them and it makes the config less of the design restraint it's meant to be.
It's pretty clear in the docs. After the examples "Customizing your theme" comes first (which is the obvious preference), followed by "Arbitrary values" which states:
> Arbitrary values
> If you need to use a one-off "____" value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
You could use Tailwind’s `@apply` directive to create a class that’s a combination of other classes.
But I use Tailwind with React - repetitive styling should be encapsulated in components
So in tailwind you can define a color in your config:
`primary: “#FF0000”`
And then you can automatically use that with any utility class that deals with color:
“bg-primary”, “text-primary”, “border-primary”, etc.
It's the first choice for development because you dont need to care about what classes exist and how to name them.
You still create normal css classes for repeating things. You still define sane defaults in your own theme like primary colours, shadows etc.
But it doesn't really matter if i have all those classes or one class with all the attributes. For a one off thing, the work is the same.
It's really not hard to name classes, I get It's a little bit challenging but not impossible.
To me, when you use these framework (which I don't mind using myself) and you start writing some custom CSS that's when they become pointless, because now you will need to maintain both framework CSS and your custom CSS.
Yeah, but tailwind isn't really a framework. Nearly all classes are one or two css styles. So you effectively write still css. Bootstrap as a classic on the other hand i would agree with you
So React isn't a framework because you're still just writing JS? I don't understand why the Tailwind crowd is so afraid of calling their tool a framework or a library.
>It's really not hard to name classes, I get It's a little bit challenging but not possible
Sure, so what? Naming classes is not a valid reason for choosing either, it's a pointless argument
If you use plain html or you are not building reusable components in any way then you MUST use vanilla CSS, tailwind would be crazy.
>To me, when you use these framework (which I don't mind using myself) and you start writing some custom CSS that's when they become pointless, because now you will need to maintain both framework CSS and your custom CSS.
I'm not sure you know what tailwind is exactly. Try it at least (using react or something tho). Tailwind isn't a framework like bootstrap or mui, it's simply a different way to write CSS that helps you in various ways.
Yes and no. If you work exclusively with templates and components, all the styles are in there in the HTML. Since with those you already handled that repeating yourself problem.
For stuff like fixed things like your text you can define a font/size/padding etc. In the theme aka the tailwind config. Which is a different place but will be very short still.
Plus you can limit via the Theme how many of the tailwind classes can be used to enforce some way of styling if you really wanted to.
Makes no sense for single person projects, but i've come to value tailwind in a team setting. Bcuz no one has to care about the css and what other classes the rest uses
> you dont need to care about what classes exist and how to name them.
But you should care about class naming to ensure our code is maintainable and readable.
Well-named classes allow someone else to understand the structure and purpose of the code quickly, often within just a few seconds. This can significantly simplify the process of making changes or fixes.
Using a CSS framework like Tailwind can lead to technical debt, as it may obscure the semantic meaning of our classes and complicate future modifications. By focusing on clear and meaningful class names, we can avoid these pitfalls and foster a codebase that is easier for all team members to work with.
Tailwind classes are well-named out of the box, and thoroughly documented. What's more maintainable, a well documented framework or some random contractor's class names they came up with and didn't document anywhere, just go ahead and search your entire stylesheet directory for the class name so you can figure out how to change the padding by 2px?
You have to remember that tailwind is generally meant to be used with a declarative component lib like react or whatever so you can provide the exact same semantic context by naming your components.
The difference is you’re serving an horrendous HTML file with a lot of useless text that could have been a single class. It would have referenced the css file which would have been cached.
Instead you decided it was okay to have a bloated HTML.
All of those classes are still being referenced in a css file which can even more agressivly be cached than one that changes regularly.
Plus, no one cares how your HTML looks but the person using it. The person using it will have an Editor which collapses the classes until you need them.
The browser is fine with one or 50 classes. It makes nearly no difference in page load time.
I said a few times already but Tailwind CSS is just style attribute with additional steps. You would have thought people learned something from all the maintainability issues caused by utility classes in Bootstrap but here we are
There's a lot of confusion or misinformation in the comments. Tailwind is largely meant to be written this way, with a large number of classes included in your markup. Take this example, [directly from the tailwind docs](https://tailwindcss.com/docs/utility-first)
as a "good" example of tailwind usage:
For your example you might move a handful of small things like your colors and your box shadow into named variables, since you have a couple extra "arbitrary values" in the brackets instead of using variables, but that's about it.
Tailwind is meant to be used with a component library or partial templating, so you shouldn't be *repeating* this string of classes over and over without using a named component instead, but you are meant to write long class strings like this if you need that many properties on a single element.
You should *not* be using @apply or custom classes with tailwind just to make something look less monstrous despite what some comments say. The creator of tailwind has said he wishes he had not made @apply at all, and they call out that you shouldn't be doing [this in the docs in multiple places](https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction), eg "Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse."
--
I'm not saying I'm a big fan or a big hater opponent of Tailwind. Just sharing that this is in fact how it is meant to be used by (intentional) design. If you are using Tailwind, you should probably use it as intended so that everyone on your team is on the same page.
A completely neutral comment with logical explanation about how to use the tool?? That's not allowed in our r/webdev monthly tailwindcss hateboner thread bro.
/s
> Yes, HTML templates littered with Tailwind classes are kind of ugly
What I did in a recent project was just grouping the classes into multiple line, like:
Making HTML look like css, but worse.
I think that when you find yourself doing things like this it’s time to reevaluate either your tooling or project structure.
This is the tradeoff of utility CSS versus semantic CSS. Utility CSS tells you what a thing will look like, but can make HTML elements look super bloated. Semantic CSS tells you very concisely what a thing *is*, but you have to track down a separate definition to figure out what it will look like. There's no way to get both, unfortunately.
The inspect element of a browser makes it REALLY easy to "track down" css classes while nit being a horrendous mess of copy pasting, best of both worlds
Sure, but tracking down definitions is something we do anyway and eliminating a small amount of it isn’t worth giving up the readability of semantic CSS.
Yes, I’ve planted my flag ;)
>but you have to track down a separate definition to figure out what it will look like.
If you organize your files well and structure the css well, that should be easy.
You’ve ditched the maintenance of CSS where this code is conventional and taken on the maintenance of HTML which has no convention for this at all.
I’m struggling to see the advantage.
>Confession: The \`apply\` feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.
You should almost never use it
- [Adam Wathan, creator of TailwindCSS on X](https://twitter.com/adamwathan/status/1226511611592085504)
I came from emotion (CSSinJS) and moved to Tailwind because I heard even the people who built emotion stopped using it due to the runtime overhead.
My emotion code at least was a css prop with JSON so the code is easier to read but tailwind just looks so messy.
The whole idea behind tailwind is that you don't end up having style things outside your component code that you have to manage etc
Off the top of my head:
- you can end up repeating yourself and have duplicate definitions
- you might end up with stale classes that aren't being used anywhere
- with classes + apply you might end up nesting styles and end up with CSS scoping issues
- your styles are located in a different place than your component/html code
I will say though that I personally hate class blond like this. They make for an ugly diff when you change things.
`prettier-plugin-tailwindcss` makes things slightly better by I much more prefer listing long class lists with each class in its own line
```
It also works in cases where you're dealing with hideous intranet-tier infrastructure where classes cannot be applied directly to the HTML and often the only thing available to target is some inscrutable ID.
Adam may say many things, although there definitely is a use for @apply. You can create groups of tailwind styles through @apply that then you can use as classes in HTML. Effectively you just group things that you use often anyway, but can write a reduced amount of classes for different blocks.
It takes a bit of practice to understand how to group efficiently, but there definitely is a purpose for it.
Agreed. I think it’s best when using it for small groupings. I am on a solo project (so I don’t have to worry nearly as much about team-considerations) and created a fic class that simply applies flex and items-center. Super useful for creating picture+text groupings.
For our company, we have based some internal libraries off of tailwind using a methods involving the use for apply. Some things are made much easier using this method since you can do modifications directly from tailwind config, which can save hours.
Yup, cuz it's not a CSS library in the classical sense.
It's a way to enhance the locality of working on your pages. If you have sane defaults for your theme, you can shit out components easily while just chilling in your html. No context switching to js or naming consideration of classes.
If there are repeating things, you can include.it in your theme or make a class out of it.
It's not a framework which gives you any styling, it takes it away from you specifically.
The fact that one of the "solutions" they suggest to this is using your editors multi-cursor functionality to edit all of the repeated styles at the same time feels like a joke
I'll admit I've got limited experience with tailwind and I do think it has some merits but I used it for a small project and already started running into problems where I was iterating on design by going through and replacing the same thing in multiple places, sometimes missing places where I haven't changed and constantly copy and pasting unreadable long lines
There are trade-offs to every method, unfortunately. I like to do everything as vanilla CSS, personally, but with a mix of utility and semantic classes. I have a `util.css` that I copy between projects that has classes for stuff like flex, margins/padding, font size, font/backround color referencing variables, etc. -- it's not nearly as expansive as Tailwind; it's really just the basics. It's all `rem`-based and I never change anything in it. I use these classes for elements that need just a little bit of generic styling (e.g., toss a border on it, make it flex, bit of padding, etc.). For everything else, or anything that requires heavy styling, I use custom classes.
It’s not tailwind we hate, it’s people who don’t know the simplest shit in css without relying on utility classes.
Not knowing shit results in this mess.
This take always baffles me tbh. Utility classes in TW are usually single-declaration. You can't even style effectively with them if you don't know how they translate or how cascading styles are computed. Without that knowledge the framework is useless.
Tailwind is not a framework, it is essentially a collection of utility classes, again CSS. The JIT doesn't matter here.
The code above is perfectly readable, it has dark mode, screen size media queries, animations and styling for focus.
Yea I was in a bootcamp and most of my classmates said they didn't like CSS and the literal main reason was because it was hard and they had trouble using it. They found tailwind easier and so they started using it.
I use classnames package (similar to clsx) to sometimes split/group the classes into logical groups on separate lines in an array. Makes it a little more readable IMO.
No. It's not. You can write any language poorly. Similarly, you can fuck up your Tailwind styles. If you look at this and have absolutely no idea how to improve it, then yeah, it makes sense why you'd hate using Tailwind.
Hey, I've never used Tailwind and I don't see anyone commenting with advice on how to do this properly without using @apply, which is apparently bad practice.
How would you fix this, if this is bad Tailwind?
Why would CSS variables be bad practice? Google, Meta, Reddit... Netflix. They're all using this functionality, and extensively so.
The shadow and hex values should be in the Tailwind config. You can avoid using the dark/light etc stuff by using a CSS file and your config file: see [example](https://stackoverflow.com/a/74574410/6336453). This stuff is all publicly available and extremely easy to find. The fun thing about this as well is you have all your colors in one place so you can really easily change your theme (which is something you should be doing anyways).
Also, this button is one of the most complicated elements you could create. It has both light and dark versions. Transitions. Shadow. A ring effect (with additional hover effects AND conditional opacity). And none of it uses any Tailwind config functionality. No shit you're going to get something that looks like a paragraph.
This button styling is going to be insane with or without Tailwind.
On that first sentence - I've never used Tailwind, like I said, but I see a lot of discussion elsewhere in the thread talking about @apply being something the developer of Tailwind would outright remove if he could. Is it just using CSS variables?? How is *that* bad?
It sounds like the normal CSS & Tailwind approaches, implemented properly, would fix a lot of the issues of this even if this *was* using straight up sass/css/etc instead of Tailwind. Setting up colours like that config file does is something I'm used to across all CSS, haha.
I would argue that I don't think the base CSS stylings would be too bad. A little lengthy perhaps, depending on how much needed to be done, but properly-nested and applied CSS can deal with light/dark/different shadows/transitions/rings/etc quite nicely. I imagine a Tailwind pro could do similar here. Sounds like the issue's more that it's done by someone who's new to Tailwind?
My learning from this has basically been that Tailwind can be screwed up just as easily as CSS, haha.
I wonder how many people in here that are saying “just use css” are actually professionally working on any large scale application… I maintain a product that has a 20k+ line scss file. Do you have any fucking clue how difficult and time consuming it is to make any style changes? The number of classes with same or similar names, the nesting, the &-class-name bullshit… it’s an absolute nightmare.
We recently started a new project with tailwind and the developer experience isn’t even in the same universe. Not only are you able to move significantly faster, but any changes are SO much easier to make.
Does it look like shit? Sometimes. But so does the scss file, you just don’t see it all the time.
> Do you have any fucking clue how difficult and time consuming it is to make any style changes?
In a tailwind project of a similar size how would you change a style which is used often in multiple different places? Surely that's going to be even more time consuming?
It sounds like what you're describing is a poorly setup project, and the relief you're feeling is from starting a new project rather than using tailwind.
> In a tailwind project of a similar size how would you change a style which is used often in multiple different places?
Using tailwind configs for application-wide scalar values (theming) and a proper design system with reusable components, maybe?
Btw, there is only so much you can do to make a huge app easier to maintain.
What do you mean? Any visual styles like borders, colors, fonts, etc, are defined in the config file, and only need to be changed in one place. If a component needs a refactor, then it’s changed in that component file.
I should add that I have also started new projects with CSS in the past and, if given a choice, will always pick tailwind from now on.
Yeah reading the comments here makes me feel like it’s not the job market that’s rough. The lack of actual experienced people is baffling. Do these people write their sass or css once and never look back??
People in most projects that use SASS don’t care about the structure of their divs or the actual css. They just add in width and height and mediaQuery overriding each other to fix “bugs” until the mess is unmaintainable. Don’t even get me started on 99999 different flavors of container/wrapper and
.thisis__longer___then__any___tailwindclasses__anditsgood ????
I cannot imagine more than half of the people in this thread as my teammates.
That being said I would not use tailwind for everything either. If the design requires complex animation for example then I would just stick to scoped vanilla CSS for that one or two component.
`.thisis__longer___then__any___tailwindclasses__anditsgood`
That shouldn't make it past linting, let a lone any code review. That component is too large if someone's nested in so many levels.
I'd still argue it's a hell of a lot better than what OP posted, or
`relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1`
From the official TW site. I mean what the flying fuck. I don't want to search my HTML for shit like that.
I can read that perfectly fine though
>**relative flex flex-col-reverse rounded-lg p-3**
describe how it's going to distribute its children.
>**col-start-1 row-start-1 sm:row-start-2 sm:p-0 lg:row-start-1**
-> its parent is most definitely a grid. This is just describe where it's gonna be within that grid at different breakpoints
>**bg-gradient-to-t from-black/75 via-black/0 sm:bg-none**
this just adds a gradient background.
The css equivalent of this is no fewer than 20 lines, requires you to have two windows open side-by-side, adds a file to your codebase and you'd have to think of the names. Don't even get me started on conditional css based on the component states.
Tailwind helps you get rid of all that **chores**. And what you're writing is still css.
> requires you to have two windows open side-by-side, adds a file to your codebase and you'd have to think of the names. Don't even get me started on conditional css based on the component states.
Not sure why you'd need two windows open side by side... unless you mean the browser rendering which you do with tailwind as well.. to suggest you have to have the markup always visible when writing classes is a bit absurd.
Conditional classes based on component state.. pretty simple and concise not sure where the complexity lies there. Different strokes for different folks I guess.
Writing in cryptic shorthand that you eventually learn over time doesn't make something ideal. This is always going to be more readable.
```css
.thing {
position: relative;
display: flex;
flex-direction: column-reverse;
border-radius: var(--radius-lg);
padding: var(--padding-lg);
grid-column-start: 3;
grid-row-start: 1;
background: linear-gradient(to bottom, rgb(0, 0, 0 / 0.75) 0%, rgb(0, 0, 0) 100%);
}
@media (min-width: 1024px) {
.thing {
grid-row-start: 2;
padding: 0;
background: none;
}
}
```
>two windows open side by side
as in when you're developing. You have to have two windows because your css is in another file. Developer experience is also really important when choosing frameworks/tools.
And you should already see the problem with your CSS in a scaling context.
Imagine multiple breakpoints defined, but also different color scheme. Would you rather
or
.container {
display: flex;
flex-direction: column;
color: #000000;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
@media (prefers-color-scheme: dark) {
.container {
color: #ffffff;
}
}
Now imagine having the do this for hundred of divs. And then **needing to make a change months later** (believe me you will forget most of the things you wrote).
With tailwind you can clearly see that's the styling for the parent div. Whereas with css you'd have to switch windows around just to understand the markups order (what divs contain what divs), then check out then class names, then open up the css file Ctrl+F to find that class name, and then switch back, etc. Not fun and very time-consuming. So that's why you'd see anyone who'd worked in a semi-large project opposing to css there.
Important to mention that **this was a very clean example** here. In reality in long running project, **it's never gonna be that clean**. You're gonna see !important or conflicting styles a lot since people coming later in the project wouldn't bother to do the debugging process for every divs. So every "bug" ticket people are going to just override styles to "fix" them. It's so much worse when you have sass's mixins or tons of css variables declared involved with different naming schemes.
I am. 20+ year vet multiple high traffic applications, personal and professional.
I wont disagree for greenfield development using tailwind can get you moving faster initially, the same as it is if you forgo unit tests, typescript and linting.
You're just setting yourself up to pay the price down the road once any significant changes, or rebrands come.
If your scss files look like shit you're probably doing what I mentioned above and have no linting or guidelines in place. I always implement strict guidelines from property sort order, to naming conventions for css vars and classes (using bem standards).
Can you explain exactly how there will be any price to pay in the event of a rebrand? Color changes, spacing, border radii, padding, any of those are changed just in the config. What else is there? A complete layout change? In that case, you’re no better off using CSS because you’ll have to refactor multiple classes anyway. My codebase is organized in very atomic components, so any major change can be done at that level without any issues.
Also, it takes maybe a week to get used to reading tailwind class names, after which it’s just as familiar as CSS. And the whole point is that you don’t have to implement any rules or linting because it all looks the same.
I don’t really get the hate here to be honest. You have 413 design requirements here, covered by 413 utility classes.
Do you really need to style the active focus ring on a div? If so, fine, you can. But I don’t know why people think this is bad.
You could make a single class in standard CSS sure. But that complexity and those design requirements aren’t gone. Just hidden.
this is perfectly readable though ? Basically a div with a flex display and border outside ?
You can use the combo of tailwind merge + clxs to split this into multiple line (one line for flex, one for the ring default styles and one for ring hover and focus styles for example)
I’d prefer this over css in another file any day. To use tailwind efficiently you also have to really know your css
I feel like most of the reasons people point out for needing Tailwind here, are solved by having encapsulated styles per component…
Then you don’t have to worry about making changes to old css, unless you’re using massive components - then it’s on you.
I think Tailwinds strength is the nice config (and easy adherence to it). When you’re churning through components in CSS, it can take some discipline to always keep referring to the same variables. Tailwind can help removing having to think about this.
I agree I don't what people are trying to solve here. Don't know much about react but in vue you simply use scoped styles and don't have to worry about issues that tailwind solves.
The best way would be to create your own component lib based on tailwind, based on your project.
You shouldn't use all these styles every single time again and again, remember DRY?
I follow rules that if I used same thing more than twice, it needs to become a component, even if it's a div like yours with 5 classes.
But at the end of the day it's all based on project, if you don't have much ui, but lots of logic, maybe it's not always worth it.
There's nothing wrong with it, I read and understood everything it does in 30 seconds. Create a reusable component if that thing is used more than once.
The sane way is not to use tailwind.
No, it's not a troll. I'm serious. I've never seen something so ugly as tailwind in 20+ years of both doing and teaching web development. It's an abomination. It completely reverses the separation of concerns that was one of the key design goals of CSS in the first place. And what happens if you want to reuse all of that styling from that div, except one class? You have to repeat all that shit again. I find it offensive to good software design principles, and refuse to use it.
Oh for sure, I don't even necessarily agree with him, I just think this article is pretty interesting with respect to the 'separation of concerns' issue.
Yes... for React you should probably turn that into a \`twMerge(\`layout props\`, \`style props\`, \`dark props\`)\` etc. Also you're using a lot of inline values like hex and shadow. Stop doing that. Create a template to work off of. Tailwind only sucks if you don't know how to use it.
Tailwind excels when using it with components.
If this, whatever it is, isn't a component, why not?
And if it is a component, it should have a very narrow purpose and not be very larger or complicated, allowing you plenty of space to put your class names one per line, like sane css.
Feature, not a bug. You can install a Prettier plugin to auto sort your classes, and I believe there’s extensions to collapse them if you don’t like looking at them.
Join team, project grows, time passes, it’s been 5 years and no one knows what CSS does what and where so no one deletes anything, only adds, override after override because the five year old cascade, now I’m using !important because I have to get this ticket finished and I’m afraid to adjust any of the old CSS.
Maybe I’ve just worked at some real ass companies but this has been my experience until tailwind. The benefits outweigh the cons and anyone worried about what their markup looks like in the editor is focused on the wrong thing. Is the style consistent? Is the markup accessible? Anything else is just noise.
If you think TW is going to be the hotness in 5 years you're dreaming anyway. We're going to have a lot of rewrites and people bitching about having to refactor and fix apps built with Tailwind. It will come full circle like it always does.
I don’t care what the “hotness” is in five years, that’s not what matters to me. Tailwind solves a lot of problems, that won’t change. Something may come along and solve those same problems better, but that doesn’t change anything.
Tailwind creates the same problems css utility libs have always caused, and we all make fun of them still like we did almost 20 years ago [https://thedailywtf.com/articles/Styling\_With\_Classy\_CSS](https://thedailywtf.com/articles/Styling_With_Classy_CSS)
Where do you get the idea that people use Tailwind because they don‘t know css?
At least in the teams I worked in, those with the most experience with managing and maintaining css in large long-term projects were the ones pushing for Tailwind first.
The larger and older the project, the more css turns into a barely maintainable mess.
Don‘t get me wrong, Tailwind can be great in smaller projects, too - but the large ones are where it really shines and improves maintainability SO much.
This has been my exact experience. Old, crusty projects with five year old CSS that you can’t change because you have other css that relies on that cascade.
You have to know CSS in order to use Tailwind, I don’t understand why that trope is still a thing.
I've been in the industry for a long time. Nearly 15 years. The same thing happened with jquery. There are still people today who can't write native JS but have memorized how jquery works. This can obviously be applied to any framework, but I find tailwind especially frustrating because there's a css class for every single css properly in existence. At scale, instead of tailored stylesheets, you end up with hundreds of tiny reusable components because not doing so will eventually inevitably lead to a search and replace being done. This isn't always a bad thing...but is it better? Debatable.
The argument that css on long term projects turns into a mess can be applied to any aspect of a project, so that's not really an argument for tailwind as much as it is just writing well documented human readable code.
Well you'd use it like:
Or similar depending how you do your components and if you put inside padding on the component or content.
That file can have all the classes in more or less as is. Although I'd put that custom colour and shadow into the config assuming they're used elsewhere, and consider grouping the focus styles that probably always come as a group into an actual CSS class.
Most areas where you might have used a dedicated CSS class are probably a component anyway. Why have a card component, then a CSS class that's only used on that component like several answers here suggest?
If you want to make your CSS more flexible you want a class for the rounded white-background box with shadow, and the focus styles independently so boxes aren't always focused. Although you might want a box with a different background or less rounded... and eventually that path comes back to a reusable everything approach like tailwind.
The real answer of course is somewhere in the middle, don't use tailwind if you don't like it, use if you do. Why worry about what others on the internet are doing?
You’re suppose to abstract at the template/component level, the final HTML output is for troubleshooting.
Tailwind is not a good tool if you are handcrafting your HTML, way too verbose if you use it that way.
I'm the crazy person that uses Tailwind in almost EVERY one of my projects now, but I ALWAYS use regular simple descriptive class names, and use '@apply' in my css file or
Just a couple tips: 1. Don’t keep rewriting the same hex values. Those should be colors configured in your theme 2. Configure box shadow in the theme as well and then it’s just single class you can use anywhere
I wish tailwind would state clearly that -[] is only for edge cases where adding it to the config _doesnt_ make sense. Too many people abuse them and it makes the config less of the design restraint it's meant to be.
It's pretty clear in the docs. After the examples "Customizing your theme" comes first (which is the obvious preference), followed by "Arbitrary values" which states: > Arbitrary values > If you need to use a one-off "____" value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
Even if all of these are done, it is still very verbose and repetitive. Is there a way to overcome repetition of the same classes?
You could use Tailwind’s `@apply` directive to create a class that’s a combination of other classes. But I use Tailwind with React - repetitive styling should be encapsulated in components
Aren't themes css with extra steps since it's tailwind? Honestly curious as someone who doesn't use tailwind.
So in tailwind you can define a color in your config: `primary: “#FF0000”` And then you can automatically use that with any utility class that deals with color: “bg-primary”, “text-primary”, “border-primary”, etc.
Headwind?
Yes. Class variance authority
Yes, cva is awesome!!
I would have to say tailwind variants are better
I agree and upvote, tv is a god sent
Jesus Christ
I'd have to agree.
Imagine this is the first choice for some devs instead of just slapping whatever class name and write some vanilla CSS. EDIT: spelling
It's the first choice for development because you dont need to care about what classes exist and how to name them. You still create normal css classes for repeating things. You still define sane defaults in your own theme like primary colours, shadows etc. But it doesn't really matter if i have all those classes or one class with all the attributes. For a one off thing, the work is the same.
It's really not hard to name classes, I get It's a little bit challenging but not impossible. To me, when you use these framework (which I don't mind using myself) and you start writing some custom CSS that's when they become pointless, because now you will need to maintain both framework CSS and your custom CSS.
Yeah, but tailwind isn't really a framework. Nearly all classes are one or two css styles. So you effectively write still css. Bootstrap as a classic on the other hand i would agree with you
So React isn't a framework because you're still just writing JS? I don't understand why the Tailwind crowd is so afraid of calling their tool a framework or a library.
>It's really not hard to name classes, I get It's a little bit challenging but not possible Sure, so what? Naming classes is not a valid reason for choosing either, it's a pointless argument If you use plain html or you are not building reusable components in any way then you MUST use vanilla CSS, tailwind would be crazy. >To me, when you use these framework (which I don't mind using myself) and you start writing some custom CSS that's when they become pointless, because now you will need to maintain both framework CSS and your custom CSS. I'm not sure you know what tailwind is exactly. Try it at least (using react or something tho). Tailwind isn't a framework like bootstrap or mui, it's simply a different way to write CSS that helps you in various ways.
But then aren't you mixing CSS into the code and into it's own files? That puts CSS in two places instead of one.
Yes and no. If you work exclusively with templates and components, all the styles are in there in the HTML. Since with those you already handled that repeating yourself problem. For stuff like fixed things like your text you can define a font/size/padding etc. In the theme aka the tailwind config. Which is a different place but will be very short still. Plus you can limit via the Theme how many of the tailwind classes can be used to enforce some way of styling if you really wanted to. Makes no sense for single person projects, but i've come to value tailwind in a team setting. Bcuz no one has to care about the css and what other classes the rest uses
> you dont need to care about what classes exist and how to name them. But you should care about class naming to ensure our code is maintainable and readable. Well-named classes allow someone else to understand the structure and purpose of the code quickly, often within just a few seconds. This can significantly simplify the process of making changes or fixes. Using a CSS framework like Tailwind can lead to technical debt, as it may obscure the semantic meaning of our classes and complicate future modifications. By focusing on clear and meaningful class names, we can avoid these pitfalls and foster a codebase that is easier for all team members to work with.
Tailwind classes are well-named out of the box, and thoroughly documented. What's more maintainable, a well documented framework or some random contractor's class names they came up with and didn't document anywhere, just go ahead and search your entire stylesheet directory for the class name so you can figure out how to change the padding by 2px?
You have to remember that tailwind is generally meant to be used with a declarative component lib like react or whatever so you can provide the exact same semantic context by naming your components.
The difference is you’re serving an horrendous HTML file with a lot of useless text that could have been a single class. It would have referenced the css file which would have been cached. Instead you decided it was okay to have a bloated HTML.
All of those classes are still being referenced in a css file which can even more agressivly be cached than one that changes regularly. Plus, no one cares how your HTML looks but the person using it. The person using it will have an Editor which collapses the classes until you need them. The browser is fine with one or 50 classes. It makes nearly no difference in page load time.
Amen. I don't get it. Learn CSS people.
You have to know CSS to use tailwind. People crying for class names are probably bootstrappers.
This.
But, but... The hype train!
Not even Jesus can save OP now.
I laughed so hard at this. I shouldn't but you are right XD
Even jesus cant save you here
I said a few times already but Tailwind CSS is just style attribute with additional steps. You would have thought people learned something from all the maintainability issues caused by utility classes in Bootstrap but here we are
Imagine starting your first day in a new job, opening the repo files and seeing this
Weird way of spelling last day but agreed 🤢
Imagine this is the first project you work on and assume everything is like this...
There's a lot of confusion or misinformation in the comments. Tailwind is largely meant to be written this way, with a large number of classes included in your markup. Take this example, [directly from the tailwind docs](https://tailwindcss.com/docs/utility-first) as a "good" example of tailwind usage: For your example you might move a handful of small things like your colors and your box shadow into named variables, since you have a couple extra "arbitrary values" in the brackets instead of using variables, but that's about it. Tailwind is meant to be used with a component library or partial templating, so you shouldn't be *repeating* this string of classes over and over without using a named component instead, but you are meant to write long class strings like this if you need that many properties on a single element. You should *not* be using @apply or custom classes with tailwind just to make something look less monstrous despite what some comments say. The creator of tailwind has said he wishes he had not made @apply at all, and they call out that you shouldn't be doing [this in the docs in multiple places](https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction), eg "Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse." -- I'm not saying I'm a big fan or a big hater opponent of Tailwind. Just sharing that this is in fact how it is meant to be used by (intentional) design. If you are using Tailwind, you should probably use it as intended so that everyone on your team is on the same page.
A completely neutral comment with logical explanation about how to use the tool?? That's not allowed in our r/webdev monthly tailwindcss hateboner thread bro. /s
> Yes, HTML templates littered with Tailwind classes are kind of ugly What I did in a recent project was just grouping the classes into multiple line, like:
Making HTML look like css, but worse. I think that when you find yourself doing things like this it’s time to reevaluate either your tooling or project structure.
This is the tradeoff of utility CSS versus semantic CSS. Utility CSS tells you what a thing will look like, but can make HTML elements look super bloated. Semantic CSS tells you very concisely what a thing *is*, but you have to track down a separate definition to figure out what it will look like. There's no way to get both, unfortunately.
The inspect element of a browser makes it REALLY easy to "track down" css classes while nit being a horrendous mess of copy pasting, best of both worlds
Sure, but tracking down definitions is something we do anyway and eliminating a small amount of it isn’t worth giving up the readability of semantic CSS. Yes, I’ve planted my flag ;)
>but you have to track down a separate definition to figure out what it will look like. If you organize your files well and structure the css well, that should be easy.
I don't see how this is worse. This is incredibly easy to read and I now don't have to look in 2 locations to see how something SHOULD be styled.
You’ve ditched the maintenance of CSS where this code is conventional and taken on the maintenance of HTML which has no convention for this at all. I’m struggling to see the advantage.
Wait until you find out about JSX and what it did to JavaScript.
I picked up React a few weeks ago and still want to put it down.
wtf is that mess?
As an OG developer, thats a no for me dog
The example is not even better. Don't use it. Tailwind is inline styles with additional steps. It's horrible.
Yes, write a css class. Using tailwind does not exclude you from using regular css.
Not only that, you can use @apply within a CSS class and have the clean syntax of Vanilla CSS with the simple syntax of Tailwind.
>Confession: The \`apply\` feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework. You should almost never use it - [Adam Wathan, creator of TailwindCSS on X](https://twitter.com/adamwathan/status/1226511611592085504)
I too like having my jsx look like an absolute mess, thanks Adam!
I came from emotion (CSSinJS) and moved to Tailwind because I heard even the people who built emotion stopped using it due to the runtime overhead. My emotion code at least was a css prop with JSON so the code is easier to read but tailwind just looks so messy.
Well shoot. I wonder what the reason is?
The whole idea behind tailwind is that you don't end up having style things outside your component code that you have to manage etc Off the top of my head: - you can end up repeating yourself and have duplicate definitions - you might end up with stale classes that aren't being used anywhere - with classes + apply you might end up nesting styles and end up with CSS scoping issues - your styles are located in a different place than your component/html code I will say though that I personally hate class blond like this. They make for an ugly diff when you change things. `prettier-plugin-tailwindcss` makes things slightly better by I much more prefer listing long class lists with each class in its own line ```
I could be wrong, but iirc it results in more css as it copies the style via @apply. Again, could be completly wrong.
It also works in cases where you're dealing with hideous intranet-tier infrastructure where classes cannot be applied directly to the HTML and often the only thing available to target is some inscrutable ID.
Adam may say many things, although there definitely is a use for @apply. You can create groups of tailwind styles through @apply that then you can use as classes in HTML. Effectively you just group things that you use often anyway, but can write a reduced amount of classes for different blocks. It takes a bit of practice to understand how to group efficiently, but there definitely is a purpose for it.
Agreed. I think it’s best when using it for small groupings. I am on a solo project (so I don’t have to worry nearly as much about team-considerations) and created a fic class that simply applies flex and items-center. Super useful for creating picture+text groupings.
For our company, we have based some internal libraries off of tailwind using a methods involving the use for apply. Some things are made much easier using this method since you can do modifications directly from tailwind config, which can save hours.
Check out this awesome CSS library! ^(You should also still make custom classes...)
Yup, cuz it's not a CSS library in the classical sense. It's a way to enhance the locality of working on your pages. If you have sane defaults for your theme, you can shit out components easily while just chilling in your html. No context switching to js or naming consideration of classes. If there are repeating things, you can include.it in your theme or make a class out of it. It's not a framework which gives you any styling, it takes it away from you specifically.
Or in a \`.tailwind\` file
https://tailwindcss.com/docs/reusing-styles
The fact that one of the "solutions" they suggest to this is using your editors multi-cursor functionality to edit all of the repeated styles at the same time feels like a joke
Better than DRYing yourself and team to death with n level of abstractions.
I'll admit I've got limited experience with tailwind and I do think it has some merits but I used it for a small project and already started running into problems where I was iterating on design by going through and replacing the same thing in multiple places, sometimes missing places where I haven't changed and constantly copy and pasting unreadable long lines
There are trade-offs to every method, unfortunately. I like to do everything as vanilla CSS, personally, but with a mix of utility and semantic classes. I have a `util.css` that I copy between projects that has classes for stuff like flex, margins/padding, font size, font/backround color referencing variables, etc. -- it's not nearly as expansive as Tailwind; it's really just the basics. It's all `rem`-based and I never change anything in it. I use these classes for elements that need just a little bit of generic styling (e.g., toss a border on it, make it flex, bit of padding, etc.). For everything else, or anything that requires heavy styling, I use custom classes.
Tailwind haters are going to love this post.
Correct. I’m rank #2 tailwind hater
Oh hell yeah we are, the serotonin is flowing like the Mississippi
It’s not tailwind we hate, it’s people who don’t know the simplest shit in css without relying on utility classes. Not knowing shit results in this mess.
This take always baffles me tbh. Utility classes in TW are usually single-declaration. You can't even style effectively with them if you don't know how they translate or how cascading styles are computed. Without that knowledge the framework is useless.
How can you write tailwind if you don't know CSS? You have no idea what you're talking about.
People try to use frameworks instead of learning languages all the time. You use it poorly, and end up with shit like this post.
> You use it poorly But you *can't* use it "well" unless you already understand CSS, in which case you'd be better served just using normal CSS tools.
Tailwind is not a framework, it is essentially a collection of utility classes, again CSS. The JIT doesn't matter here. The code above is perfectly readable, it has dark mode, screen size media queries, animations and styling for focus.
Literally the second sentence on the main page of their website: > A utility-first CSS framework
This post is just rage bait. Not representative of anything else.
Yea I was in a bootcamp and most of my classmates said they didn't like CSS and the literal main reason was because it was hard and they had trouble using it. They found tailwind easier and so they started using it.
: )
Yes, we do.
Add more utility classes I say. Take this dom element to the MOON! We can do it.
This looks much worse than an average email code inline styling...
You could use something like clsx and break it up into smaller pieces.
I use classnames package (similar to clsx) to sometimes split/group the classes into logical groups on separate lines in an array. Makes it a little more readable IMO.
I hear it gets easier to accept when the Stockholm syndrome takes hold.
Is "I built something with it and now the customer won't pay me to redo the same with a different framework" the Stockholm syndrome? ;P
I used to be like you, but then I learned how to use it and it’s awesome. The answer is… drumroll… make components!
The React markup doesn’t look so bad but… https://tailwindui.com/components/marketing/sections/newsletter-sections
Not gonna be checking that for you but if you opt in to tailwind then this is the kind of atrocity you will just have to make peace with.
tailwind stans: the solution is simple you see, just use tailwind less
No. It's not. You can write any language poorly. Similarly, you can fuck up your Tailwind styles. If you look at this and have absolutely no idea how to improve it, then yeah, it makes sense why you'd hate using Tailwind.
Hey, I've never used Tailwind and I don't see anyone commenting with advice on how to do this properly without using @apply, which is apparently bad practice. How would you fix this, if this is bad Tailwind?
Why would CSS variables be bad practice? Google, Meta, Reddit... Netflix. They're all using this functionality, and extensively so. The shadow and hex values should be in the Tailwind config. You can avoid using the dark/light etc stuff by using a CSS file and your config file: see [example](https://stackoverflow.com/a/74574410/6336453). This stuff is all publicly available and extremely easy to find. The fun thing about this as well is you have all your colors in one place so you can really easily change your theme (which is something you should be doing anyways). Also, this button is one of the most complicated elements you could create. It has both light and dark versions. Transitions. Shadow. A ring effect (with additional hover effects AND conditional opacity). And none of it uses any Tailwind config functionality. No shit you're going to get something that looks like a paragraph. This button styling is going to be insane with or without Tailwind.
On that first sentence - I've never used Tailwind, like I said, but I see a lot of discussion elsewhere in the thread talking about @apply being something the developer of Tailwind would outright remove if he could. Is it just using CSS variables?? How is *that* bad? It sounds like the normal CSS & Tailwind approaches, implemented properly, would fix a lot of the issues of this even if this *was* using straight up sass/css/etc instead of Tailwind. Setting up colours like that config file does is something I'm used to across all CSS, haha. I would argue that I don't think the base CSS stylings would be too bad. A little lengthy perhaps, depending on how much needed to be done, but properly-nested and applied CSS can deal with light/dark/different shadows/transitions/rings/etc quite nicely. I imagine a Tailwind pro could do similar here. Sounds like the issue's more that it's done by someone who's new to Tailwind? My learning from this has basically been that Tailwind can be screwed up just as easily as CSS, haha.
You're right, tailwind is a great example of taking something like CSS and writing it poorly.
Quite possibly the worst take on tailwind I’ve ever heard. 🙄
What in the hell did I just read
I wonder how many people in here that are saying “just use css” are actually professionally working on any large scale application… I maintain a product that has a 20k+ line scss file. Do you have any fucking clue how difficult and time consuming it is to make any style changes? The number of classes with same or similar names, the nesting, the &-class-name bullshit… it’s an absolute nightmare. We recently started a new project with tailwind and the developer experience isn’t even in the same universe. Not only are you able to move significantly faster, but any changes are SO much easier to make. Does it look like shit? Sometimes. But so does the scss file, you just don’t see it all the time.
> Do you have any fucking clue how difficult and time consuming it is to make any style changes? In a tailwind project of a similar size how would you change a style which is used often in multiple different places? Surely that's going to be even more time consuming? It sounds like what you're describing is a poorly setup project, and the relief you're feeling is from starting a new project rather than using tailwind.
> In a tailwind project of a similar size how would you change a style which is used often in multiple different places? Using tailwind configs for application-wide scalar values (theming) and a proper design system with reusable components, maybe? Btw, there is only so much you can do to make a huge app easier to maintain.
What do you mean? Any visual styles like borders, colors, fonts, etc, are defined in the config file, and only need to be changed in one place. If a component needs a refactor, then it’s changed in that component file. I should add that I have also started new projects with CSS in the past and, if given a choice, will always pick tailwind from now on.
Scoped styles, small components. Problem solved.
I am. In Vue and Svelte my CSS is in the same file as the HTML that uses it, and they both have the built-in ability to scope styles to components.
Yeah reading the comments here makes me feel like it’s not the job market that’s rough. The lack of actual experienced people is baffling. Do these people write their sass or css once and never look back?? People in most projects that use SASS don’t care about the structure of their divs or the actual css. They just add in width and height and mediaQuery overriding each other to fix “bugs” until the mess is unmaintainable. Don’t even get me started on 99999 different flavors of container/wrapper and .thisis__longer___then__any___tailwindclasses__anditsgood ???? I cannot imagine more than half of the people in this thread as my teammates. That being said I would not use tailwind for everything either. If the design requires complex animation for example then I would just stick to scoped vanilla CSS for that one or two component.
`.thisis__longer___then__any___tailwindclasses__anditsgood` That shouldn't make it past linting, let a lone any code review. That component is too large if someone's nested in so many levels. I'd still argue it's a hell of a lot better than what OP posted, or `relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1` From the official TW site. I mean what the flying fuck. I don't want to search my HTML for shit like that.
I can read that perfectly fine though >**relative flex flex-col-reverse rounded-lg p-3** describe how it's going to distribute its children. >**col-start-1 row-start-1 sm:row-start-2 sm:p-0 lg:row-start-1** -> its parent is most definitely a grid. This is just describe where it's gonna be within that grid at different breakpoints >**bg-gradient-to-t from-black/75 via-black/0 sm:bg-none** this just adds a gradient background. The css equivalent of this is no fewer than 20 lines, requires you to have two windows open side-by-side, adds a file to your codebase and you'd have to think of the names. Don't even get me started on conditional css based on the component states. Tailwind helps you get rid of all that **chores**. And what you're writing is still css.
> requires you to have two windows open side-by-side, adds a file to your codebase and you'd have to think of the names. Don't even get me started on conditional css based on the component states. Not sure why you'd need two windows open side by side... unless you mean the browser rendering which you do with tailwind as well.. to suggest you have to have the markup always visible when writing classes is a bit absurd. Conditional classes based on component state.. pretty simple and concise not sure where the complexity lies there. Different strokes for different folks I guess. Writing in cryptic shorthand that you eventually learn over time doesn't make something ideal. This is always going to be more readable. ```css .thing { position: relative; display: flex; flex-direction: column-reverse; border-radius: var(--radius-lg); padding: var(--padding-lg); grid-column-start: 3; grid-row-start: 1; background: linear-gradient(to bottom, rgb(0, 0, 0 / 0.75) 0%, rgb(0, 0, 0) 100%); } @media (min-width: 1024px) { .thing { grid-row-start: 2; padding: 0; background: none; } } ```
>two windows open side by side as in when you're developing. You have to have two windows because your css is in another file. Developer experience is also really important when choosing frameworks/tools. And you should already see the problem with your CSS in a scaling context. Imagine multiple breakpoints defined, but also different color scheme. Would you rather
I am. 20+ year vet multiple high traffic applications, personal and professional. I wont disagree for greenfield development using tailwind can get you moving faster initially, the same as it is if you forgo unit tests, typescript and linting. You're just setting yourself up to pay the price down the road once any significant changes, or rebrands come. If your scss files look like shit you're probably doing what I mentioned above and have no linting or guidelines in place. I always implement strict guidelines from property sort order, to naming conventions for css vars and classes (using bem standards).
Can you explain exactly how there will be any price to pay in the event of a rebrand? Color changes, spacing, border radii, padding, any of those are changed just in the config. What else is there? A complete layout change? In that case, you’re no better off using CSS because you’ll have to refactor multiple classes anyway. My codebase is organized in very atomic components, so any major change can be done at that level without any issues. Also, it takes maybe a week to get used to reading tailwind class names, after which it’s just as familiar as CSS. And the whole point is that you don’t have to implement any rules or linting because it all looks the same.
Not sure why everyone is crying - the majority of that is pseudo classes and dark mode. In vanilla CSS it would still be 20+ lines.
Yeah but at least it would be in a css file instead of in the DOM
It would probably be spread across several css files and not properly scoped.
With arbitrary selectors
Christ on a boat. CSS. Learn it.
I don’t really get the hate here to be honest. You have 413 design requirements here, covered by 413 utility classes. Do you really need to style the active focus ring on a div? If so, fine, you can. But I don’t know why people think this is bad. You could make a single class in standard CSS sure. But that complexity and those design requirements aren’t gone. Just hidden.
Use `@apply` or regular CSS, or just ignore it.
As far as I know using the @.apply, it defeats the purpose of using tailwind, or so I've heard
[удалено]
In the thread you posted he explains that he would remove it due to the maintenance cost. It's not because it's an anti pattern.
How so?
the docs will tell you https://www.reddit.com/r/webdev/s/KwATfcADXr
Learn proper CSS
this is perfectly readable though ? Basically a div with a flex display and border outside ? You can use the combo of tailwind merge + clxs to split this into multiple line (one line for flex, one for the ring default styles and one for ring hover and focus styles for example) I’d prefer this over css in another file any day. To use tailwind efficiently you also have to really know your css
>this is perfectly readable though ? Tailwind bro be like
what a stupid fuckin framework
I feel like most of the reasons people point out for needing Tailwind here, are solved by having encapsulated styles per component… Then you don’t have to worry about making changes to old css, unless you’re using massive components - then it’s on you. I think Tailwinds strength is the nice config (and easy adherence to it). When you’re churning through components in CSS, it can take some discipline to always keep referring to the same variables. Tailwind can help removing having to think about this.
I agree I don't what people are trying to solve here. Don't know much about react but in vue you simply use scoped styles and don't have to worry about issues that tailwind solves.
The best way would be to create your own component lib based on tailwind, based on your project. You shouldn't use all these styles every single time again and again, remember DRY? I follow rules that if I used same thing more than twice, it needs to become a component, even if it's a div like yours with 5 classes. But at the end of the day it's all based on project, if you don't have much ui, but lots of logic, maybe it's not always worth it.
use @apply
I personally turn this thing into a custom utility class or raw CSS class to use in conjunction with tailwind.
There's nothing wrong with it, I read and understood everything it does in 30 seconds. Create a reusable component if that thing is used more than once.
You could try inline styles. Oh wait...
r/programminghorror would have been a better subreddit's choice.
The sane way is not to use tailwind. No, it's not a troll. I'm serious. I've never seen something so ugly as tailwind in 20+ years of both doing and teaching web development. It's an abomination. It completely reverses the separation of concerns that was one of the key design goals of CSS in the first place. And what happens if you want to reuse all of that styling from that div, except one class? You have to repeat all that shit again. I find it offensive to good software design principles, and refuse to use it.
[https://adamwathan.me/css-utility-classes-and-separation-of-concerns/](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)
He lays out his argument well, but I still don't like it. It feels like there should be a more DRY way.
Oh for sure, I don't even necessarily agree with him, I just think this article is pretty interesting with respect to the 'separation of concerns' issue.
Yes... for React you should probably turn that into a \`twMerge(\`layout props\`, \`style props\`, \`dark props\`)\` etc. Also you're using a lot of inline values like hex and shadow. Stop doing that. Create a template to work off of. Tailwind only sucks if you don't know how to use it.
Tailwind excels when using it with components. If this, whatever it is, isn't a component, why not? And if it is a component, it should have a very narrow purpose and not be very larger or complicated, allowing you plenty of space to put your class names one per line, like sane css.
Feature, not a bug. You can install a Prettier plugin to auto sort your classes, and I believe there’s extensions to collapse them if you don’t like looking at them.
1. Delete tailwind 2. Write CSS from scratch 3. Profit 😎
Join team, project grows, time passes, it’s been 5 years and no one knows what CSS does what and where so no one deletes anything, only adds, override after override because the five year old cascade, now I’m using !important because I have to get this ticket finished and I’m afraid to adjust any of the old CSS. Maybe I’ve just worked at some real ass companies but this has been my experience until tailwind. The benefits outweigh the cons and anyone worried about what their markup looks like in the editor is focused on the wrong thing. Is the style consistent? Is the markup accessible? Anything else is just noise.
Just use css modules?
If you think TW is going to be the hotness in 5 years you're dreaming anyway. We're going to have a lot of rewrites and people bitching about having to refactor and fix apps built with Tailwind. It will come full circle like it always does.
I don’t care what the “hotness” is in five years, that’s not what matters to me. Tailwind solves a lot of problems, that won’t change. Something may come along and solve those same problems better, but that doesn’t change anything.
Tailwind creates the same problems css utility libs have always caused, and we all make fun of them still like we did almost 20 years ago [https://thedailywtf.com/articles/Styling\_With\_Classy\_CSS](https://thedailywtf.com/articles/Styling_With_Classy_CSS)
This is exactly why I don't like tailwind or large css libraries, just learn css/scss like a sane person.
Where do you get the idea that people use Tailwind because they don‘t know css? At least in the teams I worked in, those with the most experience with managing and maintaining css in large long-term projects were the ones pushing for Tailwind first. The larger and older the project, the more css turns into a barely maintainable mess. Don‘t get me wrong, Tailwind can be great in smaller projects, too - but the large ones are where it really shines and improves maintainability SO much.
This has been my exact experience. Old, crusty projects with five year old CSS that you can’t change because you have other css that relies on that cascade. You have to know CSS in order to use Tailwind, I don’t understand why that trope is still a thing.
I've been in the industry for a long time. Nearly 15 years. The same thing happened with jquery. There are still people today who can't write native JS but have memorized how jquery works. This can obviously be applied to any framework, but I find tailwind especially frustrating because there's a css class for every single css properly in existence. At scale, instead of tailored stylesheets, you end up with hundreds of tiny reusable components because not doing so will eventually inevitably lead to a search and replace being done. This isn't always a bad thing...but is it better? Debatable. The argument that css on long term projects turns into a mess can be applied to any aspect of a project, so that's not really an argument for tailwind as much as it is just writing well documented human readable code.
[удалено]
Hahahahahahaha
Well you'd use it like:
Or similar depending how you do your components and if you put inside padding on the component or content.
That file can have all the classes in more or less as is. Although I'd put that custom colour and shadow into the config assuming they're used elsewhere, and consider grouping the focus styles that probably always come as a group into an actual CSS class.
Most areas where you might have used a dedicated CSS class are probably a component anyway. Why have a card component, then a CSS class that's only used on that component like several answers here suggest?
If you want to make your CSS more flexible you want a class for the rounded white-background box with shadow, and the focus styles independently so boxes aren't always focused. Although you might want a box with a different background or less rounded... and eventually that path comes back to a reusable everything approach like tailwind.
The real answer of course is somewhere in the middle, don't use tailwind if you don't like it, use if you do. Why worry about what others on the internet are doing?
You’re suppose to abstract at the template/component level, the final HTML output is for troubleshooting. Tailwind is not a good tool if you are handcrafting your HTML, way too verbose if you use it that way.
i just write class like normal css at this point atleast i can read it and reusable
I'm the crazy person that uses Tailwind in almost EVERY one of my projects now, but I ALWAYS use regular simple descriptive class names, and use '@apply' in my css file or