Styling Simple Form forms with Tailwind

• Simple Form

  13 8,193 5.7 Ruby

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

  

Simple Form gem

• simple_form_tailwind_css

  2 28 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.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• Tailwind CSS

  1,285 78,752 9.4 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.

• Slim

  31 5,275 7.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