4 ms·

I don't like Tailwind, except for pure layouting where it truly shines. My belief is this: we should think of layouting and styling as two distinct concepts and

I don't like Tailwind, except for pure layouting where it truly shines. My belief is this: we should think of layouting and styling as two distinct concepts and it doesn't help that CSS is used for both. After years of experimenting with various CSS approaches, I believe using Tailwind for layout and styled-components for styles is the ultimate setup for React applications.

daigoba66 4y ago
How do you distinguish what is "layout" versus "style"? I know there are some obvious things, but like you said CSS is used for both. So there is a lot "grey area". Especially when "style" can affect the "layout".
- pessimizer 4y ago
  Having gray area doesn't mean you can't separate purposes whenever possible (if that's what you want to do.)
unsupp0rted 4y ago
Same feeling here. In Tailwind, I'll use a `p-3` or a `.flex.items-center` all day, but making a nice button is such a slog, since I'm coming from a Vuetify background. Vuetify also has the same layout classes as Tailwind, like `pa-3` and `.d-flex.align-center` I use Vuetify + Pug (instead of raw HTML templates), so I get to make buttons like this: v-btn(outlined color="accent" @click="handleClick") Do Stuff or a Data Table with, say, a custom-formatted UPC column, like this: v-data-table(:loading="loading", :items="items", :headers="headers", :items-per-page="50" dense).my-3 template(v-slot:item.upc="{ item }") span {{formatUpc(item.upc)}} (I like to separate attributes with commas, which is valid pug but invalid HTML) Sure, I could get something like TailwindUI, but their components are walls of divs and classes that each take half an hour to load into my head to visualize what's creating all the combos of states (regular, hover, focus). So my Vuetify + Pug approach works great for greenfield projects that I create. But if I'm downloading a nice template for a side project, say from Cruip.com, it's not like they're going to use the same build chain as me, and they do have to settle on a standard CSS library, so they default to Tailwind (just like 5~10 years ago they would have defaulted to Bootstrap).
- nightski 4y ago
  I mean what is stopping you from making a Button component once w/ Tailwind similar to Vuetify?
  - unsupp0rted 4y ago
    I've used probably 50~80% of Vuetify if taking together the last dozen projects I've done. I'd basically have to re-implement all of Vuetify in Tailwind, from buttons to chips to toggles to alerts, etc? The v-data-table is like 10 sub-components stuck together, each of which I'd have to re-implement with walls of Tailwind classes.
- sgt 4y ago
  The secret of TailwindUI is to take the HTML version of their code and just built your own components (e.g. if using VueJS). I would not use their suggested VueJS examples, as generally I prefer the options API. It does however add some extra time to build your app - but consider that they have already built 90% for you - in terms of the design etc.

daigoba66 4y ago

How do you distinguish what is "layout" versus "style"? I know there are some obvious things, but like you said CSS is used for both. So there is a lot "grey area". Especially when "style" can affect the "layout".

pessimizer 4y ago
Having gray area doesn't mean you can't separate purposes whenever possible (if that's what you want to do.)

unsupp0rted 4y ago

Same feeling here. In Tailwind, I'll use a `p-3` or a `.flex.items-center` all day, but making a nice button is such a slog, since I'm coming from a Vuetify background. Vuetify also has the same layout classes as Tailwind, like `pa-3` and `.d-flex.align-center` I use Vuetify + Pug (instead of raw HTML templates), so I get to make buttons like this: v-btn(outlined color="accent" @click="handleClick") Do Stuff or a Data Table with, say, a custom-formatted UPC column, like this: v-data-table(:loading="loading", :items="items", :headers="headers", :items-per-page="50" dense).my-3 template(v-slot:item.upc="{ item }") span {{formatUpc(item.upc)}} (I like to separate attributes with commas, which is valid pug but invalid HTML) Sure, I could get something like TailwindUI, but their components are walls of divs and classes that each take half an hour to load into my head to visualize what's creating all the combos of states (regular, hover, focus). So my Vuetify + Pug approach works great for greenfield projects that I create. But if I'm downloading a nice template for a side project, say from Cruip.com, it's not like they're going to use the same build chain as me, and they do have to settle on a standard CSS library, so they default to Tailwind (just like 5~10 years ago they would have defaulted to Bootstrap).

nightski 4y ago
I mean what is stopping you from making a Button component once w/ Tailwind similar to Vuetify?
- unsupp0rted 4y ago
  I've used probably 50~80% of Vuetify if taking together the last dozen projects I've done. I'd basically have to re-implement all of Vuetify in Tailwind, from buttons to chips to toggles to alerts, etc? The v-data-table is like 10 sub-components stuck together, each of which I'd have to re-implement with walls of Tailwind classes.
sgt 4y ago
The secret of TailwindUI is to take the HTML version of their code and just built your own components (e.g. if using VueJS). I would not use their suggested VueJS examples, as generally I prefer the options API. It does however add some extra time to build your app - but consider that they have already built 90% for you - in terms of the design etc.