5 ms·

Sounds a bit like a glorified <el style="display:flex;justify-content: start;">... ?

moritzwarhier 5y ago
The differences are: * media queries * @apply * low specificity (tailwind doesn't do !important) EDIT: It "does" important, but only when instructed so, in 1.x it was a global switch, apparently since 2.x its available as a per-class modifier. Thanks dcre * the theming abstraction * brevity
- dcre 5y ago
  Tailwind does have important, it was added with JIT. https://tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier https://tailwindcss.com/docs/just-in-time-mode#built-in-impo...
  - aidos 5y ago
    Oh, nice, I think that’s a new 3.0 thing, not a JIT thing.
    - dcre 5y ago
      Looks like TW 2.2 from June. It wasn't in the initial JIT release in 2.1. https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.2.0 https://github.com/tailwindlabs/tailwindcss/releases/tag/v2....
      - aidos 5y ago
        I’m…not sure how I missed that, because I did look for it. Thanks for the heads up!
- deleted 5y ago
  [deleted]
- nightpool 5y ago
  In this scenario, "@apply" is just "a css class", so i don't think it's appropriate to list that as a benefit tailwind has over inline styles. In both cases you'd be defining the styles somewhere else. Media queries are a good call out, they're definitely a benefit tailwind's approach has to the built-in browser support for inline styles. Another benefit is hover and focus states, which are very difficult to apply with inline styles.
dcre 5y ago
Absolutely. But that's not a downside, that's exactly what I want.
- nightpool 5y ago
  Then why not just type that, instead of having to learn a completely separate set of concepts to map to the underlying CSS properties & values? I program with inline CSS styles all the time when I'm prototyping something or building a page quickly.
  - aidos 5y ago
    Because inline styles aren’t flexible enough to be used for everything, so you need to go out to external css eventually. With tailwind you can do “block md:flex hover:font-bold” and you’ve covered pseudo class cases and media queries very succinctly.
  - psygn 5y ago
    See https://news.ycombinator.com/item?id=29502652 https://news.ycombinator.com/item?id=29502652
  - dcre 5y ago
    It's much more concise than inline styles, variants and configuration give you a lot more power, and it's not a separate set of concepts. It's a subset of the same set of concepts.
  - mixmastamyk 5y ago
    It's like radio presets instead of the full dial. Dial is still available, but a great majority of the time you use the presets.
Tade0 5y ago
Essentially. https://mobile.twitter.com/samthor/status/1402825668061130755 https://mobile.twitter.com/samthor/status/140282566806113075...
montroser 5y ago
Yes, or now with Tailwind v3.0 you can write that as <el class="[display: flex] [justify-content: start]">... I wish I were being hyperbolic, but alas, no: https://tailwindcss.com/blog/tailwindcss-v3#arbitrary-properties https://tailwindcss.com/blog/tailwindcss-v3#arbitrary-proper...
- keyle 5y ago
  Excuse my dad joke "There is a lot of wind at the end of that tail"!
- drusepth 5y ago
  To be fair, one of the big perks of Tailwind (IMO) is not having to have a big ol' folder of CSS that you have to figure out what applies where in HTML, but rather just having all your styling inline (while still staying consistent, which is the usual downside of inlining styles manually). Having to have a tailwind-addons.css when you needed random bits of CSS they didn't have classes for kind of sucked; this looks like a nice QOL that would get me back to the original goal of uniting structure-and-style into singular files. FWIW, I also hated using header files in C++ and also wrote a Ruby library for inlining all my tests immediately following the functions they test. I like having more context when looking at code without having to flip around from file to file to piece a bigger picture together.
  - docmars 5y ago
    The same reason Vue introduced single-file components! If you haven't tried Vue yet, I strongly recommend it based on what you said.
    - drusepth 5y ago
      Thanks for the recommendation! I've mostly been thrust into React, which works for what I need but I definitely don't enjoy it. I'll give Vue a shot!
      - akvadrako 5y ago

The differences are: * media queries * @apply * low specificity (tailwind doesn't do !important) EDIT: It "does" important, but only when instructed so, in 1.x it was a global switch, apparently since 2.x its available as a per-class modifier. Thanks dcre * the theming abstraction * brevity

dcre 5y ago
Tailwind does have important, it was added with JIT. https://tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier https://tailwindcss.com/docs/just-in-time-mode#built-in-impo...
- aidos 5y ago
  Oh, nice, I think that’s a new 3.0 thing, not a JIT thing.
  - dcre 5y ago
    Looks like TW 2.2 from June. It wasn't in the initial JIT release in 2.1. https://github.com/tailwindlabs/tailwindcss/releases/tag/v2.2.0 https://github.com/tailwindlabs/tailwindcss/releases/tag/v2....
    - aidos 5y ago
      I’m…not sure how I missed that, because I did look for it. Thanks for the heads up!
deleted 5y ago
[deleted]
nightpool 5y ago
In this scenario, "@apply" is just "a css class", so i don't think it's appropriate to list that as a benefit tailwind has over inline styles. In both cases you'd be defining the styles somewhere else. Media queries are a good call out, they're definitely a benefit tailwind's approach has to the built-in browser support for inline styles. Another benefit is hover and focus states, which are very difficult to apply with inline styles.

dcre 5y ago

Absolutely. But that's not a downside, that's exactly what I want.

nightpool 5y ago
Then why not just type that, instead of having to learn a completely separate set of concepts to map to the underlying CSS properties & values? I program with inline CSS styles all the time when I'm prototyping something or building a page quickly.
- aidos 5y ago
  Because inline styles aren’t flexible enough to be used for everything, so you need to go out to external css eventually. With tailwind you can do “block md:flex hover:font-bold” and you’ve covered pseudo class cases and media queries very succinctly.
- psygn 5y ago
  See https://news.ycombinator.com/item?id=29502652 https://news.ycombinator.com/item?id=29502652
- dcre 5y ago
  It's much more concise than inline styles, variants and configuration give you a lot more power, and it's not a separate set of concepts. It's a subset of the same set of concepts.
- mixmastamyk 5y ago
  It's like radio presets instead of the full dial. Dial is still available, but a great majority of the time you use the presets.

Tade0 5y ago

Essentially. https://mobile.twitter.com/samthor/status/1402825668061130755 https://mobile.twitter.com/samthor/status/140282566806113075...

montroser 5y ago

Yes, or now with Tailwind v3.0 you can write that as <el class="[display: flex] [justify-content: start]">... I wish I were being hyperbolic, but alas, no: https://tailwindcss.com/blog/tailwindcss-v3#arbitrary-properties https://tailwindcss.com/blog/tailwindcss-v3#arbitrary-proper...

keyle 5y ago
Excuse my dad joke "There is a lot of wind at the end of that tail"!
drusepth 5y ago
To be fair, one of the big perks of Tailwind (IMO) is not having to have a big ol' folder of CSS that you have to figure out what applies where in HTML, but rather just having all your styling inline (while still staying consistent, which is the usual downside of inlining styles manually). Having to have a tailwind-addons.css when you needed random bits of CSS they didn't have classes for kind of sucked; this looks like a nice QOL that would get me back to the original goal of uniting structure-and-style into singular files. FWIW, I also hated using header files in C++ and also wrote a Ruby library for inlining all my tests immediately following the functions they test. I like having more context when looking at code without having to flip around from file to file to piece a bigger picture together.
- docmars 5y ago
  The same reason Vue introduced single-file components! If you haven't tried Vue yet, I strongly recommend it based on what you said.
  - drusepth 5y ago
    Thanks for the recommendation! I've mostly been thrust into React, which works for what I need but I definitely don't enjoy it. I'll give Vue a shot!
    - akvadrako 5y ago