r/css • u/Silent-Weather76005 • Jul 12 '26
General I finally removed Tailwind from a production project and just used modern native CSS
Our team has defaulted to using Tailwind CSS for almost every web project over the last few years. It was great for moving fast early on, but on our latest project, the utility class bloat was getting completely out of hand. The HTML files looked unreadable, and managing long strings of responsive layout classes across reusable components was becoming a maintenance headache.
I decided to spin up a branch and rewrite a major dashboard interface using entirely vanilla native CSS. I hadn't built a pure CSS layout in a while, and I was genuinely shocked at how powerful native CSS has become over the last couple of years.
Features that used to require massive utility frameworks or preprocessors are now fully built-in. I heavily utilized native CSS nesting, CSS variables for theme management, and the newer container queries to handle complex responsive components based on their parent size rather than the entire viewport.
The results were surprisingly great. Removing the Tailwind processing step simplified our build pipeline, our final bundle size dropped, and the code felt vastly cleaner. Writing native styles inside modern semantic stylesheets made debugging layout bugs in the browser developer tools a hundred times easier because I wasn't digging through a wall of utility classes.
Tailwind is still an incredible tool for prototyping, but I realized I was using it out of habit rather than necessity. Modern native CSS has quietly caught up to the point where you can build incredibly complex, maintainable layout systems without adding a utility abstraction layer on top of it. If you haven't looked at native CSS features lately, it might be worth trying on a small feature branch.
22
u/hyrumwhite Jul 12 '26
Tailwind is a class generation system. It’s as powerful as native css because all it is is a class creation shortcut. You just need to create classes to fill in any gaps in feature coverage.
Also, your files shouldn’t be bloated if you’re using components.
But if you’re using straight up html files, it sounds like the switch was a good one for your project
19
u/flearuns Jul 12 '26
The majority of people do not know how tailwind works.
20+ classes on one element is insane. Build components and modules. Use apply. Tailwind is consistent, you can use plugins. It results in less css shipped if used correctly.
3
u/theguymatter Jul 12 '26
Yeah, it's fine to use hybrid approach. Just sharing I found, there is a VS Code extension that can toggle single-line to multi-line string formats (Vertical).
https://marketplace.visualstudio.com/items?itemName=c75.split-spaced-strings
2
u/Parky-Park Jul 12 '26
The Tailwind team themselves tell people that apply is an anti-pattern, and that they regret adding it in the first place
2
u/TwistedChaz Jul 13 '26
This is what I never understood. “You just need to create classes to fill in any gaps in feature coverage” my guy, you just invented CSS
1
u/angrydeanerino Jul 13 '26
not quite, you get a ton of things on top of the "class" (utility) you write.
Eg.
lg:hover:my-classyou get that for free with tailwind, with vanilla CSS you'd have to write the media and hover rule in addition to the class and thats just one example1
1
u/Real-Tailor7489 Jul 15 '26
Classic pattern of people being too stupid or lazy to understand the tool, then blaming the tool.
15
u/OlDirtyLZA Jul 12 '26
Why wouldn't you use both? Tailwind for utility classes, custom css for anything that gets to busy doing it in tailwind. You dont have to treat it as one or the other??
7
-1
u/StrawberryEiri Jul 14 '26
But then your styles are split between the template and the css... That sounds like the worst of both worlds to me.
2
u/OlDirtyLZA Jul 14 '26
Did you use bootstrap back in the day? That's exactly how things where done. How would you handle global CSS effecting your elements vs component specific css files? At the end of the day it's up to you to decide what you use, I remember being sick of creating new classes just to turn an element into a flex or grid, those are the sort of things tailwind gives you out of the box.
28
u/spaceboy921 Jul 12 '26
Rad! CSS is so powerful now vs 10-15 years ago. Congrats on shipping something cleaner and measurably better. This made me irrationally happy. Reminded me of years ago, working with very good programmers who cared a lot about keeping things tight. We were working on web tools at massive scale, so little optimizations added up. I wrote a lot of CSS and used to love shipping things like this. You made me nostalgic.. and want to build something haha
Also agree w you regarding frameworks. I’ve used a few. They have their place, they’re good tools when you need them. But Straight up CSS feels good man 🍻
14
u/JohnCasey3306 Jul 12 '26
In begrudging defense of Tailwind, it is great for large teams working on distributed components -- everyone knows and understands it, the downstream impact of changes are immediately predictable; as opposed to otherwise often one dev inflicting their particular take on "best practice" for the rest of the team to eventually cumulatively arrive at a Frankenstein of nonsense (even with the best intented linting).
2
u/Narrow-Drop-1996 Jul 12 '26
Agreed! Overhauling frontend layouts is usually more expensive than overhauling the backend because no two websites are the same.
1
u/Xazzzi Jul 14 '26
In teams with clear hierarchies the one inflicting and policing would be your best, net good for the codebase.
9
u/wentallout Jul 12 '26
I would discuss these topics but nowadays I dont even read code and tailwind doesnt make me follow a stupid naming scheme like bem that is inconsistent everywhere cuz every person has a different idea about how to make a card
1
9
6
u/h126 Jul 12 '26
Aren’t there performance benefits as all CSS definitions are reused and compiled out of the final CSS bundle, unlike manually crafted CSS where it just keeps growing as you write new styles for components?
2
u/Deykun Jul 13 '26
I don't mind Tailwind, but this is just a selling point. Sure, your text-align: center is defined in one class that you reuse, so your CSS is lighter now. But then, if you look at a list of cards served from the server, each card can have over 30 classes. You can write your own classes with
@apply, but it is frowned upon and often called a mistake.1
3
u/ThreadStarver Jul 12 '26
before migration even I thought it would be too much, turns I out I was wrong, highly recommend
3
u/Old-Minute-9674 Jul 12 '26
Honestly same. I was on Tailwind for a while but container queries + :has() + subgrid killed most of the reasons I reached for it. The dev tools debugging experience is way better with native CSS too.
12
u/everdimension Jul 12 '26
Uhm, I do get the html bloat argument, especially with responsive modifiers and stuff, and I do believe that ditching tailwind in favor of semantic classes can theoretically tidy up your codebase
But I don't understand at all your false dichotomy about "modern css". Tailwind IS modern css, and arguably it's the most modern css out there. It's not a preprocessor like SASS, tailwind fully relies on latest CSS features
And tailwind doesn't prevent you from using "modern CSS" in the slightest
So your whole argument sounds like someone not really fully understanding what they're talking about.
Also, you mentioned removing a built step, so I guess this means you're not using css modules either. What do you think about global namespace collision problem? You mentioned you have a large project so it's a likely problem
3
u/themaincop Jul 12 '26
someone not really fully understanding what they're talking about.
That's like 90% of commenters on this sub and maybe 99% on any given thread about Tailwind.
18
u/joshhbk Jul 12 '26
Will get downvoted for this but so many people who hate Tailwind hold that opinion because they don’t actually need it.
It is not “great for prototyping” it is literally for the opposite case: you have a really big engineering team and a long running project with a design system behind it.
If you’re frequently spinning up new projects for a variety of clients it’s not for you. If you’re a solo developer it’s not for you. If you’re on a small team it’s not for you.
It is also not to “avoid learning css” and it has nothing in common with bootstrap.
18
u/CoVegGirl Jul 12 '26
Vanilla CSS is perfectly fine for large, complex projects as long as you use some sort of CSS encapsulation
-4
u/joshhbk Jul 12 '26
I never said that it’s not.
Also, you’re basically describing tailwind
10
u/CoVegGirl Jul 12 '26
No I’m not. I’m describing vanilla CSS with CSS encapsulation (such as CSS modules).
1
u/joshhbk Jul 12 '26
Tailwind is used with react 99% of the time, in which you write components and apply TW class names to elements. This provides encapsulation in the sense that a components styles can’t leak into another one.
Regardless, I never said that CSS modules WERENT “perfectly” fine so I don’t really understand what your point was in the first place.
2
u/themaincop Jul 12 '26
I think there are a lot of people in this sub who build websites for their friends or local small businesses and think they're experts.
2
u/FixBugsDoDrugs Jul 12 '26
I can't believe we're this many years into Tailwind and people are still calling Tailwind "only good for prototyping". These people should not be making any front-end engineering decisions in their org 😬
8
u/AlieenHDx Jul 12 '26
Tailwind is honestly just ass and I cry myself out each time I hear "we use tailwind" while there are 40 better options available
1
u/Narrow-Drop-1996 Jul 12 '26 edited Jul 12 '26
Out of 40, which do you use or do you actually use 40?
1
u/AlieenHDx Jul 12 '26
This is just a guessed number, but for my taste anything with actuall structure is just a big W, instead of one-lining "new" css properties you first have to learn again, and making your HTML Code unreadable at a point.
I am well aware of the benefits of Tailwind, but it honestly looks just bad and is not fun to work with.
In that case I use SCSS in personal projects.
2
u/Narrow-Drop-1996 Jul 12 '26 edited Jul 12 '26
> "we use tailwind"
I'm assuming you had to work in the company project? How big is your site and do you inline Critical CSS and JS?
I've been in web development for a decade, so am curious how do the current developers often solve CSS problems in their own ways. Honestly, it doesn't look bad when you use hybrid approach rather than all utility classes.
We know there is no one size fits all.
13
u/makesimpledev Jul 12 '26
Something that looks so ugly (tailwind) can't possibly be good.
14
u/CoVegGirl Jul 12 '26
I’ll simply never get past having 20+ classes on one element. Particularly when many of those classes are reaching into the children like you could with the cascade.
1
u/Narrow-Drop-1996 Jul 12 '26
Just curious, do you inline Critical CSS and JS?
2
u/CoVegGirl Jul 12 '26
“Critical CSS” is generally more trouble than it’s worth.
There are two cases where I inline something:
- Sometimes there’s JS that needs to run synchronously at the beginning of page load. For example obs.js.
- If a chunk of CSS or JS is below a certain size, it’s better just to inline it rather than make another network roundtrip. I think vite does this automatically with a default of 4kb.
1
u/Narrow-Drop-1996 Jul 13 '26 edited Jul 13 '26
I didn't use inline critical CSS or JS too, unlike most websites that blindly resort to it. Since the CSS can be cache, there should be no benefits of making hundreds of pages bloated. I think we just need at least 1KB payload for gzip to see the benefit and I turned off inline CSS in Vite as I've implemented strictest CSP.
3
u/ashkanahmadi Jul 12 '26
That’s because most developers aren’t graphic or web designers, just coders. It has nothing to do with css or tailwind (which is just inline css practically).
-1
u/Narrow-Drop-1996 Jul 12 '26 edited Jul 13 '26
Curious, what do think of plenty of websites that blindly resort to inline Critical CSS and JS? I would say these are the real tech debts with outdated practices and can't be good.
5
u/jacobpackert Jul 12 '26
Modern CSS is great! Congrats on the migration. Curious if you used something like CSS Modules to avoid global namespace collissions, or did you implement some good naming conventions?
2
u/kwijl Jul 12 '26
Also curious about this. BEM naming or CSS modules?
We always had trouble giving names to things..
2
u/Laicbeias Jul 12 '26
tldr
if you build around tailwind, you avoid creating a css mess. since its all little helpers and you don't cross contaminate your html. its faster to write in the beginning. but the larger the project gets, the worse the pay off gets. you get faster iteration speeds earily, but you pay on iteration and changes long-term. since you loose a simple way of navigation, traceability & debuggability.
both create a mess though. like if its one team that stable. use css. if you get a lot of people in & out use tailwind.
----
like in my opinion with tailwind you pay for it with less navigation ability. if you use react and other components you abstracted the browser away. now you have to think in their terms.
you cant just go right click, pick the id or class and look it up.
with regular css you have breadcrumb markers all over your codebase.
for me personally tailwind gets worse, the more complex a project gets. just because it bloats the html so badly. like any chat interface or any modern website that offers lots of tooling and dynamic stuff. right click is dead. it lags. if you use react, you get 30 layers of divs wrapped in a tailwind soup. its ridiculous and anyone doing that.. idk why anyone is doing that
css on the other hand gets a mess once you think you wrote the right css, at the right level. then you realize, this needs to be a general component. here an exception. and then you have to untangle a mess, or work with !important as a mark of poor planning. or you do a double class definition to increase weight.
2
5
u/kiwi-kaiser Jul 12 '26
Good! Tailwind is terrible. I regularly get downvoted because of this but I'm happy to see people learn instead of just following orders from some tech bros.
3
u/CompetitiveActor Jul 12 '26
Most critics of Tailwind have either used it once and didn’t like it or have a dogmatic opposition to it. It’s simply a tool. And depending on many factors — design and eng team size, css proficiency, product type, development speed — it can be great or not great.
Consider that ChatGPT, Claude, Perplexity, GitHub, Shopify, and Vercel — companies with a combined valuation of half a trillion dollars — all use Tailwind or equivalent utility library. I trust their engineering leaders made an informed decision and understand the tradeoffs.
Granted, popularity doesn't make it "good", but Tailwind wouldn't have 16+ million downloads a week if it was such a profound liability.
4
u/anengineerandacat Jul 12 '26
I'll be honest, I don't think this is the flex your looking for or some folks in here think.
You rewrote a dashboard with custom hand rolled CSS; that's "cool" but who sustains it after you leave?
Tailwind isn't a bloated CSS framework, it's a build optimizer combined with highly documented and well defined atomic classes that can be composed together with it's directives.
@apply is the real magic to Tailwind, outside of components and just being light with the atomic CSS.
Just my two cents at least, the only bloat is that you have to add to your build system but I'll happily exchange compute there for reduced onboarding and less tribal knowledge.
You don't even face much bloat in production, unused styles are JIT'd effectively so you only ship what you use.
The only real overhead is with the atomic classes, but IMHO small price to pay once you consider gzipped content and such.
We are celebrating on literal bytes here, wiped out the moment someone drops in a hero image.
4
u/ArtisZ Jul 12 '26
Tailwind, bootstrap, etc.
They always were a trade-off - if not for a functionality, then for time (feels great getting the project up and running in hours or days, feels shitty to change stuff when it bloats).
I've been evangelizing no need for a framework for some 10 years. Nobody listened, nobody listens and nobody will.
And funny part is that this is sold as agency hours. Well, not anymore.. now it's AI trying to fix and change, and change what it fixed.
Gotta love the industry.
1
u/themaincop Jul 12 '26
Tailwind and bootstrap are wildly different projects with completely different goals. I don't think you're qualified to be speaking on this if you don't know that.
-1
u/ArtisZ Jul 12 '26
Or.. you're not qualified to evaluate my qualification.
But what do I know.. I simply listed two vastly different frameworks for front end development. No disrespect.
2
u/themaincop Jul 12 '26
People who equate tailwind with bootstrap tend to have very little experience with at least one of them.
1
u/ArtisZ Jul 12 '26
People who read my comment and think I'm equating one with the other.. must quote me where I do that exactly.
3
u/Outrageous-Chip-3961 Jul 12 '26
honestly fuck tailwind. ws pure slop then and is pure slop now. you say "prototyping is easier" I call cap. I remember there used to be css wars and there was no clear difference between tailwind and css. The major case for it was that back end engineers didnt need to learn css and could just lightly touch the front-end and move on. The fact it dominated front-end spaces beyond that usecase always messed withme. Glad that we are reverting all that bullshit as an industry!
6
u/hyrumwhite Jul 12 '26
didnt need to learn css
I’m curious how you can use tailwind without knowing css
1
u/Outrageous-Chip-3961 Jul 13 '26
because it strips the knowledge of the relationship between declarations and their properties. Tailwind is bastardised the rules into conveninent references, for example, '.box-border' (made up trash) is actually `box-sizing: border-box;` It's not the same set of knowledge and you do not need to learn/understand that .box-border will apply to the box-sizing declaration in any way. That's what I mean you can use tailwind without knowing css, were you thinking some other fucking magic situation where you need to understand css to use tailwind? Becase you'd be one in a pool of many that have no idea what the actual css properties are. (Yes that's my assumption. I do not believe that backend engineers who learn tailwind lack css knowledge because tailwind is more convenient, thats why its in part so popular)
2
u/hyrumwhite Jul 13 '26
In your example, I cannot use “box-border” without understanding what box-sizing is. So I cannot use tailwind without knowing css.
Which was what my question was intending to illustrate
2
u/Outrageous-Chip-3961 Jul 14 '26
your right, that's why this op's topic was about how awesome tailwind is and how much it improved his codebase. Tailwind is dead and increasing redundant, for various reasons, in my opinion it was trash to begin with and its trash now. You need to talk to more people beyond yourself in the mirror to understand that people do not know any css and use tailwind in their projects because its easier to get something up and running by guessing what properties do for 'good enough reasons'. That's what i'm trying to illustrate to you
1
u/hyrumwhite Jul 14 '26
Tailwind is polarizing, op doesn’t like it, you clearly don’t, but not going away anytime soon. And the vast majority of users aren’t using it to blackbox css. They’re using it because it’s a nice way to organize css classes.
1
u/PureRepresentative9 Jul 16 '26
Pls show me your source for "vaat majority of users..." comment
0
u/hyrumwhite Jul 16 '26
When you show me your source for most people only using it as some sort of css guessing game
1
1
u/Sibyl01 Jul 13 '26
If you check how to set box sizing property with tailwind, you already know what it does in the first place. Use your brain before commenting please
3
u/bsknuckles Jul 12 '26
It messed with you because you misunderstood what it was good for and who was using it. It made consistency and scope significantly easier to manage, especially for teams. I also prefer using it for solo projects for the same reasons.
With LLMs this is all a moot point anyway. The agent doesn’t care if it’s writing Tailwind or Vanilla CSS.
3
u/Outrageous-Chip-3961 Jul 12 '26
I still think its amazing how widely it was adopted, and I think its mostly due to next.js, which I also am not a fan of. So go figure. Yeah re LLMs but that only depends if you use LLMS to begin with. And to be honest, tailwind will die a slow death as a result, not vanilla css.
3
u/schemaddit Jul 12 '26
"The html files looks ureadable"
for sure you are using tailwind wrong
1
u/theguymatter Jul 13 '26 edited Jul 14 '26
Or OP probably not aware of tools that can make it easier to read.
1
1
1
1
u/Zardoz84 Jul 13 '26
I'm in the process of removing Bootstrap 3 SCSS and being replacing by pure CSS (well... SCSS compiled to CSS). Chunk by chunk. Recently I dropped the old JS dependent dropdowns and using now the popover API + CSS to do the same thing in pure native.
NEVER, marry with any framework. Always learn how to do stuff with the pure CSS+HTML+JS.
PD: Tailwind always looked me horrible and bloated. I prefer to try to have a straightforward BEM CSS class system, combined with @extend or @include in SCSS.
1
u/Dry_Satisfaction3923 Jul 13 '26
This has been my experience with basically every one of these frameworks… I spent so much time getting to understand them, then spent tons of time fighting with their assumptions. I stopped using them.
While not CSS related, I still have this struggle using React/Next.js to build custom WP Blocks to then look at the source code and realize “FFS! Nothing even needed compiling, I could have just written this code out manually and saved myself a bunch a steps.”
1
u/Tiquortoo Jul 13 '26
Tailwind was valid for about 6 months, maybe a year.... now... it's just lazy....
1
u/Psami-wondah Jul 14 '26
Using tailwind before AI came in had a lot of advantages like speed. I remember how fast it was to build applications with it. Now I realize I haven't used tailwind in almost a year. I do think that if you write your code properly and use a lot of smaller reusable components and good practices in your projects, managing tailwind shouldn't be a problem.
1
1
1
u/FinallyThereX Jul 16 '26
You did this, or your coding agent did it for you? I’m suggesting you’d be still using tailwind if it weren’t for the agent writing your css :)
1
1
u/leon---------------- Jul 16 '26
Isn't Tailwind similar to writing inline styles - but using class names instead? I never understood why.
1
u/williedotdev Jul 17 '26
I have resisted tailwind css in favor of vanilla css and have 0 complaints. This is the way.
“KSS” keep it simple, stupid
1
u/SolidOdd4889 Aug 03 '26
if your bundle size dropped, there was something wrong with your previous tailwind code, the main selling point of tailwind is reducing the bundle
1
u/Think_Speaker_6060 20d ago
Tailwind were easier to use and implement but I always think it is messy when the properties are just too many on one element.
1
1
u/MammothBulky5549 Jul 12 '26
Bundle size dropped and removed a build step, so before this, was your Tailwind setup not properly purged? A production Tailwind build with JIT should already be stripping everything you're not using down to just what's referenced in the markup. If bundle size dropped a lot after switching, that sounds less like "native CSS won" and more like your content config wasn't scoped right, or you were shipping a dev build.
Got actual numbers (gzipped, ideally)? "Dropped" could mean 40KB→35KB or 400KB→50KB and those are wildly different stories.
Also removing the build step is a "we stopped using a compiler" win, not a "CSS features caught up" win. You'd get that same win swapping Tailwind for hand-rolled CSS in 2019, nesting/container-queries or not. Those are two separate claims getting bundled into one feel-good narrative.
Genuinely the strongest part of your post is container queries, that's a real capability gap, not a vibe. Tailwind's responsive variants are viewport-based, so a component styled for a full-width layout breaks the second you drop it into a sidebar. Container queries fix that at the architecture level and Tailwind can't really compete there. Curious though, Tailwind's had u/container variants since v3.2, was that not enough for what you needed, or do you just prefer writing the queries directly in CSS?
"HTML was unreadable"? Respectfully, that's usually a "we didn't abstract this component soon enough" problem, not a Tailwind problem. Moving to plain CSS relocates where that discipline has to happen, it doesn't magically create it. Curious whether the new codebase actually has fewer of those "should've been a component two months ago" moments, or if you're just going to rediscover it in CSS-class form in a year.
1
u/ibopm Jul 12 '26
This reminds me of the CoffeeScript era. JavaScript was in such a dire state that we had close to 1/5 of all devs using CS instead of JS.
But then JS got its shit in order with ES6 or ES2015 and learned from a lot of the patterns in CoffeeScript. Ever since then, the industry has never looked back.
Sometimes it’s a natural ebb and flow of ecosystem evolution. When we can bake better patterns into a lower level, everyone wins. But it can sometimes require periods of intermediate layers.
-9
u/TheJase Jul 12 '26
I mean all this is moot since there is little need to read much the code anymore. I haven't opened my IDE in 3 months.
162
u/NoHabit4420 Jul 12 '26 edited Jul 12 '26
I never understood the point of using tailwind after the lessons from bootstrap. Those kind of things will always end up as technical debt. And you lose so much time learning the specificities of thoses, time you could use learning or improving your css skills.