5 ms·

What I'm struggling with is consistency across pages, especially if you are not using a component framework. I'll often end up with 50 similar, but different l

What I'm struggling with is consistency across pages, especially if you are not using a component framework. I'll often end up with 50 similar, but different looking buttons. On the other side when using a component framework, re-implementing all components when there are solutions already available (i.e. very similar in terms of look and feel Ant [1] or even Material-Ui [2]) sounds counter-productive. Didn't you stumble upon such issue? How did you handle this? [1] https://ant.design/ https://ant.design/ [2] https://material-ui.com/ https://material-ui.com/

keithnz 6y ago
you can make common styles for things like buttons, if you watch adams tutorials videos, they cover this reasonably early on
- maciekmm 6y ago
  It works for simple single-element components. When you have things nested it gets out of control really quickly.
  - keithnz 6y ago
    how does it get out of control? I've been using it for quite sometime now (with Vue). I really haven't experienced things getting out of control. Curious what problems you have had?
- markdown 6y ago
  > adams tutorials videos They're all gone. Vanished completely from the website. And I was half-way through!!! Now they link to somebody's youtube channel for random Tailwind stuff rather than the nice walkthrough/tutorial that were the originals.
  - dsissitka 6y ago
    Is this what you're looking for? https://v1.tailwindcss.com/course/setting-up-tailwind-and-postcss https://v1.tailwindcss.com/course/setting-up-tailwind-and-po... There's a version selector in the upper right corner.
    - markdown 6y ago
      Oh, thanks! I didn't realise they still had the old site up somewhere.
  - keithnz 6y ago
    seem to be all there :- https://www.youtube.com/playlist?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR https://www.youtube.com/playlist?list=PL7CcGwsqRpSM3w9BT_21t...
    - markdown 6y ago
      Oh, thank you. I didn't realise they were on YT as well. The new website points to somebody else's channel (Tailwind Labs) instead of this one.
  - azemetre 6y ago
    Where were you watching them? Assuming you mean these, hosted on egghead: https://egghead.io/instructors/adam-wathan https://egghead.io/instructors/adam-wathan
mintone 6y ago
If you're not using components (react/vue etc.) then you can use @apply - I think the secret with that is to blend inline tailwind and the applied style so you might say.. .button { @apply rounded-md bg-gray-600 hover:bg-gray-300 text-white; } and then inline you might use class="button px-2 py-4" or similar to create specific styles. Of course these could be abstracted again to .big-button .small-button etc. Tailwind has changed not only how I write CSS but how I think about writing front-end code completely - it's really great once it clicks.
- kall 6y ago
  I like tailwind a lot but that style of using @apply smells exactly like creating ad-hoc css classes to me
  - rvense 6y ago
    How is it ad hoc? You're creating a class .button, but you're using the Tailwind-specified design system. This is how the framework is meant to be used! Atomic/utility-first CSS doesn't mean that you shouldn't make classes. It just means that you should make them where they make sense. Don't make a new class just to add a margin to something,or whatever. If the margin is literally all this element needs, use the utility class directly. If it's the only place you'll use this combination of classes and naming the combination doesn't add anything, you might as well just keep it inline. But if you find yourself repeating a bunch of utility classes, make a class with a semantic name once you start seeing the pattern. In some cases, like buttons, you might see that pattern before you've even started. That's fine. You should definitely have a button class (or three). What you (probably) shouldn't have a is .info-page__navigation__aside__second_button that just includes the button class and adds a margin, or whatever... like we did at my old job. Urgh. I refer to this as "might as well be inline CSS" - making extremely specific classes that are only used once. If your CSS classes aren't reusable, all you gain from not having it inline is the joy of maintaining two text files, and manually look up the cross references. Tailwind solves this perfect, IME.
    - kall 6y ago

keithnz 6y ago

you can make common styles for things like buttons, if you watch adams tutorials videos, they cover this reasonably early on

maciekmm 6y ago
It works for simple single-element components. When you have things nested it gets out of control really quickly.
- keithnz 6y ago
  how does it get out of control? I've been using it for quite sometime now (with Vue). I really haven't experienced things getting out of control. Curious what problems you have had?
markdown 6y ago
> adams tutorials videos They're all gone. Vanished completely from the website. And I was half-way through!!! Now they link to somebody's youtube channel for random Tailwind stuff rather than the nice walkthrough/tutorial that were the originals.
- dsissitka 6y ago
  Is this what you're looking for? https://v1.tailwindcss.com/course/setting-up-tailwind-and-postcss https://v1.tailwindcss.com/course/setting-up-tailwind-and-po... There's a version selector in the upper right corner.
  - markdown 6y ago
    Oh, thanks! I didn't realise they still had the old site up somewhere.
- keithnz 6y ago
  seem to be all there :- https://www.youtube.com/playlist?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR https://www.youtube.com/playlist?list=PL7CcGwsqRpSM3w9BT_21t...
  - markdown 6y ago
    Oh, thank you. I didn't realise they were on YT as well. The new website points to somebody else's channel (Tailwind Labs) instead of this one.
- azemetre 6y ago
  Where were you watching them? Assuming you mean these, hosted on egghead: https://egghead.io/instructors/adam-wathan https://egghead.io/instructors/adam-wathan

mintone 6y ago

If you're not using components (react/vue etc.) then you can use @apply - I think the secret with that is to blend inline tailwind and the applied style so you might say.. .button { @apply rounded-md bg-gray-600 hover:bg-gray-300 text-white; } and then inline you might use class="button px-2 py-4" or similar to create specific styles. Of course these could be abstracted again to .big-button .small-button etc. Tailwind has changed not only how I write CSS but how I think about writing front-end code completely - it's really great once it clicks.

kall 6y ago
I like tailwind a lot but that style of using @apply smells exactly like creating ad-hoc css classes to me
- rvense 6y ago
  How is it ad hoc? You're creating a class .button, but you're using the Tailwind-specified design system. This is how the framework is meant to be used! Atomic/utility-first CSS doesn't mean that you shouldn't make classes. It just means that you should make them where they make sense. Don't make a new class just to add a margin to something,or whatever. If the margin is literally all this element needs, use the utility class directly. If it's the only place you'll use this combination of classes and naming the combination doesn't add anything, you might as well just keep it inline. But if you find yourself repeating a bunch of utility classes, make a class with a semantic name once you start seeing the pattern. In some cases, like buttons, you might see that pattern before you've even started. That's fine. You should definitely have a button class (or three). What you (probably) shouldn't have a is .info-page__navigation__aside__second_button that just includes the button class and adds a margin, or whatever... like we did at my old job. Urgh. I refer to this as "might as well be inline CSS" - making extremely specific classes that are only used once. If your CSS classes aren't reusable, all you gain from not having it inline is the joy of maintaining two text files, and manually look up the cross references. Tailwind solves this perfect, IME.
  - kall 6y ago