3 ms·
Shoelace is more akin to Bootstrap. You can use it for quickly tinkering, prototyping, or as a foundation for your own design system. One thing Shoelace doesn'
by claviska 6y ago
Shoelace is more akin to Bootstrap. You can use it for quickly tinkering, prototyping, or as a foundation for your own design system.
One thing Shoelace doesn't provide right now is a set of base styles. I've considered offering these as an opt-in CSS class or a <sl-prose> component, but I'm not sure it belongs tightly coupled with the library.
On one hand, it makes sense to provide a single "theme" that styles both components AND the underlying website/app. On the other hand, this will make themes very opinionated and potentially overbearing. I still need to think about this more.
In the meantime, you can use something like Tailwind's typography plugin [1] to handle base styles and use Shoelace in lieu of Bootstrap. IMO Shoelace + Tailwind is a great combination for those who prefer utility classes.
1. https://github.com/tailwindcss/typography https://github.com/tailwindcss/typography
- Ataraxy 6y agoWhat would be the convention for using tailwind to style components in general?
- claviska 6y agoYou can use Tailwind classes on all your markup as you normally would. In terms of Shoelace components, they're more limited to layout, spacing, flexbox, grid, etc. for arranging and positioning (e.g. don't expect class="btn btn-blue" to turn a Shoelace button into a Tailwind button — although you can use them alongside each other if you want). To style the internals of a Shoelace component, you can target it in a stylesheet using CSS custom properties or CSS parts as described in the docs. [1] 1. https://shoelace.style/getting-started/customizing https://shoelace.style/getting-started/customizing
- manjalyc 6y agoSounds great! I'll have try it out in my next pet project.