Tailwind css / scaffold

rubyonrails-talk
1

Hi, I believe I installed tailwind.css into my rails app. When I use a form from an example on the tailwind site, it looks great. Unfortunately, when I run a scaffold, the fields are staggered and need to be fix.

I got 2 questions,

  1. is there an option in the scaffold command that specifies tailwind css?
  2. or how do I go about editing my form_for to style it and adding tailwind classes to it.
1 Like
2

Have a look here, for a start: ActionView::Helpers::FormBuilder The class documentation includes an example of how you could expand the default method to customize it for your needs.

Also, have a look at simple_form and some of its peers. Some of those allow you to create your own templates by adding a file in /lib/templates or similar.

I don’t use Tailwind, but I do use Bootstrap and the wonderful bootstrap_form gem. That wraps the normal Rails tag helpers so they automagically create the whole set of “furniture” needed to make a proper responsive form with Bootstrap styles.

<%= form.text_field :wakka %>

becomes:

<div class="form-group">
  <label for="wibble_wakka">Wakka</label>
  <input type="text" class="form-control" id="wibble_wakka" name="wibble[wakka]">
</div>

I love it, especially for the fact that I don’t have to remember all the arcana of the field nesting unless I’m doing something complex with the layout. And I never have to write out a separate label tag when I add an input of any kind.

Walter

3

This section of the Guide shows a few other examples that might be useful for you.

You could add a tailwind_form_with method, and then some subclassed field helpers that fiddle with the fields, set their tailwind classes, and then call super.

Walter

4

And even more specifically what you wanted to do: How to Create Custom Scaffold Templates in Ruby on Rails | Web-Crunch

Walter

5

It is outdated. But with a quick look in Rails source, you can find the difference and adopt. See new partials: https://github.com/rails/rails/tree/main/railties/lib/rails/generators/erb/scaffold/templates