UI - Spike for Integration with Tailwind CSS

[mstanton1]

The Registrars Transparency Registry team is piloting use of Tailwind for a front-end CSS framework. A request has been made for other teams to also research the impacts of integrating with Tailwind.
Timeboxed to 1 day.

Research Summary
Integrating Tailwind with Vuetify:

Objective: To assess the feasibility of integrating Tailwind CSS into our existing Vuetify project, examining compatibility and potential benefits.

Key Findings:

Tailwind Integration: We were able to successfully incorporate Tailwind into our project. This provides a more utility-first approach to styling, which can be beneficial for specific design requirements.

Selective Vuetify Overrides: One of the strengths we observed was the capability to selectively disable or override specific Vuetify styles. This granularity means we aren't tied to Vuetify's design decisions across the board. Instead, we can choose which components or styles we want to retain and which ones we'd prefer to handle with Tailwind.

Headless UI Components: Taking our exploration a step further, we also experimented with headless UI components. These components offer a greater degree of customization since they come without default styling. Our tests confirmed that they can be integrated effectively in conjunction with Tailwind.

Nuxt Components Challenges: While our initial integrations were largely successful, we did encounter some roadblocks when trying to incorporate Nuxt Components. These challenges suggest that there might be compatibility concerns between components designed within a Nuxt ecosystem and our traditional Vue/Vuetify setup. The primary issue seems to stem from the use of Nuxt-specific components.

Conclusion and Way Forward:
Our spike indicates that while integrating Tailwind with Vuetify presents several advantages, there are also challenges to consider, especially when introducing Nuxt components. However, for teams or projects considering a transition away from Vuetify, our findings provide a roadmap. It's entirely feasible to phase out Vuetify incrementally, using Tailwind to override specific Vuetify styles, ensuring a smoother transition and design consistency.

[cameron-eyds]

This has been completed!
Will add our findings to this ticket before moving it on.

[cameron-eyds]

@mstanton1 I've updated the ticket to include our findings from yesterdays spike, i'm not sure if we wanted to close the ticket or keep it in a pipeline for review by others. Will move it to done for now!

[mstanton1]

@cameron-eyds thanks for adding those notes. Let's let the ticket move through for our metrics, but carve off time next week to go over it as a team. How long do you think it'd take? We could tackle it after a stand-up or could use another ceremony like pre-grooming or grooming to review if more than 10-15 is needed.

[cameron-eyds]

I think it would only take 5-10 mins to discuss, that being said the audience for the talk might be best as cross-team. I'm sure Thor and the other product teams would be interested in our findings.

[severinbeauvais]

Do you have examples of "selectively overriding Vuetify styling"? And maybe some specific Vuetify components that we target for replacement?

And actually, should we replace Vuetify?

[cameron-eyds]

We did a working example on a branch off of our current vue3/vuetify3 upgrade work, you bet. It was pretty high level, starting with utility classes, ie disabling Vuetifys and using Tailwind.
We didn't have time to go so deep as to disable or override components as whole but it certainly seems possible through the available sass variables.
We should probably have a meeting to discuss in more depth!

But yes, that certainly is a question, i think the spike was more so a look at if or what is even possible.
A means of exploring options IF a project wanted to move away from Vuetify and could it be done incrementally etc. I don't believe we have any follow up actions at the moment other than a discussion!

[mstanton1]

@cameron-eyds how about we tackle this as a topic during the next Vue3 Upgrade meeting on Nov 9th at 2? I could add it into the invitation so everyone is aware.

[cameron-eyds]

@mstanton1 Sounds great, the perfect time for it!