tailwind UI - forms

[benkoshy]

Hey Janko

The proposal

If I put in a PR for a different type of form views - for Tailwind - is that something you will consider? Since I'm trying out RodAuth, and I must put in the work anyway, I figure why not copy paste and make a PR out of it, if it's useful to others?

I imagine this will necessitate another rake task:

rails generate rodauth:tailwind:views

Why?

To reduce the hurdle in getting people up and running with RodAuth. When people set up a new app, if tailwind is already there, then we can speedily try out RodAuth with minimal effort. right now without bootstrap, this is now the UI looks:

After they've tried it out, some might want to customize the login forms - they can do so, given they have a place to start.

is this a ridiculous idea?

[janko]

I wanted to have this as well, as Tailwind is my preferred CSS framework. One concern was the maintenance overhead, because I already found it difficult keep current view templates updated whenever I wanted to make changes. However, that seems to have stabilized.

I was considering having a separate gem that would provide different variants for different CSS frameworks, but I think Tailwind is vastly more popular than the rest, and it's probably strange to pull in another gem just for generators.

Because there is a good amount of logic in the generator that's not dependent on the CSS framework, I was thinking more about rails generate rodauth:views --tailwind. I'm also not 100% clear about the location of template sources, probably they could be in a tailwind subfolder inside app/views/rodauth/.

If you agree and have time to work on it, I would gladly accept a pull request 🙂

[benkoshy]

I'll give it a go.

[benkoshy]

@janko I've done the basic screens for tailwind but not the others just yet - things like webauthn, and sms views. do you want me to add this as well, or shall i do a work in progress PR with just the basic views (login, forgot password, change login etc.)?

I"m also trying to work out how to get the generator to work with the extra option.

app/views/rodauth/bootstrap #default
app/views/rodauth/tailwind  # --tailwind option

It's a little tricky, I beg your patience for it.

[janko]

I appreciate you working on this 🙏🏻. Feel free to open a WIP PR if you would like some early review. BTW, I was thinking that --css=tailwind might be even better (similar to what Rails has), as then the same option can be reused if we want to add a new CSS framework in the future.

[benkoshy]

I don't profess to be a tailwind genious, but I have cobbled something together: #114