UI Struggles with Sveltekit and TailwindCSS

Progress has been very slow recently. In starting the web application front end, I have discovered that I am very much a back-end developer. I simply don't enjoy front-end development. A huge part is of course my inexperience. And trying new frameworks and tools - like Sveltekit and TailwindCSS - certainly hasn't helped.

Previously I've just written plain Javascript and HTML when building web pages, and relied on a CSS library like Bulma to do the heavy lifting of page layouts. This time I wanted to stretch myself, a little, and adopt a reactive javascript framework (Sveltekit) and I've heard lots of good things about TailwindCSS.

It hasn't gone well. Sveltekit itself seems quite straightforward, though I find the documentation a bit lacking. It doesn't provide any pre-built UI components, so I've been trying a library called tw-elements to bridge that gap. It starts OK but I am finding, again, the documentation is very poor, and the useful functionality seems hidden away. For instance, here's a snippet on how to declare and trigger a modal dialog box:

<button
    type="button"
    data-bs-toggle="modal"
    data-bs-target="#save-dialog"
    disabled={!formIsValid}
    class="... tailwind styles here..."
    >Save</button>

<-- modal... ->
<div class="modal ... tw styles here..."
    id="save-dialog"
    ...
</div>

That single HTML attribute data-bs-target connects the 'Save' button to the 'save-dialog' modal (the div with the modal class). It's neat and avoids manual Javascript.

But now I need some additional behaviour to happen before the dialog pops up. And I cannot for the life of me find the documentation to support that. What little I have found is in github commit logs for features which I don't think has been released yet. So much so that I have raised an issue with the developers. The tw-elements library seems to be a rebadging/repacking of another library originally written for a different CSS framework, so perhaps I am just stretching my luck.

The other challenge is getting into the svelte way of thinking. I am not good with reactive programming. I still think in very procedural and object-orientated ways.

New UI Framework

I'm trying a different framework, Flowbite-Svelte. It offers real Svelte components, rather than the collection of styles and hidden javascript code that tw-elements provides. As such, it fits better into Svelte, and into my mental understanding. It's more programmatic. So far, its major downside is that is very opinionated in styles and behaviours. Users of Flowbite-Svelte are going to have a difficult time customising the appearance, and I think websites built with this will look very similar.

However, I've found that I can dig into the source code and copy the components, creating new versions which I can then customize. Essentially I'll be creating my own private fork of the framework. Not ideal, but certainly achievable.

Or I could just accept the current state of the UI and move on to more important things?