Tailwind CSS integration with formio/react

[Kawixh]

I am working on a new project that requires custom forms to be build using formio, I was initially using formio.js package in Rails 5.x and have a OK understanding of formio.

My setup:
Framework: NextJS
Framework version: 13.x
NodeJS version: 20.5.x
Tailwind CSS: 3.x

Now that I am transitioning to tailwind, I was looking into how to integrate it with formio/react. After a bit of search I found few solutions:

1. Use [this] package which is a fork i think of formio/react with tailwind
2. Override all css of formio
3. Create a custom template for formio/react written with tailwind

I have few questions regarding this issue:

1. Which method will suit my needs better as I am also using custom validations, method overriding and custom file service with formio?
2. If I go with Template route can you please provide me with couple of examples on how to create it and what will be the sample code for it?
3. Is there native tailwind support coming or already implemented?

Thank you in advance for your help.

[fuadkhan1996]

I'm having the same issue and as a workaround, I'm using mentioned package @tsed/tailwind-formio with custom tailwind CSS styling by overriding the existing ones provided by the package. I hope it helps.

P.S. This is an issue and I couldn't find anything related to it. Looking forward to the contributor's reply.

[Kawixh]

Very insightful, it can work, but the issue is I have to override much or almost all of the given styling as I am using custom theming with tailwind and it may or may not work with this 😕 😞

[antonSoftensity]

@Kawixh To answer your questions:
At the moment, there is no native Formio support for Tailwind.

I think the best way to handle your needs would be to create a custom component/template library through a plugin. You can take a look at the example of an existing one (OSS support for USWDS design system https://github.com/formio/uswds). That way you can override the component logic, as well as component templates that should be changed at your preference. And then plugin can be used by Formio.use([name of the plugin]) in your app.

You can also try to use @tsed/tailwind-formio, and then, when needed, manually override Component logic through redefining Formio.Components.components.[name of the component that needs an override].