3 ms·

You are trying to solve problems which were created by Tailwind, and you end up with Bootstrap.

peterkelly 5y ago
I've never used Tailwind, but am familiar with Bootstrap. When looking at the examples, the ones on the right looked pretty much exactly like Bootstrap and I didn't understand what was interesting or novel about it. Is the code on the left (with lots of classes) actually what tailwind is like to use in practice?
- lyian 5y ago
  Yes, the core idea is that you use a class which applies one css property to the HTML element. In practice you can end up with a lot of classes.
- ushakov 5y ago
  yes! https://tailwindcss.com https://tailwindcss.com
- Phillips126 5y ago
  > Is the code on the left (with lots of classes) actually what tailwind is like to use in practice? As a fan of tailwind, I can say that I initially thought this was dumb and it would be hard to read through a huge number of classes applied to each HTML element. Later, I found that for many of my reusable components, I could combine classes into a single class. As an example, my stylesheet may look like this: @tailwind base; @tailwind components; @tailwind utilities; @layer components { .button { @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300; } } I can now just give all of my reusable buttons the ".button" class instead of the giant string above.
  - zkldi 5y ago
    But why would you use @apply instead of something like: .button { background-color: $gray-100; border: 1px $gray-200 /\* so on... \*/ } i don't understand how these "micro" css classes actually help versus just setting the property.
    - neurotrace 5y ago
      After working with Tailwind for a period of time I came to the exact same conclusion. You can achieve all of this in a better way using CSS variables. You can transform this: @tailwind base; @tailwind components; @tailwind utilities; @layer components { .button { @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300; } } in to this: .button { font-size: var(--text-2xl); padding: var(--p-2); background-color: var(--gray-100); color: var(--gray-600); border: solid 1px var(--gray-200); pointer: cursor; } .button:hover { background-color: var(--gray-200); border-color: var(--gray-300); } Adjust variable names to taste. No build step, no extra tooling, just as readable in my opinion. On top of that, using CSS variables means that those values can be changed at runtime. You basically get user-driven theming for free. I'm building an app like this right now and it's been lovely.
      - e12e 5y ago
        How do you deal with media queries/responsiveness?
        neurotrace 5y ago
        I'm on mobile so forgive me for not giving more extensive code examples. In my case, I'm building my app with React, TypeScript, and react-jss. I've got an enum which stores my common media queries and I just use it in the style declaration. button: { [MediaQueries.Medium]: ... } I can't use CSS variables for that but I personally don't think it's useful to let the user redefine those queries anyway
      - zkldi 5y ago
  - wishinghand 5y ago
    Couldn't you just write a normal CSS class though, instead of going through the rigmarole of Tailwind?

I've never used Tailwind, but am familiar with Bootstrap. When looking at the examples, the ones on the right looked pretty much exactly like Bootstrap and I didn't understand what was interesting or novel about it. Is the code on the left (with lots of classes) actually what tailwind is like to use in practice?

lyian 5y ago
Yes, the core idea is that you use a class which applies one css property to the HTML element. In practice you can end up with a lot of classes.
ushakov 5y ago
yes! https://tailwindcss.com https://tailwindcss.com
Phillips126 5y ago
> Is the code on the left (with lots of classes) actually what tailwind is like to use in practice? As a fan of tailwind, I can say that I initially thought this was dumb and it would be hard to read through a huge number of classes applied to each HTML element. Later, I found that for many of my reusable components, I could combine classes into a single class. As an example, my stylesheet may look like this: @tailwind base; @tailwind components; @tailwind utilities; @layer components { .button { @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300; } } I can now just give all of my reusable buttons the ".button" class instead of the giant string above.
- zkldi 5y ago
  But why would you use @apply instead of something like: .button { background-color: $gray-100; border: 1px $gray-200 /\* so on... \*/ } i don't understand how these "micro" css classes actually help versus just setting the property.
  - neurotrace 5y ago
    After working with Tailwind for a period of time I came to the exact same conclusion. You can achieve all of this in a better way using CSS variables. You can transform this: @tailwind base; @tailwind components; @tailwind utilities; @layer components { .button { @apply text-2xl p-2 bg-gray-100 text-gray-600 border border-gray-200 cursor-pointer hover:bg-gray-200 hover:border-gray-300; } } in to this: .button { font-size: var(--text-2xl); padding: var(--p-2); background-color: var(--gray-100); color: var(--gray-600); border: solid 1px var(--gray-200); pointer: cursor; } .button:hover { background-color: var(--gray-200); border-color: var(--gray-300); } Adjust variable names to taste. No build step, no extra tooling, just as readable in my opinion. On top of that, using CSS variables means that those values can be changed at runtime. You basically get user-driven theming for free. I'm building an app like this right now and it's been lovely.
    - e12e 5y ago
      How do you deal with media queries/responsiveness?
      - neurotrace 5y ago
        I'm on mobile so forgive me for not giving more extensive code examples. In my case, I'm building my app with React, TypeScript, and react-jss. I've got an enum which stores my common media queries and I just use it in the style declaration. button: { [MediaQueries.Medium]: ... } I can't use CSS variables for that but I personally don't think it's useful to let the user redefine those queries anyway
    - zkldi 5y ago
- wishinghand 5y ago
  Couldn't you just write a normal CSS class though, instead of going through the rigmarole of Tailwind?