search

formio / react

JSON powered forms for React.js
https://form.io
MIT License
300 stars 269 forks source link

Tailwind CSS integration with formio/react #530

Open Kawixh opened 11 months ago

Kawixh commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 10 months ago

@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].

vbhandare-tw commented 4 weeks ago

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.