Styling Simple Form forms with Tailwind

1. Simple Form

   1 13 8,208 6.6 Ruby

   Forms made easy for Rails! It's tied to a simple DSL, with no opinion on markup.

   

   Simple Form gem

2. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

3. simple_form_tailwind_css

   2 2 31 0.0 Ruby

   Tailwind components for Simple Form

   One option is the simple_form_tailwind_css gem by Abe Voelker, mentioned also in the GitHub issue. It uses a combination of default Tailwind styles in the Simple Form configuration with a custom form builder and a few custom inputs. The gem supports replacing the default classes related to error messages with custom ones.

4. Tailwind CSS

   3 1,446 84,402 9.8 TypeScript

   A utility-first CSS framework for rapid UI development.

   

   During our recent redesign of the admin section of our web, we wanted to set up a system that would allow us to quickly build good looking forms. We like to use the Simple Form gem for our forms, we have been using it for nearly 10 years, and we still appreciate its very succinct but flexible syntax. Also, we style our web with Tailwind and we definitely wanted to leverage it for the new admin pages, too. So, at one point of the redesign effort we had to deal with the ”How do we style our new admin forms with Tailwind?“ task and we wanted to do it in the most reusable way possible and without losing Simple Form's flexibility.

5. Slim

   4 31 5,322 4.8 Ruby

   Slim is a template language whose goal is to reduce the syntax to the essential parts without becoming cryptic. (by slim-template)

   

   This config sets a ”medium“ font weight for our form labels by default. Now, suppose we want a specific input’s label to be bold instead, we might want to try the following naive approach (we’re using the Slim template notation here):

Suggest a related project