Tailwind's awesome. I'm switching away though.

MMaximilian Schwarzmรผller
์ปดํ“จํ„ฐ/์†Œํ”„ํŠธ์›จ์–ด์ฐฝ์—…/์Šคํƒ€ํŠธ์—…์ž๊ฒฉ์ฆ/ํ‰์ƒ๊ต์œกAI/๋ฏธ๋ž˜๊ธฐ์ˆ 

Transcript

00:00:00for some of the new projects I'm working on, for most of my new projects I'm working on now these
00:00:05days, I actually switched away from Tailwind. I'm not using Tailwind in those projects anymore,
00:00:11also not Chatsian, therefore. And there is a reason. And the reason is not that Tailwind is bad,
00:00:18of course. Quite the opposite. It's an amazing library. I want to be very clear about that.
00:00:22And I kind of also feel bad about making this video, this episode here, because
00:00:27only a few weeks ago, I talked about the huge financial problems Tailwind was facing back then.
00:00:32Now, since then, thankfully, things got way better. Many new sponsors jumped on board. And now I think
00:00:38they're in a much better situation financially. Because of course, obviously, Tailwind is amazing.
00:00:43And there are people working with a lot of heart and energy on that project. And my point is not
00:00:49that it's bad, or I want to convince anybody not to use it. I mean, I'm just using this channel to
00:00:56share my thoughts, my opinions, and some insights into how I work. So I thought that might be
00:01:01interesting. So why am I not using Tailwind then, if I think it's amazing? Well, I gotta take a step
00:01:07back. A couple of years ago, before we had the AI revolution, or before AI got that good at coding,
00:01:15I use Tailwind like most people, I guess most developers everywhere. For one main reason,
00:01:21though, because it allowed me to iterate quickly on the code. You know, I never really used Figma
00:01:28or other tools like that. Also, of course, because I'm in the situation that I'm mostly working alone.
00:01:34And if I'm working alone on my projects, I don't really have to use those design tools. For me,
00:01:40it always was quicker to iterate on the science just from directly in the code. I could write code.
00:01:45And with Tailwind, since you have your classes in line in your DOM in your JSX code, you could
00:01:50quickly update that code, update those styles, and try out different styles. Try tweaking that margin.
00:01:57And that was just a very, very efficient flow. And that was the main reason for me and maybe also
00:02:04for some other developers why I was using Tailwind. I know for a decent amount of other developers,
00:02:10maybe the majority, another strong reason is that they just hate CSS. I know CSS is not popular
00:02:17amongst web developers. And I get why. It can seem very complex. There are hundreds and thousands
00:02:23of properties and values. And yeah, it can be daunting. Now, I will say, though, modern CSS
00:02:31has come a long way. Many things are easier now than they were in the past. I mean, Flexbox is not
00:02:37new at all anymore, but it made a lot of things easier. And now think of Flexbox in other areas
00:02:44where deriving colors got way easier than it used to be. You have relative colors now in CSS. And
00:02:51by the way, on my Akatamine channel, I launched a couple of videos where I talk about modern browser
00:02:55and CSS features like colors and relative colors or the container queries, which are also amazing
00:03:01for building dynamically resizable components that don't depend on the viewport, but on the space
00:03:08that's available to the component. So CSS has come a long way. Now, the thing is you can use all these
00:03:14modern CSS features also with Tailwind, essentially, or most of them, but you can also write vanilla CSS
00:03:23and you can do that even easier now with AI, of course, because even if you hate using CSS,
00:03:28knowing about certain features and their browser support can be enough. You can point AI at the
00:03:34features you want it to use, add some docs, some MDN articles that explain those features, and AI
00:03:39can write the code for you. You might wonder why you would do that. Why not just use Tailwind? I mean,
00:03:45it has all these modern features too, for one and a half reasons, I would say, at least for me.
00:03:51The less important reason is that Tailwind might not always support all of the latest features,
00:03:58and more importantly, AI certainly doesn't know about all Tailwind features. I mean, Tailwind has
00:04:05a lot of features, but AI doesn't use all of them. It always uses the same few classes and often even
00:04:13an old class syntax, so you're missing out on certain features here. Now, the same can happen
00:04:17for you if you're using vanilla CSS, of course. If you don't tell the AI to use a certain feature,
00:04:22it just might not, but you can learn about the few most important CSS features you want to use and
00:04:29then tell AI to do so, but of course, I get the point. You could also do the same for Tailwind and
00:04:34just tell AI to use certain Tailwind features. It just might be easier to just name a couple of key
00:04:40CSS features than Tailwind classes, but again, that's not my main point. My main point is
00:04:48that I have always tried to reduce the amount of libraries I use in my projects,
00:04:53and the reason for that is twofold. For one, I create educational content, so I'm used to
00:05:01external or extra libraries being a bad thing, because if I create a course about React,
00:05:07and in that course, I also use Tailwind, if there is a breaking change in Tailwind,
00:05:12a lot of parts of my code or of my course suddenly start breaking when I get a lot of questions by
00:05:17students, even though the main topic, React, might not have changed. I get that this is a very niche
00:05:23problem that affects me, but not most websites, though. But even if you're building a normal
00:05:29website, having as little third-party libraries in there as possible and reasonable is a good idea,
00:05:38I would argue. Now, I will also say that it's not a good idea to absolutely force every library out
00:05:44there. There is a good reason to use certain libraries. I mean, if you're building a website
00:05:50that has a rich text editor, using something like TipTap makes a lot of sense, I would say,
00:05:54because you can build your own editor. Now, with AI, it's easier than ever to some degree,
00:05:59but you will also run into a lot of edge cases or problems you then have to solve yourself. With AI,
00:06:06sure, but also AI doesn't get everything right. You know that if you worked with it. So
00:06:11there are reasons to use third-party libraries. I'd just say that styling, as I explained,
00:06:16is something that is actually replaceable. Again, not saying that everybody should be doing it,
00:06:21but for me, that works quite well. And therefore, that is one library that I can get rid of because
00:06:28I don't mind reviewing the CSS code AI gives me and fixing CSS and styling problems with raw
00:06:37CSS when things go wrong, because of course, things will go wrong at some point when using AI.
00:06:44But I don't mind that. If you absolutely hate looking at CSS code, that will not be an option
00:06:50for you, obviously. But for me, I therefore can get rid of the Tailwind library. I can get rid of
00:06:56ShadCN, for example, because I built my own components. And ShadCN, of course, is not a
00:07:00traditional library, but it does use RADIX UI under the hood, a library which has a questionable
00:07:08maintenance status now, as far as I know. So there you then have the actual problem why I want to
00:07:16avoid libraries even when not talking about educational content, if it makes sense. Every
00:07:21library you add to your project can also become a liability if it stops being maintained. At that
00:07:29point, security issues might not get fixed anymore. Bugs might not get fixed anymore. Styling bugs,
00:07:35for example, with Tailwind. New features might not be added anymore. If there is a new CSS feature
00:07:41and Tailwind weren't maintained anymore, of course it is, but if it weren't maintained anymore,
00:07:46then you might never be able to use that feature. And I mean, we kind of were close with Tailwind.
00:07:52That video which I created where I talked about their problems, there is a post by the main Tailwind
00:07:58creator where he says if they can't figure out this financing problem, Tailwind might become
00:08:03abandonware. Maybe that was a bit drastic, maybe also done to get more attention. But nonetheless,
00:08:11one problem you always have with most third-party libraries is that they might not be maintained
00:08:17anymore in the future, depending on who's working on them in the first place. And that's why I
00:08:22personally like using vanilla CSS again also. And that's important here because I always did so.
00:08:28And again, I can't emphasize it enough. I want all the best for Tailwind and I'm still using it
00:08:35in many projects. It's not like that. I don't hate it. It's just one thing where I'm experimenting
00:08:41with not using it in some projects. And no matter if that's Tailwind for you or something totally
00:08:46different, I just would โ€“ and that was true before the AI era too โ€“ I would always consider twice
00:08:53before using a third-party library. There are many good reasons to use them. For example, better auth
00:08:57for authentication is amazing. I would definitely do that. But if there is a library you can replace,
00:09:04it might be worth a second look or thought, I guess.

Key Takeaway

While Tailwind CSS remains an excellent tool, the speaker is opting for vanilla CSS in new projects to minimize third-party dependencies and leverage modern browser features alongside AI-assisted coding.

Highlights

The speaker is transitioning away from Tailwind CSS for new projects despite acknowledging it as an amazing and high-quality tool.

Modern CSS features like Flexbox, relative colors, and container queries have reduced the necessity for utility-first frameworks.

AI tools have made writing and maintaining vanilla CSS significantly easier for developers who previously found it daunting.

A primary motivation is the desire to reduce third-party library dependencies to avoid 'abandonware' risks and maintenance liabilities.

For educational content creators, fewer libraries mean fewer breaking changes that can disrupt courses and confuse students.

The maintenance status of underlying libraries, such as Radix UI used by ShadCN, raises concerns about long-term project security and stability.

Timeline

Introduction and the State of Tailwind

The speaker opens by revealing that they have stopped using Tailwind CSS and ShadCN for most of their current new projects. They emphasize that this decision is not a reflection of Tailwind's quality, which they describe as an amazing library with a dedicated team. Recent financial concerns regarding the project have improved due to new sponsors, placing it in a much healthier position than just a few weeks prior. This section establishes that the shift is a personal choice based on workflow and philosophy rather than a critique of the tool itself. It sets the stage for a deeper discussion on why a developer might move away from a popular industry standard.

The Original Appeal of Tailwind and Modern CSS Evolution

Before the rise of advanced AI coding assistants, Tailwind was the speaker's preferred tool because it enabled rapid iteration directly within the code. Since the speaker often works alone, bypassing design tools like Figma made inline styling via Tailwind classes highly efficient. However, the speaker notes that CSS has evolved significantly with modern features like Flexbox, relative colors, and container queries. These native browser capabilities now solve many of the layout and styling problems that previously made CSS feel daunting or complex. The shift suggests that the gap between framework convenience and native capability is narrowing as the web platform matures.

Leveraging AI for Vanilla CSS Development

The speaker explains how AI can bridge the gap for developers who dislike writing CSS by hand by generating vanilla code based on modern standards. One specific issue mentioned is that AI often relies on older Tailwind class syntax or lacks knowledge of the very latest framework features. By pointing an AI at modern MDN documentation, a developer can ensure they are using the latest browser features without needing a framework as an intermediary. While this requires a basic understanding of CSS properties to guide the AI, it offers more flexibility than being restricted to a library's specific implementation. This section highlights how AI is changing the cost-benefit analysis of using third-party styling abstractions.

The Risks of Third-Party Library Dependency

A core philosophy for the speaker is reducing the total number of libraries in a project to minimize potential points of failure. For an educational content creator, every extra library is a liability because breaking changes in those libraries can render old course material obsolete. Beyond education, even general websites benefit from fewer dependencies because every library requires ongoing maintenance and updates. The speaker acknowledges that complex tools like rich text editors still justify using libraries like TipTap because of the many edge cases involved. However, they argue that styling is an area where a developer can reasonably replace a library with native code to gain more control.

Maintenance Concerns and Long-term Stability

The discussion concludes with a warning about 'abandonware' and the security risks associated with unmaintained libraries. The speaker mentions Radix UI and the past financial scares of Tailwind as examples of why relying on external code can be risky. If a library ceases to be maintained, bugs go unfixed and new browser features remain unsupported within that framework's ecosystem. The speaker encourages developers to think twice before adding any third-party dependency, even while praising tools like 'Better Auth' for their specific utility. Ultimately, the move back to vanilla CSS is framed as an experiment in building more sustainable, independent, and future-proof web projects.

Community Posts

View all posts