5 ms·

I don't understand frameworks like this. You are basically tying presentation with markup. God forbid you want to create more than one theme for the same HTML!

yoz-y 7y ago
Yeah at a first glance this looks like putting style in html except by using classes rather than `style` attribute. Cool for prototyping I guess.
- antonkm 7y ago
  I've found that since using Tailwind I've got a deeper understanding of CSS, got a greater understanding of UI design (Adam Wathan's tutorials are great) and produce and replicate designs quicker and easier. It's a design system with constraints, which automatically gives me fewer and better options. Using something like Bootstrap is probably easier and quicker if you're unfamiliar with writing CSS though. All in all, quite far from styling with inline `style` (but it takes a bit of learning on the thought process behind it).
  - yoz-y 7y ago
    Could you elaborate a bit more? I understand how something like this would help with understanding UI design as it abstracts away the unnecessary details of CSS. However without digging into what these classes actually do I don't understand how it helps with understanding of the actual CSS.
skrebbel 7y ago
> create more than one theme for the same HTML! Who does this? It sounds like an exercise in pain and futility.
- have_faith 7y ago
  Imagine it more from the perspective of a component altering it's style based on some sort of global "state". That global state could simply be a class on the body like "page-contact", so your css can alter itself much easier if the style isn't defined up front in a list of prescriptive class names. It's less theming in the sense of css zen garden and more encoding variations of style in css instead of relying on more class names.
- bbmario 7y ago
  Dark/white. Compact/expanded. Color variations. Palette variations. Ever heard of white label websites too?
thijsvandien 7y ago
This comes up in every thread regarding Tailwind or similar frameworks/methodologies. If you're interested in the rationale, I recommend searching for some of those and reading the comments there. The TLDR is that you don't lose anything by starting out this way, because at any point you can extract (think @apply) higher level utilities or semantic classes, but gain that you can get a good looking design in place quickly by having useful constraints, not needing to switch context all the time, and not being forced to make up names for everything. While few sites need to conform to the "Zen Garden principle", Tailwind won't stop them from doing so, if you put in the work that it makes optional.
jszymborski 7y ago
There is indeed a place between semantic styling, and specifying everything down to the colour of an element with styles. I'd agree this seemingly takes the idea of semantic styling to an extreme (although I haven't gone too deep into the framework).
jasim 7y ago
Tailwind makes it very easy to change theme by changing just a single configuration file: https://tailwindcss.com/#designed-to-be-customized https://tailwindcss.com/#designed-to-be-customized It is very liberating to use Tailwind instead of creating unique CSS classes for every div in a page. The code is much more maintainable - in a single stroke Tailwind gets rid of selector specificity issues, design inconsistency, and naming woes. From a programming perspective, the conventional style of "semantic" CSS classes creates deep and fragile coupling between markup and CSS. It goes against everything good code is supposed to be - when you change the structure of the HTML you're forced to change the CSS, and if you truly use the power of CSS selectors, then modifying CSS becomes a difficult enterprise: one change can create multiple unrelated changes at a distance. Tailwind solves all this, with just two downsides: until you spend a few hours mucking with it, the markup look will look unwieldy, and you have to be ready to really think about semantic CSS and "separation of concerns" dogma we've taken for granted for so long.
- emn13 7y ago
  Bit of a tangent, but perhaps the issue with separation of concerns isn't so much that it's a bad idea, it's that it's not always a good idea; and secondly that css doesn't really enable separation of concerns like that. It's a fine idea to be able to give (essentially) a style a meaningful name, but only if you know what the meaning is and probably only if you intend to use it several times. Since CSS cannot really create complex styles from scratch meaning that you need wrappers and separators and whatnot as purely style elements, true encapsulation that's easy to use without knowing the implementation isn't really feasible. Hence "separation of concerns" - to the extent that it's a good idea in the first place - doesn't work for html+css, and similar concerns mean it doesn't work very well for html+scripts. Put another way, leaky abstractions are worse than no abstractions. Better to keep things transparent and merely expose helpers, instead of pretending you can hide complexity when you cannot really hide it.
- bbmario 7y ago
  I'm looking at the example: https://tailwindcss.com/docs/utility-first https://tailwindcss.com/docs/utility-first So, if I'm making a theme, and I want a different color for the text, I have to replace "text-gray-900" with my hex code for purple? Also, what if my theme is about making the design more compact, or increasing density? How do I customize thousands of elements with different combinations of class="ml-6 pt-1"? Oh, and don't get me started on "bg-white rounded-lg". God forbid your theme wants squared boxes on black background.

yoz-y 7y ago

Yeah at a first glance this looks like putting style in html except by using classes rather than `style` attribute. Cool for prototyping I guess.

antonkm 7y ago
I've found that since using Tailwind I've got a deeper understanding of CSS, got a greater understanding of UI design (Adam Wathan's tutorials are great) and produce and replicate designs quicker and easier. It's a design system with constraints, which automatically gives me fewer and better options. Using something like Bootstrap is probably easier and quicker if you're unfamiliar with writing CSS though. All in all, quite far from styling with inline `style` (but it takes a bit of learning on the thought process behind it).
- yoz-y 7y ago
  Could you elaborate a bit more? I understand how something like this would help with understanding UI design as it abstracts away the unnecessary details of CSS. However without digging into what these classes actually do I don't understand how it helps with understanding of the actual CSS.

skrebbel 7y ago

> create more than one theme for the same HTML! Who does this? It sounds like an exercise in pain and futility.

have_faith 7y ago
Imagine it more from the perspective of a component altering it's style based on some sort of global "state". That global state could simply be a class on the body like "page-contact", so your css can alter itself much easier if the style isn't defined up front in a list of prescriptive class names. It's less theming in the sense of css zen garden and more encoding variations of style in css instead of relying on more class names.
bbmario 7y ago
Dark/white. Compact/expanded. Color variations. Palette variations. Ever heard of white label websites too?

thijsvandien 7y ago

This comes up in every thread regarding Tailwind or similar frameworks/methodologies. If you're interested in the rationale, I recommend searching for some of those and reading the comments there. The TLDR is that you don't lose anything by starting out this way, because at any point you can extract (think @apply) higher level utilities or semantic classes, but gain that you can get a good looking design in place quickly by having useful constraints, not needing to switch context all the time, and not being forced to make up names for everything. While few sites need to conform to the "Zen Garden principle", Tailwind won't stop them from doing so, if you put in the work that it makes optional.

jszymborski 7y ago

There is indeed a place between semantic styling, and specifying everything down to the colour of an element with styles. I'd agree this seemingly takes the idea of semantic styling to an extreme (although I haven't gone too deep into the framework).

jasim 7y ago

Tailwind makes it very easy to change theme by changing just a single configuration file: https://tailwindcss.com/#designed-to-be-customized https://tailwindcss.com/#designed-to-be-customized It is very liberating to use Tailwind instead of creating unique CSS classes for every div in a page. The code is much more maintainable - in a single stroke Tailwind gets rid of selector specificity issues, design inconsistency, and naming woes. From a programming perspective, the conventional style of "semantic" CSS classes creates deep and fragile coupling between markup and CSS. It goes against everything good code is supposed to be - when you change the structure of the HTML you're forced to change the CSS, and if you truly use the power of CSS selectors, then modifying CSS becomes a difficult enterprise: one change can create multiple unrelated changes at a distance. Tailwind solves all this, with just two downsides: until you spend a few hours mucking with it, the markup look will look unwieldy, and you have to be ready to really think about semantic CSS and "separation of concerns" dogma we've taken for granted for so long.

emn13 7y ago
Bit of a tangent, but perhaps the issue with separation of concerns isn't so much that it's a bad idea, it's that it's not always a good idea; and secondly that css doesn't really enable separation of concerns like that. It's a fine idea to be able to give (essentially) a style a meaningful name, but only if you know what the meaning is and probably only if you intend to use it several times. Since CSS cannot really create complex styles from scratch meaning that you need wrappers and separators and whatnot as purely style elements, true encapsulation that's easy to use without knowing the implementation isn't really feasible. Hence "separation of concerns" - to the extent that it's a good idea in the first place - doesn't work for html+css, and similar concerns mean it doesn't work very well for html+scripts. Put another way, leaky abstractions are worse than no abstractions. Better to keep things transparent and merely expose helpers, instead of pretending you can hide complexity when you cannot really hide it.
bbmario 7y ago
I'm looking at the example: https://tailwindcss.com/docs/utility-first https://tailwindcss.com/docs/utility-first So, if I'm making a theme, and I want a different color for the text, I have to replace "text-gray-900" with my hex code for purple? Also, what if my theme is about making the design more compact, or increasing density? How do I customize thousands of elements with different combinations of class="ml-6 pt-1"? Oh, and don't get me started on "bg-white rounded-lg". God forbid your theme wants squared boxes on black background.