Web Styling: Tailwind-based or Not?

Issue

• I am finally ready to begin creation of my SmartDebtCoach.com (sdc.com) website, built from a monorepo using Astro. Per the attached KB note on my Web Tech Stack, my current decision for styling, including UI components, is to use the Tailwind-based Shadcn library for Svelte Shadcn-Svelte (and its associated ecosystem).
• But I am not entirely comfortable with this decision. I recognize the huge popularity and many of the advantages of the Shadcn approach, but the Tailwind-based styling goes against my natural preference for a semantic and clean separation of concerns, as CSS is intended to provide.

Solutions

1. The simplest and easiest solution to increase my confidence in this decision is to better understand how the Shadcn-styling approach does allow clean and semantic website content, at least at an acceptable level. Perhaps you can provide an example or two of HTML with Shadcn-Svelte-styled components to show how a clean component based approach hides most of the verbose Tailwind styling.
2. The other possible solution is to not use a Tailwind-based styling approach. My research into these solutions did not inspire confidence, aside perhaps from Svelte Material UI (SMUI), https://sveltematerialui.com/, which appears to be professional, complete and stable.

Task

• Please do detailed deep research on these two possible solutions to help me make a decision that I can have confidence in for this foundational issue.

Decision

• Stick with Shadcn-Svelte as it can provide best of both worlds.
• See UI Component System & Styling

---

Below are my summary notes from researching Tailwind-based and non-Tailwind solutions.

My Research on Styling Solutions

• Tailwind-based

  • Shadcn-Svelte

  • Flowbite Svelte
    https://flowbite-svelte.com/
    • Very complete
    • Builder tools
  • Shadcn
    • Many components, including many chart components, which is unique
    • Includes blocks, or groups of components
  • Skeleton UI
    • Nice theming

• Non-Tailwind

  • Svelte Material UI (SMUI)
    • https://sveltematerialui.com/
    • Professional, complete and stable
  • SvelteUI (Svelte)
    • – A newer Svelte UI kit with ~50 components and built-in accessibility. According to its docs, “SvelteUI includes 50+ customizable components that are accessible according to WAI-ARIA standards.”
    • Not maintained, not current
  • Shoelace (Web Components)
    • Shoelace.style, https://webawesome.com/
    • Pros: Framework-agnostic (future-proof!), excellent design out-of-the-box, fantastic theming capabilities with CSS custom properties, top-tier accessibility, easy integration with Astro, and Svelte
    • theme generator
    • FOSS, Pro for $160/yr