3 ms·

The opposite. Tailwind pretty much guarantees you’ve got consistent ratios, colors, etc across your product.

Macha 6y ago
Our experience has been absolutely not with an inhouse atomic css framework we ultimately ripped out of a project. Something like pd-md (for "medium padding") gets applied somewhere, then the decision is made that e.g. buttons should have less padding unless they're in a dialog, so someone goes around replacing it with "pd-sm" on buttons except they miss some and other developers don't get the message and add new buttons still using "pd-md" as they just copied and pasted the styling from a button that hadn't been updated and all of a sudden different forms have different padding on all your buttons, something that wouldn't have happened if making a button was just applying class="button".
- 9dev 6y ago
  For me it makes sense to create a component class in that case, using Tailwind‘s `@apply` to add the generic padding: .button { @apply py-2 px-4; } This ensures CI elements are styled the same way everywhere, but still relies on the Tailwind config to figure out what „2 abstract units of vertical padding“ mean in your application.
  - Macha 6y ago
    But then why not go all the way and do .button { padding: var(--medium-padding) var(--medium-padding); } Or use LESS/SCSS/etc if the var(--) syntax is really that offputting.
    - 9dev 6y ago
      No, I actually love CSS variables. But they invariably will be abused in the long term. What you called medium padding might suddenly be decreased to be a value lower than small padding, and that’s the point where it all starts to go to hell. The point of Tailwind is that it’s a straightforward way to handle all the CSS complexity and put the moving parts into a single config file that works the same everywhere.
      - Macha 6y ago
        > What you called medium padding might suddenly be decreased to be a value lower than small padding, and that’s the point where it all starts to go to hell. Tailwind: https://tailwindcss.com/docs/theme#spacing https://tailwindcss.com/docs/theme#spacing Would it be strange to define p-2 to be smaller than p-1? Yes. Exactly as strange as defining your padding-medium variable to be smaller than padding-small.

Our experience has been absolutely not with an inhouse atomic css framework we ultimately ripped out of a project. Something like pd-md (for "medium padding") gets applied somewhere, then the decision is made that e.g. buttons should have less padding unless they're in a dialog, so someone goes around replacing it with "pd-sm" on buttons except they miss some and other developers don't get the message and add new buttons still using "pd-md" as they just copied and pasted the styling from a button that hadn't been updated and all of a sudden different forms have different padding on all your buttons, something that wouldn't have happened if making a button was just applying class="button".

9dev 6y ago
For me it makes sense to create a component class in that case, using Tailwind‘s `@apply` to add the generic padding: .button { @apply py-2 px-4; } This ensures CI elements are styled the same way everywhere, but still relies on the Tailwind config to figure out what „2 abstract units of vertical padding“ mean in your application.
- Macha 6y ago
  But then why not go all the way and do .button { padding: var(--medium-padding) var(--medium-padding); } Or use LESS/SCSS/etc if the var(--) syntax is really that offputting.
  - 9dev 6y ago
    No, I actually love CSS variables. But they invariably will be abused in the long term. What you called medium padding might suddenly be decreased to be a value lower than small padding, and that’s the point where it all starts to go to hell. The point of Tailwind is that it’s a straightforward way to handle all the CSS complexity and put the moving parts into a single config file that works the same everywhere.
    - Macha 6y ago
      > What you called medium padding might suddenly be decreased to be a value lower than small padding, and that’s the point where it all starts to go to hell. Tailwind: https://tailwindcss.com/docs/theme#spacing https://tailwindcss.com/docs/theme#spacing Would it be strange to define p-2 to be smaller than p-1? Yes. Exactly as strange as defining your padding-medium variable to be smaller than padding-small.