4 ms·

> In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailw

> In many tailwind projects, you inevitably end up wanting to standardize how a button looks, how a field looks, etc., rather than copy+paste the same 20+ tailwind classes that you need to implement a nice looking button in tailwind. Isn't this called classes and Ids in CSS? Is Tailwind just CSS on top of CSS?

qq99 1y ago
Tailwind is a set of utility CSS classes you can use that tend to guide you into writing CSS that looks like it "fits" together. E.g., consistent gaps if you use `gap-1`, `gap-2`, etc., rather than a hodgepodge of "hmm did I use margin-right: 2px or 1em or what" that can emerge in a large CSS codebase with many developers. We can use a `m-1` or `p-1` class to define a base padding, and as long as everyone knows that `1` is the amount of space to use by default, everything will generally look like it fits together. Later, you can optionally redefine what `1` means if you want more space in your design. In a way, using tailwind can be like variablizing your CSS at compile time (in a faster way than just using writing and using CSS variables). For a lot of things, using just 1-3 tailwind classes on a div is sufficient for many common tasks, e.g., `flex flex-row gap-1` boom done. You can put this directly in the HTML, and is considered "fine". An example from DaisyUI's site is: ``` <button class="bg-zinc-100 border font-semibold text-zinc-900 text-sm px-4 duration-200 py-2.5 transition-all hover:border-zinc-300 hover:bg-zinc-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 active:translate-y-[0.5px] inline-flex gap-2 rounded-sm active:border-zinc-300 active:bg-zinc-200 active:shadow-none text-center align-middle cursor-pointer border-zinc-200 dark:border-zinc-700 dark:bg-neutral-700 dark:text-zinc-300 dark:hover:border-zinc-950 dark:hover:bg-zinc-950 dark:focus-visible:outline-zinc-200 dark:active:border-zinc-950 dark:active:bg-zinc-900"> ``` This is everything needed to make a button look nice in tailwind, and obviously it would be insane to copy+paste this every time you want a nice looking button in your HTML (not to mention the byte size, it's just unreadable). The best thing to do is define a `.btn` or `.button` (usually I might avoid `button` DOM level selector for future flexibility) and encapsulate these styles as a semantic component in your .css file. You can write them with raw CSS or `@apply bg-zinc-100 border ...;` using tailwind style @apply. This is what DaisyUI provides you, a shortcut to common nice looking UI components.
- conductr 1y ago
  > In a way, using tailwind can be like variablizing your CSS at compile time Isn't this what SCSS or Sass did though? They were around long before tailwind. Is there a reason to pick Tailwind over those? I assume most projects were using them then decided to migrate to tailwind once it became popular, but why did that happen? Was it just keeping up with the cool kids or some actual differentiating features? I still just handwrite my frontend code so I'm rather ignorant on this topic, it seems like a lot more extra hoops than just writing by hand which actually isn't very difficult (but I'm a single dev on rather smaller projects)
  - wahnfrieden 1y ago
    SCSS and Sass don't have a "gap-1"
    - pests 1y ago
      Then how does tailwind implement it? Use that.
      - conductr 1y ago
        If I recall, the low effort way to do it in the past was to bring in another CSS framework eg. bootstrap, bulma, foundation, etc. So it seems, tailwind has brought it all together along with the improvements that were mentioned
    - spicybright 1y ago
      It's not supposed to, the big value of those is variables and combining rules together in a modular way. You'd define your own gap-1. It's not supposed to be a design system.
      - wahnfrieden 1y ago
        Yes that’s why Tailwind is different
deleted 1y ago
[deleted]
danenania 1y ago
Imo the main benefit of Tailwind (or any other style-in-JS approach) is parameterization. Styling often changes based on runtime state. Mapping runtime states to css classes/ids (or scss functions et al) is brittle and doesn't scale well.
exiguus 1y ago
The hole point of having a Component-Library is to reuse Components. And a component is markup, style and functionality. Not only the CSS. E.g. you want to use the same Button-Component all over the place in your project and not re-declare <button class="btn btn-secondary">text</button> again and again in your project. If you think about more complex Component like a sort able table, it becomes more obvious.

qq99 1y ago

Tailwind is a set of utility CSS classes you can use that tend to guide you into writing CSS that looks like it "fits" together. E.g., consistent gaps if you use `gap-1`, `gap-2`, etc., rather than a hodgepodge of "hmm did I use margin-right: 2px or 1em or what" that can emerge in a large CSS codebase with many developers. We can use a `m-1` or `p-1` class to define a base padding, and as long as everyone knows that `1` is the amount of space to use by default, everything will generally look like it fits together. Later, you can optionally redefine what `1` means if you want more space in your design. In a way, using tailwind can be like variablizing your CSS at compile time (in a faster way than just using writing and using CSS variables). For a lot of things, using just 1-3 tailwind classes on a div is sufficient for many common tasks, e.g., `flex flex-row gap-1` boom done. You can put this directly in the HTML, and is considered "fine". An example from DaisyUI's site is: ``` <button class="bg-zinc-100 border font-semibold text-zinc-900 text-sm px-4 duration-200 py-2.5 transition-all hover:border-zinc-300 hover:bg-zinc-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 active:translate-y-[0.5px] inline-flex gap-2 rounded-sm active:border-zinc-300 active:bg-zinc-200 active:shadow-none text-center align-middle cursor-pointer border-zinc-200 dark:border-zinc-700 dark:bg-neutral-700 dark:text-zinc-300 dark:hover:border-zinc-950 dark:hover:bg-zinc-950 dark:focus-visible:outline-zinc-200 dark:active:border-zinc-950 dark:active:bg-zinc-900"> ``` This is everything needed to make a button look nice in tailwind, and obviously it would be insane to copy+paste this every time you want a nice looking button in your HTML (not to mention the byte size, it's just unreadable). The best thing to do is define a `.btn` or `.button` (usually I might avoid `button` DOM level selector for future flexibility) and encapsulate these styles as a semantic component in your .css file. You can write them with raw CSS or `@apply bg-zinc-100 border ...;` using tailwind style @apply. This is what DaisyUI provides you, a shortcut to common nice looking UI components.

conductr 1y ago
> In a way, using tailwind can be like variablizing your CSS at compile time Isn't this what SCSS or Sass did though? They were around long before tailwind. Is there a reason to pick Tailwind over those? I assume most projects were using them then decided to migrate to tailwind once it became popular, but why did that happen? Was it just keeping up with the cool kids or some actual differentiating features? I still just handwrite my frontend code so I'm rather ignorant on this topic, it seems like a lot more extra hoops than just writing by hand which actually isn't very difficult (but I'm a single dev on rather smaller projects)
- wahnfrieden 1y ago
  SCSS and Sass don't have a "gap-1"
  - pests 1y ago
    Then how does tailwind implement it? Use that.
    - conductr 1y ago
      If I recall, the low effort way to do it in the past was to bring in another CSS framework eg. bootstrap, bulma, foundation, etc. So it seems, tailwind has brought it all together along with the improvements that were mentioned
  - spicybright 1y ago
    It's not supposed to, the big value of those is variables and combining rules together in a modular way. You'd define your own gap-1. It's not supposed to be a design system.
    - wahnfrieden 1y ago
      Yes that’s why Tailwind is different

deleted 1y ago

[deleted]

danenania 1y ago

Imo the main benefit of Tailwind (or any other style-in-JS approach) is parameterization. Styling often changes based on runtime state. Mapping runtime states to css classes/ids (or scss functions et al) is brittle and doesn't scale well.

exiguus 1y ago

The hole point of having a Component-Library is to reuse Components. And a component is markup, style and functionality. Not only the CSS. E.g. you want to use the same Button-Component all over the place in your project and not re-declare <button class="btn btn-secondary">text</button> again and again in your project. If you think about more complex Component like a sort able table, it becomes more obvious.