Tomasz Guz

@vponamariov to be precise - we can achieve this in pure CSS for a long time using grid-template-rows, which has much more support 🙌.

One CSS property just killed the need for JavaScript in every FAQ accordion you've ever built. Seriously. The property is interpolate-size: allow-keywords

Full article here: kodem.dev/ai-website-opt…

For years, semantic HTML and accessibility used to be "nice to have". Thanks to AI these things might be more important than ever, and tokens-usage optimized markup may change the game. 🔽 find a full article in reply

I completely agree that this is a great property, but just to notice: we can already make similar thing using grid-template-rows transition from 0fr to 1fr. Of course, this approach requires an additional wrapper, but it's also great to make smooth height transition without JS and without defining a fixed maximum height 🙌.

This is a really cool CSS property, although not yet baseline. It basically enables smooth transitions to and from intrinsic size, which wasn't possible before, using only CSS. See the demo here 👇 iprodan.dev/interpolate-si…

Ready-to-use boilerplate available on GitHub: github.com/kodemdev/backs…

"Why do we remove cascading and sheets from Cascading Style Sheets?" That question led to backstay.rules - a concept for a single, consistent approach to working with SCSS across various projects and stacks. More below 👇 (links in comments)

The full article, along with a description of the rules, can be found here: kodem.dev/organize-scss-…

Saying we don’t need GSAP’s ScrollTrigger anymore would be clickbait. But scroll-triggered animations in pure CSS open up huge possibilities.

So, to sum up, you felt offended and I am suggesting that you belong to the group of people for whom working directly in CSS is the least pleasant thing. It's a fact that Tailwind is a godsend for people who find CSS development a chore. Just like the reason for all inventions like CSS in JS. If you don't see that, you've missed a ton of discussions and articles detailing Tailwind's drawbacks. And more importantly, you probably didn't have to deal with the support and development of projects with Tailwind. I recommend finding a few such articles on Medium or Reddit and reading the comments. If this offends you, I apologize. I don't know how you work. I was referring to "many developers," not all. I still maintain that "the only advantage it offers is the ability to avoid touching CSS files by writing inline styles." I also maintain that I'd love to hear what other, significant reasons you think people choose Tailwind are. And furthermore, for me "built-in design system" sounds like a marketing phrase, which is why I also asked what exactly it means in your opinion and how you use it. However, I know you won't, and for me, further discussion is pointless.

Let’s try again. You said, "The only advantage it offers is the ability to avoid touching CSS files writing inline style" That’s clearly not the only advantage, which would be fine if it were just your opinion. But you continued: "which is the most important feature for many developers, as writing styles is the least enjoyable part of their job." So you weren’t speaking only for yourself, you were speaking for others. And to me, that shows a lack of knowledge on this topic. Then I brought up its built-in design system, which you seemed not to know about, or at least didn’t know Tailwind itself calls it that. That’s why I shared the docs link. That’s also where I proved that you lack knowledge on this topic. You also assumed I didn’t know what a "design system" is, even though my wording matched the Tailwind docs. I don’t need to list my "credentials" on design systems because I’m not critiquing a design system. That said, I did offer to critique yours, which would matter if you had shown me your work.

I've come to the sad conclusion that @⁠apply in Tailwind is a big anti-pattern. With enough complex utilities, your CSS can balloon to hundreds of kB, bloating the CSSOM and hurting runtime rendering performance, not just network. It’s a bummer because I was really excited to use the new @⁠utility feature to build framework-agnostic components, but it doesn’t scale well. Best approach is inline utilities as usual, plus a CVA-like library when you need reuse. I’m working on something to make that easier.

Oh man, I think the problem is more serious judging by the way you speak, so one last time. I wrote about a problem Bootstrap solved, a problem it no longer has to solve because the world of CSS has moved on. I wrote that Tailwind doesn't solve any such problem, and that's true - it's simply a CSS wrapper with a defined behavior. After that, you decided that I didn't know Tailwind, and then you wrote that you proved it. How did you prove it? You made an assumption and didn't address what I wrote at all. I've asked several times what benefits Tailwind offers you, how you understand this design system, and what advantages it gives YOU. What do the docs have to do with this? This won't change anything in this discussion, but I've used Tailwind, I've used Bootstrap, and I've used many other solutions over the years. I believe I can't have a clear opinion about something and express it publicly if I haven't used it, or have used it incorrectly - as exemplified by, in my opinion, unfair opinions about WordPress (you can read about it here - kodem.dev/does-wordpress…). You talk to much about docs, co this is a quote from Tailwind docs: "A common reaction to this approach is wondering, “isn’t this just inline styles?” and in some ways it is — you’re applying styles directly to elements instead of assigning them a class name and then styling that class." So, even in the Tailwind docs you can read that it's inline styling with additional options where you can use breakpoints and refer to variables from within classes, where some variables and layers are already defined for user and ready to adjustment. Finally, with this attitude you would be a terrible teacher of anything, take a breath and count to ten, because instead of a normal discussion in which you present your opinion, which I may not agree with, but you provide any arguments, you keep playing someone who is better than others, even though you can't prove it in any way.

I answered already: read the docs. I’m not going to teach you on Twitter. I didn’t ask you for a design system so I could compare it with Tailwind. Read it again. I said I’d point out how Tailwind could improve it, which matches what’s in the docs. So again, read the docs. I don’t need to know you to see that you don’t know Tailwind. Your arguments make that obvious and I proved it. I’m not pretending to be smarter than you. I'm just saying you need to learn Tailwind, and that only matters for this specific discussion because your critique is unfounded. Just read the fucking docs.

You still didn't answer my questions what exactly it means to you. You write in previous comment "show me your design system" that you can compare with Tailwind. You still think that you are a teacher, and I show lack of knowledge, And I'm demonstrating a lack of knowledge, while comparing Bootstrap to Tailwind, I'm the only one in this discussion who has provided concrete reasons, and I am the only one herewho tries to justify why I think something. You use big words but can't explain what that means to you. Maybe for you, "built-in design system" means that Tailwind shows you where to define CSS values, has specific class names corresponding to specific CSS values or that it's easiest to operate with multiples of 4. Maybe, but I don't know, because you don't respond, so it's hard to have a substantive discussion with you, in which you pretend to be smarter than me without even knowing me. I don't expect you to change your mind and answer my questions, so I wish you a nice day.

My argument was directed at you because you did show a lack of knowledge. I wouldn’t make this argument otherwise. You could just read the docs. Also, note that I never called Tailwind _a_ design system. When I talk about its built-in design system, I’m referring to its design system features. That wording comes from their own docs (#why-not-just-use-inline-styles" target="_blank" rel="nofollow noopener">tailwindcss.com/docs/styling-w…). If you disagree, feel free to open a PR.

This argument is general, not directed at me personally. I see that if you cannot explain what this design system means to you and what benefits it offers for you, so you stick to one thought and try to play mentor, recognizing that my knowledge is less than yours. My question was normal, what specific advantages do you get from using Tailwind and what you call its design system, if it is too difficult then the problem is not with me. btw. the fact that you call tailwind design a system is already bizarre, but maybe you're confusing it with Tailwind Plus, which firstly shows who actually doesn't know Tailwind, and secondly, even Tailwind Plus is not a design system.

If you keep seeing that argument, have you considered it might be because you’re showing a lack of knowledge? Honestly, your previous reply did come across that way. I can’t teach you Tailwind on Twitter, but you can check the docs or ask an AI. If you show me a design system you’ve built along with the source code, I can learn it, critique it, and point out where Tailwind could help improve it.

@diegohaz Agree, it’s solid choice for prototyping or for people who hate writing styles. It’s like jQuery for CSS.

@kodemdev To be clear, I don't think Tailwind is the best possible option. I have complaints, like it not being fully atomic and lacking syntax highlighting (x.com/diegohaz/statu…). Still, it's a solid choice for most people.

I've been waiting for this argument, always the same: if you're criticizing Tailwind, you're either unfamiliar with it or have seen it used incorrectly. So I'd love to hear what the real benefits of this Tailwind design system are, what you think it is, and what its advantages are when used in a custom-designed website or app. Btw. You can remove unused style also without using Tailwind, but it's always an argument from people who use it, which only shows that it generates a lot of unused styles by default.

@kodemdev You clearly don’t know Tailwind. That’s fine. But if you want to criticize it properly, you need to learn it. Its biggest advantage is the built-in design system. Colocation is a huge plus too. You can easily purge unused CSS without worrying about it.

I think quite the opposite, Bootstrap, unlike Tailwind, was a real problem solver at the time of its greatest popularity, a time before flex, before grid, when you had to use float and reset. Bootstrap provided a simple way to build a layout without worrying about breaking anything. And what advantage does Tailwind offer? The only advantage it offers is the ability to avoid touching CSS files writing inline style, which is the most important feature for many developers, as writing styles is the least enjoyable part of their job.

@kodemdev I don’t think it’s fair to put Tailwind in the same category as component-based frameworks like Bootstrap. Most people will run into more anti-patterns building their own design system than using Tailwind’s built-in approach. In most cases, Tailwind is a solid choice.

Honestly, I don't think we need to use any "CSS framework" at this time. I prefer a component-oriented approach, clear naming conventions, globally defined values. I personally use SCSS with a few base files (reset, global stuff definition, keyframes), and all other styles are written for a specific component/section/view.

@kodemdev I'm talking about performance. Since atomic CSS, when used well, can drastically speed up your site (for example, Facebook reportedly went from hundreds of MB to a few hundred kB after switching from native CSS), what alternative do you suggest?

@greglalle “Big layouts get the attention.” Apparently, it got his attention so much he copied the whole thing.

"If I had actually ripped someone’s work 1:1, I’d be in full panic mode right now" he said.

@natmiletic I completely disagree, have you ever heard of creating custom Gutenberg blocks, or did your knowledge of WordPress end with Elementor?

WordPress block editor vs page builders: the fight is over and nobody won. Blocks are fine for blogs and simple layouts. They fall apart the moment a client wants anything custom. Page builders are still faster for real client work. The people who swear by blocks either build very simple sites or have forgotten what actual client requests feel like.

@joebell_ Don't worry, if CSS jail exists, most twitter software engines are there.

@kodemdev If it’s bad practice then I guess I’m going to CSS jail

with negative margins, we can… 1. prevent header buttons from inflating the height beyond the text line-height 2. expand the "17 replies" trigger hit area while avoiding spacing double-up before vs after