I think Tailwind appeals to « back of the front end » devs which is a role that didn’t exist until 2010 or so? I think tailwind is valuable and as always middle way is the best approach but more difficult to structure and definitely not good for commercial purposes. My favourite way is to put tw classes for spacing components and layout directly in the template while using bem-like naming for the component ‘s own app…
Tailwind CSS marketing and misinformation engine
31–40 of 125 posts
Re: Tailwind CSS marketing and misinformation engine
#32> Turns out there is no next step. Or it kind of exists, but it's called "premature abstraction". You can start extracting classes with @apply, but the documentation for reusing styles [link] describes it as a bad practice.
> But what should I use @apply for if not for cleaning up? The documentation does not say. It only tells me why it should not be used.
If you jump to the Tailwind section they link to here, the short section immediately before explains with an example you should be using HTML templates to reuse styles over @apply, which is really core to understanding Tailwind:
https://tailwindcss.com/docs/reusing-styles#compared-to-css-...
Unless a component is a single HTML element, the information needed to define it can’t be captured in CSS alone. For anything even remotely complex, the HTML structure is just as important as the CSS.
Even if you create classes for the different elements in a component like this, you still have to duplicate the HTML every time you want to use this component. Sure you can update the font-size for every instance in a single place, but what if you need to turn the title into a link?
Components and template partials solve this problem much better than CSS-only abstractions because a component can encapsulate the HTML and the styles. Changing the font-size for every instance is just as easy as it is with CSS, but now you can turn all of the titles into links in a single place too.
When you create components and template partials like this, there’s no reason to use anything other than utility classes because you already have a single source of truth for the styles.Re: Tailwind CSS marketing and misinformation engine
#33I find it fascinating how Tailwind divides opinion.
Re: Tailwind CSS marketing and misinformation engine
#34I have no idea how tailwind has gotten so popular. Tailwind is a way to justify writing inline css in our HTML. This was once considered the cardinal sin of a frontend developer. You avoided inline-css at all costs. But now Tailwind just makes a class for text-color-blue which simply abstracts the `text-color: blue;` css property away into its own class. But don't fool yourself, you are just writing inline css by a d…
The one thing I appreciate from Tailwind CSS and I'd like to see added to CSS itself is that I don't have to write media queries everywhere.
Nothing destroys the readability of my CSS more than adding multiple media queries to adjust styling for different screen sizes. I wrote a component that used CSS Grid and needed to vary the layout as it resized, and over half of the CSS is now media query definitions.
So having a built-in way to streamline defining media queries, and a built-in way to select in line styling from breakpoints a la `py-2 md:py-6` are my 2 asks for CSS after using Tailwind.
(I would prefer to do away with many breakpoints and have a properly fluid design, but IME it's a lot more work and designers can't get their heads around it, let alone clients. And where images are involved it's easier to have a smaller range of possible sizes for the srcset)
Re: Tailwind CSS marketing and misinformation engine
#35One thing I would like to see is a re-implementation of the button in your style of CSS to strengthen your position. I'm not siding with either approach, I just think it would make the article better. Your, "don't make things cleaner"/"make clean things", images show part of the Tailwind classes used to make the black button on one side and the class "primary" on the other. Elsewhere in the article you define "primar…
Hey. Thanks for the comment. I could add that, but wanted to focus on the title of the article: the technological origin, vendor lock-in, and their messaging scheme. I have written a different article about Tailwind vs semantic CSS, which compares the amount of code needed to implement the same thing and how the resulting site is order of magnitude smaller with the semantic approach: https://nuejs.org/blog/tailwind-v…
Either way, all these classes/css end up in a Button component for my site.
Re: Tailwind CSS marketing and misinformation engine
#36I find it fascinating how Tailwind divides opinion.
Re: Tailwind CSS marketing and misinformation engine
#37Like many I was initially skeptical of Tailwind because I thought it made the code look “ugly”. But then I started using and almost immediately noticed the productivity boost. Two things that I noticed while using it was 1) I never knew how much I disliked naming things before I didn’t need to do that anymore and 2) how big of a mental burden it was to keep the mapping between the id/classes and the CSS, not mentioni…
Naming things is notoriously hard, but it's a skill you need to master to make reusable things. You name things that repeat. Think of function names in JavaScript, class names in object-oriented languages, or component names in Figma.
Re: Tailwind CSS marketing and misinformation engine
#38I have no idea how tailwind has gotten so popular. Tailwind is a way to justify writing inline css in our HTML. This was once considered the cardinal sin of a frontend developer. You avoided inline-css at all costs. But now Tailwind just makes a class for text-color-blue which simply abstracts the `text-color: blue;` css property away into its own class. But don't fool yourself, you are just writing inline css by a d…
I had a rough road learning css, and have been in a few situations where my css/design skills were insufficient to the tasks I was expected to solve. Inline styling let me work more intuitively, and in large part skip learning a whole new paradigm/architecture "just to style some components".
As I eventually grew and had time to work on styling/design in a less stressful environment, I gradually got better at it. Not by practice so much as by learning a new way to frame the problems of styling differently from the problems of "pure" programming.
Had tailwind been around back then I'm sure I'd be a big proponent. It's a product that proposes to solve the cognitive dissonance for a programmer with lots of experience coding, but little experience designing being asked to structure and reason about their work in an uncomfortably different way.
I think tailwind solves a real problem, just not the one we're being told it does.
Re: Tailwind CSS marketing and misinformation engine
#39First off, it feels weird for the developer of NueJS to be throwing shade at other tools for "marketing and misinformation", given the number of articles I've seen extolling the virtues of NueJS as the silver bullet to solve all your problems.
Secondly, I think it would be useful for the author to reflect a bit on what Tailwind is doing that people find so useful. Obviously not everyone loves it (personally, I prefer writing CSS to Tailwind, just because it's a much clearer and expressive language), but it's clearly very popular, and the reason for that popularity is typically unlikely to be a conspiracy involving easy onboarding and lock-in.
I think understanding Tailwind on its own terms, with its own merits, is really valuable for understanding the state of CSS development right now, what works well, and what needs to improve. The author here seems to see Tailwind purely through the lens of being able to write CSS decorations: in Tailwind I might write `m-4`, but in CSS, I'd write |margin: 32px`, these are equivalent, so why create a whole extra tool just to do what we could already do?
To me, though, this is deeply missing the point of Tailwind. Tailwind isn't just a different way of writing CSS declarations, it's a way of tying those declarations to components. This is nothing new - it's the same concept as BEM, or CSS modules, or CSS-in-JS, or scoped CSS, amongst others. Essentially, when writing large projects with extensive CSS, most people run into maintainability issues, and most people seem to develop similar solutions: they tie styles to an already existing, more maintainable unit of code, namely the component.
I can go into the details of where these maintainability issues come from, and why components are such a nice solution, but if you've worked with large CSS projects, you probably already know that stuff, and if you haven't, I think BEM is a good place to start for understanding how to organise CSS, and why using the concept of individual components with sub-elements and different states is very helpful.
Understanding Tailwind on its own terms, then, we start to get answers to a number of the questions that the author asks. For example, they compare a JSX-style declaration `` to an equivalent with classes `` and ask whether the difference is just syntax. Well, let's analyse it from a component perspective: with the former, I know where the `Button` component is defined and can analyse it with my editor's code navigation tools, and I know that `plain` is scoped purely to that button. I also can't accidentally use `plain` from a button to annotate a checkbox - plain here explicitly refers to the button's "plain" style and it will not get applied elsewhere.
The same can also 100% be true in CSS - like I say, I'm not a huge Tailwind fan, and I personally prefer CSS solutions where they make sense. But it probably wouldn't look like the author has written it, it would probably look more like this: ``. That said, this still can have issues - the `button` class is completely global, and woe betide you if you forget it exists and try and define another `button` class somewhere else (or important one from somewhere else).
These questions of scope are hard ones to solve, which is why Tailwind exists alongside so many other, similar solutions. And I can fully understand why someone may not like the Tailwind solution specifically - its DSL for defining decorations is idiosyncratic, particularly if you're already familiar with CSS. But this article doesn't contrast Tailwind with those other tools, instead it compares having a solution for these issues with just not having a solution at all, and then tries to tell you that ignoring the problem is the better plan. I think that's a very disingenuous argument (possibly even an example of marketing and misinformation?) that makes the whole article very difficult to take seriously.
Re: Tailwind CSS marketing and misinformation engine
#40Earlier quoted context omitted.
Hey. Thanks for the comment. I could add that, but wanted to focus on the title of the article: the technological origin, vendor lock-in, and their messaging scheme. I have written a different article about Tailwind vs semantic CSS, which compares the amount of code needed to implement the same thing and how the resulting site is order of magnitude smaller with the semantic approach: https://nuejs.org/blog/tailwind-v…
I dismissed most of the content because you’re missing a full css re-implementation of your primary class. It would have at least as many lines as the Tailwind classes and have extra blocks for before, for example. Either way, all these classes/css end up in a Button component for my site.
Have you ever used vanilla CSS? Please try to replicate that black button! You'd be surprised how much less it requires. No &>[data-slot=icon]]:-mx-0.5 or anything like that needed