Tailwind CSS integration with formio/react
Kawixh opened this issue · comments
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:
- Use [this] package which is a fork i think of formio/react with tailwind
- Override all css of formio
- Create a custom template for formio/react written with tailwind
I have few questions regarding this issue:
- Which method will suit my needs better as I am also using custom validations, method overriding and custom file service with formio?
- 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?
- Is there native tailwind support coming or already implemented?
Thank you in advance for your help.
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.
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 😕 😞
@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].
After 1 year :)
@antonSoftensity
Thanks for the information. I think it would be more helpful with some examples.
@Kawixh
what did you do finally?
there is almost no documentation about how to do it.