4 ms·

So basically the idea of Tailwind is to move back into inilne css? Sure, the syntaxis is different but the concept is the same. If tomorrow I want to change the

by 101008 2y ago

So basically the idea of Tailwind is to move back into inilne css? Sure, the syntaxis is different but the concept is the same. If tomorrow I want to change the color of all the buttons in my app I need to go to each HTML and update them.

s1k3s 2y ago
You can use SASS/SCSS to build anything you'd do with regular CSS. For example: .color-primary { color: white; } .some-text { @apply color-primary; }
- betenoire 2y ago
  we have css variables now, we don't even need to do that
  - s1k3s 2y ago
    I know, I was just demonstrating a feature of tailwind related to OP's remark
  - halflife 2y ago
    This is exactly how tailwind works under the hood. It creates css vars for all of your configurations, so you can either use the class names, or perform calculations from the vars
richwater 2y ago
No, you should define semantic names for your colors and then modify the tailwind.config.js build config to indicate the actual color.
- mopsi 2y ago
  That's rarely done in practice. Even Tailwind's own site hardcodes colors.
  - ervine 2y ago
    We do exactly that. And if you're not thinking semantically with Tailwind, you probably aren't thinking semantically with css / sass variables anyway, as it's the exact same thing.
ervine 2y ago
Not at all, Tailwind lets you define your own classes - so you can have text-primary text-secondary, just like you would with sass or css variables (in fact you can use css variables to generate your tailwind classes).
- Lalabadie 2y ago
  My gripe with this argument is that if you value readability, you end up defining your own classes, and if you end up defining your own classes, you don't need Tailwind – at this point, it's just a build layer with its own variables.
  - watwut 2y ago
    Not really. OP suggested to have classes for color palette which is completely reasonable. The tailwind role is to provide easy to use, read and maintain classes. It is not to manage color palette of the project.
pphysch 2y ago
I wonder if there are Tailwind die-hards who are also super comfortable using modern vanilla CSS? I understand Tailwind works and gets the job done and is probably more accessible than learning CSS, but do CSS experts also prefer it?
- ervine 2y ago
  Sample size of 1 here. I lived through every CSS fad for writing "maintainable" css, and have settled on Tailwind. It doesn't limit you, you can always add normal old css files to your project if you need / want to. But what it means is I don't end up with a `utilities.scss` of `.flex` `.block` etc etc etc, which you always do on any project. I get a full catalogue of utility classes that only get included in the generated css if I use them in my project, I don't have to think about class names, and I don't have to open a separate css file. The only con is sometimes an absolutely ridiculous amount of utility classes on an element, but frankly scarlet...
- gherkinnn 2y ago
  The meme of Tailwind is only for n00bs, look at me hand-crafting selectors is bullshit. Very similar to the clowns who preferred document.createElement over JSX for SPAs back in the day. Tailwind can be a very productive tool that feels odd at first and remains odd for elements like input fields but absolutely has its place. It comes with a fraction of the foot guns typically associated with CSS for the tiny cost of looking a bit silly at first. And this is coming from someone who loves (near) class-less CSS frameworks.
- sodapopcan 2y ago
  Me! I like writing CSS and have been doing so since it was introduced. Tailwind has been, by a large margin, my favourite “framework.” In fact it’s the only one I’ve liked. I used bootstrap a bunch but never loved it.
- inopinatus 2y ago
  Working with Tailwind made me better at vanilla CSS. And it's a virtuous cycle: the better I get at vanilla CSS the more I've come to appreciate a) how composable Tailwind is, and b) how perfectly Tailwind dovetails into component-based application UIs.
simion314 2y ago
It seems so, also people using it in my team are agaisnt creating ids or unique classes for elements, so when I am asked to debug some issue you can't just inspect the element and see it's id and class to find it easy to locate teh file where it was created, you have to search for some text that is around it and hope it is unique enough that you can guess the correct file from the list the search for that text returns. Some stuff makes sense like the "flex" classes but IMO the margins, paddings, text sizes, colors is extremism.
savanaly 2y ago
>If tomorrow I want to change the color of all the buttons in my app I need to go to each HTML and update them. If you find yourself repeating a certain combination of classnames over and over, you should refactor to make that a variable and use it in all the places where the repetition is. You might ask how is this different from CSS if these variables containing inline css are just classnames under another name? I would respond that they are basically the same thing, but Tailwind excels in the case where you need a style "just for this one spot" because you don't have to create a classname and edit two different files (html and css) to achieve the effect.
- pphysch 2y ago
  > Tailwind excels in the case where you need a style "just for this one spot" because you don't have to create a classname and edit two different files (html and css) to achieve the effect. Inline style attributes and <style> blocks already solve this... I suspect most of the mania around CSS frameworks is that people don't grok that you don't HAVE to put everything in one big external .css file -- there is a spectrum of ways to declare CSS and with modern browser dev tools it becomes easy to understand where each rule is coming from.
  - steveklabnik 2y ago
    > Inline style attributes and <style> blocks already solve this... Sure. The point of tailwind is to make this nicer, not to fully replace it. I find the naming scheme and helpers they provide to make writing CSS a lot easier. Mind you, I would never claim to be a CSS expert in the first place. But Tailwind isn't trying to be something different, it's trying to make something easier and better. I like vim too. I feel like there's a vague similarity here.
    - threatofrain 2y ago
      I would argue that Tailwind's job is to basically fully replace everything if done idealistically. You want the ability to focus on a single component without thinking that there's CSS somewhere else.
anonymouse008 2y ago
This is why I love imba.io so much, it has everything in one file. js, html, css > all within the proper component context in a reasonable OO form (react fx can fx right off) And, Imba global css classes are importable to other tags at the top level, no need to reimport, just .class-me
CuriouslyC 2y ago
No, the idea of tailwind is to provide a natural bridge between inline styling and class based styling that you can hook into at any point. You can compose styles and use those composed styles elsewhere if that is your best pattern, it's really flexible.
steveklabnik 2y ago
The missing bit of context here is that you use components to create re-usable abstractions. If I want to change the color of my buttons, I go change the "inline CSS" of the Button component I am using everywhere, and it changes everywhere.
- peer2pay 2y ago
  Sorry for being pedantic but that’s not components that’s just global classes. Bootstrap anyone?
  - watwut 2y ago
    Harder to use and maintain then tailwind.
  - steveklabnik 2y ago
    Nobody said that Tailwind is something super special and there's only one way to do this. I find it nicer than hand-writing global classes. YMMV. My point is just that "If I want five buttons to change, I have to go find five places to edit it" isn't the reality of working with the tool in its intended way.
    - threatofrain 2y ago
      [deleted]
  - dcre 2y ago
    No, literal React (or Vue or Svelte) Components. Not like making global classes.
  - dutchCourage 2y ago
    The idea is similar, but a component contains markup and logic on top of the styles. The approach Tailwind takes is that since the component is named and contained, its elements don't have to be named explicitly. And while we could then use inline CSS, it has some limitations so utility classes are a more powerful tool.
Trufa 2y ago
For anyone reading this since its pretty high, it's one of those cases of really high HN bias, that actually got to me. I'm not blaming OP, the question seems innocent enough, but I had this bias and some others myself until I used Tailwind for an actual project and have never looked back, and most of the criticism that appears in HN is just misunderstood concepts and harsh sounding soundbites. I distrust HN's general sentiment on stuff more (if there is such a thing but you know what I mean), I check for myself. Regarding tailwind specifically, it's the modern way of "just css" which goes amazingly well with having the component abstraction level. You don't abstract your css, you keep it all in base level, you abstract components, in this particular case you would go to your button component and change all of the application's button at once.
- 101008 2y ago
  Thanks for explaining, that makes sense. And yes, my question was innocent. I am not a frontend dev, I used to do some CSS and vanilla JS back in the day. Thanks for taking the time to explain it to me!
- pupppet 2y ago
  Creating a component out of everything always sounds good in theory but falls apart in practice. There's always that oddball element that doesn't quite work as a component, and then you end up with a component and a bunch of the outliers that you need to remember to manually update.
sodapopcan 2y ago
Another post about Tailwind, another person claiming it's exactly equal to inline CSS eye roll. This one uses a "back to" qualifier, implying a historical revision that inline styles were ever the sanctioned way! Good lord... There is plenty of info out there about why Tailwind, or rather utility-first in general, works in many situations. The "classic" way is still also appropriate. I use both depending on the project, though I really like Tailwind and is by far my favourite method most of the time. I say this as someone in their 40s who has been enjoying writing CSS since it was first introduced in the late 90s (yep, guilty of Stockholm Syndrome here).
KaiMagnus 2y ago
Tailwind is more a way to easily apply styles in websites built using one of the popular app and/or component frameworks. If you have many different buttons you’d create a Button component and the framework would do the work of „copying and pasting“ that component across your site. The benefit of Tailwind is that it standardizes styles. Even in a small button component, I’d have to create classes to attach my styles to. New team members would then have to figure out how and where something is defined. With Tailwind, any developer familiar with it can search for „bg-blue-500“ and turn it into „bg-red-500“. So it’s mainly a solution for large websites and teams. On a small, handmade website, well thought out classes in a central stylesheet is definitely the way to go. I’m my opinion, the benefits of Tailwind are debatable and I really don’t like the readability of it. Any complex component will have a need for classes that are assigned depending on other variables and conditions so the naming problem doesn’t go away either. So in the end I favor component scoped CSS where my HTML is concise, with a few classes and conditions and then a style tag below.
moritzwarhier 2y ago
> Sure, the syntaxis is different but the concept is the same No, and this has been discussed ad nauseam in every discussion about Tailwind, ever, especially here. I'm not a huge Tailwind advocate, but the difference between it and inline styles have been explained a million times. It's like saying "wow so this language uses an immutable string type and vaguely C-like syntax! Is it Java?" Except for the difference that Inline Styles strictly cannot do the same things that TW can do, without the help of another stylesheet or CSS block.
mamcx 2y ago
See it as the same issue of orm's vs SQL. Tailwind is "SQL" for CSS

by 101008 2y ago

s1k3s 2y ago

You can use SASS/SCSS to build anything you'd do with regular CSS. For example: .color-primary { color: white; } .some-text { @apply color-primary; }

betenoire 2y ago
we have css variables now, we don't even need to do that
- s1k3s 2y ago
  I know, I was just demonstrating a feature of tailwind related to OP's remark
- halflife 2y ago
  This is exactly how tailwind works under the hood. It creates css vars for all of your configurations, so you can either use the class names, or perform calculations from the vars

richwater 2y ago

No, you should define semantic names for your colors and then modify the tailwind.config.js build config to indicate the actual color.

mopsi 2y ago
That's rarely done in practice. Even Tailwind's own site hardcodes colors.
- ervine 2y ago
  We do exactly that. And if you're not thinking semantically with Tailwind, you probably aren't thinking semantically with css / sass variables anyway, as it's the exact same thing.

ervine 2y ago

Not at all, Tailwind lets you define your own classes - so you can have text-primary text-secondary, just like you would with sass or css variables (in fact you can use css variables to generate your tailwind classes).

Lalabadie 2y ago
My gripe with this argument is that if you value readability, you end up defining your own classes, and if you end up defining your own classes, you don't need Tailwind – at this point, it's just a build layer with its own variables.
- watwut 2y ago
  Not really. OP suggested to have classes for color palette which is completely reasonable. The tailwind role is to provide easy to use, read and maintain classes. It is not to manage color palette of the project.

pphysch 2y ago

I wonder if there are Tailwind die-hards who are also super comfortable using modern vanilla CSS? I understand Tailwind works and gets the job done and is probably more accessible than learning CSS, but do CSS experts also prefer it?

ervine 2y ago
Sample size of 1 here. I lived through every CSS fad for writing "maintainable" css, and have settled on Tailwind. It doesn't limit you, you can always add normal old css files to your project if you need / want to. But what it means is I don't end up with a `utilities.scss` of `.flex` `.block` etc etc etc, which you always do on any project. I get a full catalogue of utility classes that only get included in the generated css if I use them in my project, I don't have to think about class names, and I don't have to open a separate css file. The only con is sometimes an absolutely ridiculous amount of utility classes on an element, but frankly scarlet...
gherkinnn 2y ago
The meme of Tailwind is only for n00bs, look at me hand-crafting selectors is bullshit. Very similar to the clowns who preferred document.createElement over JSX for SPAs back in the day. Tailwind can be a very productive tool that feels odd at first and remains odd for elements like input fields but absolutely has its place. It comes with a fraction of the foot guns typically associated with CSS for the tiny cost of looking a bit silly at first. And this is coming from someone who loves (near) class-less CSS frameworks.
sodapopcan 2y ago
Me! I like writing CSS and have been doing so since it was introduced. Tailwind has been, by a large margin, my favourite “framework.” In fact it’s the only one I’ve liked. I used bootstrap a bunch but never loved it.
inopinatus 2y ago
Working with Tailwind made me better at vanilla CSS. And it's a virtuous cycle: the better I get at vanilla CSS the more I've come to appreciate a) how composable Tailwind is, and b) how perfectly Tailwind dovetails into component-based application UIs.

simion314 2y ago

It seems so, also people using it in my team are agaisnt creating ids or unique classes for elements, so when I am asked to debug some issue you can't just inspect the element and see it's id and class to find it easy to locate teh file where it was created, you have to search for some text that is around it and hope it is unique enough that you can guess the correct file from the list the search for that text returns. Some stuff makes sense like the "flex" classes but IMO the margins, paddings, text sizes, colors is extremism.

savanaly 2y ago

>If tomorrow I want to change the color of all the buttons in my app I need to go to each HTML and update them. If you find yourself repeating a certain combination of classnames over and over, you should refactor to make that a variable and use it in all the places where the repetition is. You might ask how is this different from CSS if these variables containing inline css are just classnames under another name? I would respond that they are basically the same thing, but Tailwind excels in the case where you need a style "just for this one spot" because you don't have to create a classname and edit two different files (html and css) to achieve the effect.

pphysch 2y ago
> Tailwind excels in the case where you need a style "just for this one spot" because you don't have to create a classname and edit two different files (html and css) to achieve the effect. Inline style attributes and <style> blocks already solve this... I suspect most of the mania around CSS frameworks is that people don't grok that you don't HAVE to put everything in one big external .css file -- there is a spectrum of ways to declare CSS and with modern browser dev tools it becomes easy to understand where each rule is coming from.
- steveklabnik 2y ago
  > Inline style attributes and <style> blocks already solve this... Sure. The point of tailwind is to make this nicer, not to fully replace it. I find the naming scheme and helpers they provide to make writing CSS a lot easier. Mind you, I would never claim to be a CSS expert in the first place. But Tailwind isn't trying to be something different, it's trying to make something easier and better. I like vim too. I feel like there's a vague similarity here.
  - threatofrain 2y ago
    I would argue that Tailwind's job is to basically fully replace everything if done idealistically. You want the ability to focus on a single component without thinking that there's CSS somewhere else.

anonymouse008 2y ago

This is why I love imba.io so much, it has everything in one file. js, html, css > all within the proper component context in a reasonable OO form (react fx can fx right off) And, Imba global css classes are importable to other tags at the top level, no need to reimport, just .class-me

CuriouslyC 2y ago

No, the idea of tailwind is to provide a natural bridge between inline styling and class based styling that you can hook into at any point. You can compose styles and use those composed styles elsewhere if that is your best pattern, it's really flexible.

steveklabnik 2y ago

The missing bit of context here is that you use components to create re-usable abstractions. If I want to change the color of my buttons, I go change the "inline CSS" of the Button component I am using everywhere, and it changes everywhere.

peer2pay 2y ago
Sorry for being pedantic but that’s not components that’s just global classes. Bootstrap anyone?
- watwut 2y ago
  Harder to use and maintain then tailwind.
- steveklabnik 2y ago
  Nobody said that Tailwind is something super special and there's only one way to do this. I find it nicer than hand-writing global classes. YMMV. My point is just that "If I want five buttons to change, I have to go find five places to edit it" isn't the reality of working with the tool in its intended way.
  - threatofrain 2y ago
    [deleted]
- dcre 2y ago
  No, literal React (or Vue or Svelte) Components. Not like making global classes.
- dutchCourage 2y ago
  The idea is similar, but a component contains markup and logic on top of the styles. The approach Tailwind takes is that since the component is named and contained, its elements don't have to be named explicitly. And while we could then use inline CSS, it has some limitations so utility classes are a more powerful tool.

Trufa 2y ago

For anyone reading this since its pretty high, it's one of those cases of really high HN bias, that actually got to me. I'm not blaming OP, the question seems innocent enough, but I had this bias and some others myself until I used Tailwind for an actual project and have never looked back, and most of the criticism that appears in HN is just misunderstood concepts and harsh sounding soundbites. I distrust HN's general sentiment on stuff more (if there is such a thing but you know what I mean), I check for myself. Regarding tailwind specifically, it's the modern way of "just css" which goes amazingly well with having the component abstraction level. You don't abstract your css, you keep it all in base level, you abstract components, in this particular case you would go to your button component and change all of the application's button at once.

101008 2y ago
Thanks for explaining, that makes sense. And yes, my question was innocent. I am not a frontend dev, I used to do some CSS and vanilla JS back in the day. Thanks for taking the time to explain it to me!
pupppet 2y ago
Creating a component out of everything always sounds good in theory but falls apart in practice. There's always that oddball element that doesn't quite work as a component, and then you end up with a component and a bunch of the outliers that you need to remember to manually update.

sodapopcan 2y ago

Another post about Tailwind, another person claiming it's exactly equal to inline CSS eye roll. This one uses a "back to" qualifier, implying a historical revision that inline styles were ever the sanctioned way! Good lord... There is plenty of info out there about why Tailwind, or rather utility-first in general, works in many situations. The "classic" way is still also appropriate. I use both depending on the project, though I really like Tailwind and is by far my favourite method most of the time. I say this as someone in their 40s who has been enjoying writing CSS since it was first introduced in the late 90s (yep, guilty of Stockholm Syndrome here).

KaiMagnus 2y ago

Tailwind is more a way to easily apply styles in websites built using one of the popular app and/or component frameworks. If you have many different buttons you’d create a Button component and the framework would do the work of „copying and pasting“ that component across your site. The benefit of Tailwind is that it standardizes styles. Even in a small button component, I’d have to create classes to attach my styles to. New team members would then have to figure out how and where something is defined. With Tailwind, any developer familiar with it can search for „bg-blue-500“ and turn it into „bg-red-500“. So it’s mainly a solution for large websites and teams. On a small, handmade website, well thought out classes in a central stylesheet is definitely the way to go. I’m my opinion, the benefits of Tailwind are debatable and I really don’t like the readability of it. Any complex component will have a need for classes that are assigned depending on other variables and conditions so the naming problem doesn’t go away either. So in the end I favor component scoped CSS where my HTML is concise, with a few classes and conditions and then a style tag below.

moritzwarhier 2y ago

> Sure, the syntaxis is different but the concept is the same No, and this has been discussed ad nauseam in every discussion about Tailwind, ever, especially here. I'm not a huge Tailwind advocate, but the difference between it and inline styles have been explained a million times. It's like saying "wow so this language uses an immutable string type and vaguely C-like syntax! Is it Java?" Except for the difference that Inline Styles strictly cannot do the same things that TW can do, without the help of another stylesheet or CSS block.

mamcx 2y ago

See it as the same issue of orm's vs SQL. Tailwind is "SQL" for CSS