v2.0 Release Notes 🎉 · skeletonlabs/skeleton · Discussion #1945
github.com
Today we're happy to introduce Skeleton v2! This represents a huge step forward for Skeleton, introducing a number of critical updates, new features, and of course a handful of breaking changes. We...

I just saw their recent update and it’s quite impressive. Not the biggest fan of Tailwind but it definitely seems to make svelte development faster and less painful (not that it’s any more painful than it should be).

  • snowe@programming.devM
    5·
    1 year ago

    Could someone explain tailwind and skeleton for me? I’ve heard of tailwind but haven’t ever looked into it

    • Hexarei@programming.dev
      3·
      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: `

    • OscarRobin@lemmy.world
      2·
      1 year ago

      It provides a massive set of CSS classes which allows you to do styling inside HTML instead of manually in CSS. It provides the benefits of consistency and reduces the need to name things which can be a big time sink. It only includes the classes that you use in the final build.

      It does have the potential to significantly bloat HTML when many classes are needed for a given element though, and directly opposes the original intent that HTML defines only content while CSS defines styling.