Comment on What are your thoughts on Skeleton(Svelte)?

snowe@programming.dev ⁨1⁩ ⁨year⁩ ago

• Hexarei@programming.dev ⁨1⁩ ⁨year⁩ ago

  Tailwind is an unrelated project, that’s just used by this one.

  Basically, TailwindCSS is a combination of two things:

  1. A huge set of “utility” CSS classes that apply consistent, basic styles, with tons of handy conventions for stuff like colors, shadows, border-radii, spacing - and it even lets you target them to hover state, active state, disabled state, users with prefers-color-scheme set to dark, etc.
  2. A JIT-compiled system of creating one-off CSS by just writing the name of a not-yet-existent utility class.

  The main benefits, I find, are mostly:

  • Keeping your style controls directly present in the HTML, without needing to remember conventions or arbitrary “semantic” names for things.
  • Consistency in convention. Need a color? There’s a set (configurable) list of them. text-green-500 and you suddenly have green text with a middle-of-the-road luminosity. Need spacing? Use one of the padding or margin utilities, and you’ll have consistent spacing based on a convention. py-4 and you know you get “level 4” padding without having to care what the exact pixel amount is. But! You know it’s the same as everywhere else you’ve done py-4. No need to go fiddle with a stylesheet.

  Tailwind focuses on coupling your styling to your HTML by using tiny, focused, glanceable utility classes (<div></div>) rather than by needing to create a ton of potentially-confusing “semantic” classes^[1]^ (<div></div>).

  There are tons of classes in it, and I’ve found it to be super useful. Want to center something, horizontally and vertically? Here’s how in Tailwind:

  <div>
      <div>I'm centered!</div>
  </div>
  

  And if you need a one-off specific setup - something like display: grid; grid-template-columns: 30px 1fr 1fr 20px, you can do it with the JIT as such: `

  source

  • snowe@programming.dev ⁨1⁩ ⁨year⁩ ago

    Thanks for the explanation. Looks like there was a lemmy issue with that classes but I think I get it.

    source
  • ahto@feddit.de ⁨1⁩ ⁨year⁩ ago

    FYI lemmy ate all the classes on your divs.

    source

    • Hexarei@programming.dev ⁨1⁩ ⁨year⁩ ago

      RIP

      source