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).
Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!
Cross posting is strongly encouraged in the instance. If you feel your post or another person’s post makes sense in another community cross post into it.
Hope you enjoy the instance!
Follow the wormhole through a path of communities !webdev@programming.dev
Theres too many skeletons on the front end. We need unique names.
Im not sure why this library exists.
Could someone explain tailwind and skeleton for me? I’ve heard of tailwind but haven’t ever looked into it
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.
Thanks for the simple explanation!
No worries
Tailwind is an unrelated project, that’s just used by this one.
Basically, TailwindCSS is a combination of two things:
prefers-color-scheme
set to dark, etc.The main benefits, I find, are mostly:
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 donepy-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:
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: `FYI lemmy ate all the classes on your divs.
RIP
Thanks for the explanation. Looks like there was a lemmy issue with that classes but I think I get it.
Having used tailwind a little bit, I have nothing but praise for it. Effortless copy/pasting of components with confidence, really nice look by default, easy tweaking, absolutely no management or planning required to organize your CSS, and it’s all right there, directly on your html, never anywhere you have to hunt for it. Feels very freeing to just… not think about CSS at all.
And the “clutter” really is fine, modern IDEs with good syntax highlighting, plus a tailwind extension to help complete the class names and clean up accidental duplicates or conflicting properties, and you’re good.
You and with plugins to sort the classes order it’s so much easier to read and debug.
Hard agree.
It looks slightly gross if you try to read/internalize it, but I’ve been making web pages since the mid-90’s and it’s the least obnoxious way to style html I’ve ever used.
Yeah, even then - I’ve seen at least a few IDEs offer extensions that hide the contents of the
class
attribute until you hover it. So if you’re the sort who finds it visually distracting, it’s fairly easy to overcome.