Tailwind CSS Knock-Knock Joke Illustrating Verbose Utility Classes

Description

A screenshot of a tweet from Ryan Badger, presented as a classic knock-knock joke. The text, white on a black background, starts with '*Knock knock*', 'Who's there?', 'Tailwind.', 'Tailwind who?'. The punchline is a very long, multi-line string of concatenated text representing a huge list of Tailwind CSS utility classes, such as 'relative inline-flex items-center px-2 py-2' and so on. The visual gag is the sheer, unreadable length of the punchline, which fills the lower half of the image. This meme humorously critiques the verbosity of Tailwind CSS, a popular utility-first CSS framework. The punchline's massive, unreadable string of utility classes exaggerates a common complaint from developers who prefer more traditional, semantic CSS. For senior developers, it's a relatable jab at how atomic CSS can lead to cluttered HTML and the cognitive overhead of memorizing hundreds of utility classes, contrasting with the cleaner approach of other styling methodologies

Common Tags

DeveloperHumor CSS CodingHumor CSSFrameworks TechHumor Frontend ToolingFrustration DeveloperErgonomics

Comments

Anonymous ★ Top Pick That's not a punchline, that's my JSX component after a junior dev discovers that `@apply` is 'against the rules'

Anonymous ★ Top Pick

That's not a punchline, that's my JSX component after a junior dev discovers that `@apply` is 'against the rules'
Anonymous

Tailwind code review: 3,428 changed characters, zero changed behavior - just the designer pivoting from gray-500 to gray-400 and my diff tool crying in utility-first Morse code
Anonymous

The real joke is when you realize this Tailwind class string is still shorter than the webpack config you need to optimize it for production, and both are more readable than the CSS-in-JS solution your team settled on after three architecture meetings
Anonymous

This perfectly captures the Tailwind paradox: you save time not context-switching to CSS files, but spend it scrolling horizontally through class names that read like a regex pattern had a baby with a design system. Senior devs know the real punchline comes during code review when someone asks 'could we extract this into a component?' and you realize you've just reinvented CSS classes with extra steps
Anonymous

Tailwind: Accelerating prototypes while dooming enterprise code reviews to horizontal scroll marathons
Anonymous

Tailwind who? Tailwind - the only framework where a button’s className is longer than the feature spec and the PR diff doubles as the style guide
Anonymous

Tailwind: we solved naming things by memorizing a 200-character spell - PurgeCSS is thrilled, code reviewers and human L1 caches are not
@cmdrosmium 2y

f*ck tailwind all my homies use fomantic
1. @ygerlach 2y
  
  fuck tailwind all my homies use style=""
@Algoinde 2y

someone needs to invent an external file where you could save your tailwind class combinations under a specific name and reference them within your markup with just an identifier. you could even make it so you can combine them!
1. @saidov 2y
  
  Bro invented css
2. @procself 2y
  
  I don't know tailwind but I think there is a "directive" called @apply I guess to do this thing, right?
  
  @Algoinde 2y
  
  the directive is called link rel stylesheet type text/css
  
  @procself 2y
  
  For sure.
3. Manuel 2y
  
  That's a really interesting idea! What you're describing sounds like a system for managing and reusing Tailwind CSS utility classes more efficiently. This could potentially be a new feature or a tool that works alongside Tailwind CSS. This tool could allow users to define custom aliases for frequently used class combinations in an external file. Then, within your HTML or template files, you could reference these aliases instead of repeatedly writing out the full set of utility classes. Additionally, the ability to combine these aliases directly within the markup could make the whole system even more flexible and powerful. Creating a preprocessor or a plugin that integrates with the existing Tailwind setup might be the way to go. This way, it could parse these aliases from the external file during the build process and replace them with the corresponding Tailwind classes. This approach would maintain performance by not adding overhead at runtime and keep the utility-first philosophy intact while making the code cleaner and easier to maintain. If you or anyone else is interested in developing such a tool, it could be a valuable contribution to the Tailwind community!
  
  @RiedleroD 2y
  
  that's 100% chatgpt
  
  Manuel 2y
  
  Correct but it was funny
  
  @Algoinde 2y
  
  Don't ever tag me with ChatGPT output
@kandiesky 2y

You can only understand Tailwind's simplicity by using it Abstracting is also a thing the op clearly doesn't understand
1. @RiedleroD 2y
  
  css is already abstract. improvements on css look like lesscss, sass, stylus. not tailwind. tailwind is a glorified style attribute. and yes I have used it, I know exactly how shit it is. Tailwind is just a band-aid over people's lack of knowledge of CSS.
  
  @RiedleroD 2y
  
  "boo hoo I don't like writing CSS, it's too hard" then don't be a webdev. go into a different career.
  
  @kandiesky 2y
  
  Yeah, so abstract you'll end up with a CSS file with dead classes and more than 50kb to download while repeating attributes, naming things badly... God forbid someone solves the problem of dead CSS and fast iterations cause I want to use .wrapper__box__container__list__items__item for every <li> inside .wrapper__box__container__list_items
  
  @RiedleroD 2y
  
  yeah if you can't structure your css well
  
  @kandiesky 2y
  
  Yeah, because NOT EVERYONE can structure their CSS well. You sound like someone who doesn't work on a team
  
  @RiedleroD 2y
  
  then get someone who does if a farmer tries to fly, they'll die. duh. specialized jobs need specialized people. If you try to use tailwind, you're gonna end up with shit, even if that means you don't need to hire someone who is actually good at that job.
  
  @kandiesky 2y
  
  Yeah, it's clear you don't work in an organization. That's simply not how things work at corporate level. You have to deal with what you have, expecting ever less, not more, from peers
  
  @purplesyringa 2y
  
  Then that's an organizational problem, not yours
  
  @kandiesky 2y
  
  Literally happens everywhere, but I agree it's a organizational problem. The thing is, it's not gonna be solved
  
  @purplesyringa 2y
  
  yeah that's fair i guess
  
  @RiedleroD 2y
  
  yeah, so? I'm not saying you're the one to fix that
  
  @RiedleroD 2y
  
  though what you could do is complain to management and change job if possible. Unless you're in the US, then you're fucked lmao
  
  @kandiesky 2y
  
  Tailwind solves that kind of problem. It's way easier to mantain than SASS, LESS, etc. You don't have to name things, the HTML is self-describing. It helps a bunch when analyzing code
  
  @RiedleroD 2y
  
  still just a band-aid over the actual problem. Doesn't really change my stance on the issue
  
  @kandiesky 2y
  
  A band-aid is better than an infection
  
  @purplesyringa 2y
  
  The "infection" is "programmers" believing they can write production-grade code after a bootcamp
  
  @purplesyringa 2y
  
  Tailwind enables the infection
  
  @Algoinde 2y
  
  Can't design a system = should not write production-grade css, as a design system is still a system.
  
  @RiedleroD 2y
  
  oh my god, so that! I fucking hate how people don't take webdev seriously.
  
  @endisn16h 2y
  
  meeeee :3 /j
  
  @kandiesky 2y
  
  Yeah. That's true. And sadly, corpos like to hire them because they're cheap. Good developers are expansive
  
  @Algoinde 2y
  
  yeah they're huuuuuuge
  
  @RiedleroD 2y
  
  and no, it doesn't solve the problem, it mitigates it
  
  @Algoinde 2y
  
  Now look at the image in the main post lmao I get that it's too long for comedic value, but it's pretty much what it feels like.
  
  @kandiesky 2y
  
  Yeah. That one is an extreme example. Most components just want one to two lines of tailwind classes, while some will have 3~4 if they have conditional classes But I still think it's easier than having 4 classes in a separete file with things spread out
  
  @purplesyringa 2y
  
  Why a separate file though?
  
  @kandiesky 2y
  
  I meant a CSS file. You could have one with everything or many small files with a bit of CSS each, but the problem is unfortunately the same
  
  @RiedleroD 2y
  
  I rarely need more than one class for most elements, especially if I have a styleguide where I can just target the default html5 elements instead of javascript slop.
  
  @kandiesky 2y
  
  Me too. And I agree you can write good CSS. And yet, the problem is: it's hard. Most people don't know/don't care to write good CSS. So you have to apply band-aid. Sadly, there's no other simple, easy way
  
  @RiedleroD 2y
  
  exactly. So we're back to same old: the people I'm mad about are companies and developers who don't take webdev seriously enough to make actually good and maintainable code.
  
  @kandiesky 2y
  
  Yep! I just like Tailwind as a sort of easy way out of that. It helps a ton with unexperienced devs
  
  @RiedleroD 2y
  
  and the second problem is solved by literally every css preprocessor
  
  @RiedleroD 2y
  
  the first too I think, but I've never looked into that because it's a non-issue
  
  @kandiesky 2y
  
  They don't.
  
  @RiedleroD 2y
  
  idiot. they do .wrapper__box__container__list_items { &>&_item{ //your code here } } in lesscss. similar in sass and stylus.
  
  @RiedleroD 2y
  
  (though I don't recommend stylus for different reasons, but it's quite popular regardless)
  
  @purplesyringa 2y
  
  I'm... not sure where you found that? I don't think I've ever seen that garbage since scoped styles were invented
  
  @RiedleroD 2y
  
  haven't looked into scoped styles 😅 I think this way is plenty good enough. besides, not doing the double underscore everywhere saves you some problem anyway
  
  @Algoinde 2y
  
  At my job we use modern JS frameworks that thankfully scope CSS well enough for this to be a non-issue. Design system in global css, individual styling in local css with classnames spanning at most 1-2 classes with pseudoelements here and there.
  
  @Algoinde 2y
  
  I actually don't think I've ever used that horrible BEM notation CSS is supposed to be cascading, so instead of using classes like glorified id="" attributes by trying to invent a class for every single damn thing, use .RichText li like a normal person
  
  @RiedleroD 2y
  
  absolutely agree! unfortunately, gotta work with what I have sometimes 💀
  
  @ahmubashshir 2y
  
  https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector
  
  @RiedleroD 2y
  
  that's new iirc, haven't had the chance to look at it
  
  @RiedleroD 2y
  
  also, browser compat is probably not quite there yet
  
  @purplesyringa 2y
  
  All major browsers have supported it for half a year soooo
  
  @RiedleroD 2y
  
  well that's not that long, I tend to wait a year for these kinda things.
  
  @RiedleroD 2y
  
  also, different projects require different amounts of compatibility
  
  @purplesyringa 2y
  
  Wait, what, you can do that without a preprocessor these days??? Thanks a ton!
  
  @ahmubashshir 2y
  
  I'm doing this in my userChrome css.... this is honestly a lifesaver...
  
  @SheepGod 2y
  
  Oh wide enough support aswell it seems i should try this soon
@ahmubashshir 2y

no more !important rules 🙃
@Supuhstar 2y

but somehow still bad to use the builtin color="" attribute of HTML elements

Use J and K for navigation

Tailwind CSS Knock-Knock Joke Illustrating Verbose Utility Classes

Description

Categories

Common Tags

Comments

More like this

IDE Dark Themes Go Full Rave

Backend Dev Begs Entry to Frontend: 'Business Value Over Pretty UI'

DLSS 5 Off/On: JavaScript Upscaled Into TypeScript