Add Tailwind styled scaffold templates #71

BakiVernes · 2021-09-03T07:53:41Z

Summary

This PR adds Tailwind styled scaffold templates when this gem is installed. These styles were sanctioned by Adam and the Tailwind team. Some examples:

TODO

[✓] Make new styles based on Adam Wathan suggestions
[✓] Conform template partials to Rails 7 main branch
[✓] Make it work with Rails 6

Additional information

It would great if we had the option of using Tailwinds @apply directive. This would be useful when extracting components like buttons, inputs etc. But since the css comes precompiled we did what we could.

Maybe something to work on in the future?

Co-authored-by: Dino Marić dino.onex@gmail.com

Co-authored-by: Dino Marić <dino.onex@gmail.com>

BakiVernes · 2021-09-03T07:55:52Z

Resolves #23

dhh · 2021-09-03T08:49:58Z

Digging this! Will look closer in a bit. Thanks for working on it!

hahmed · 2021-09-03T11:50:24Z

lib/templates/erb/scaffold/_form.html.erb.tt

+  <%% end %>
+
+<% attributes.each do |attribute| -%>
+  <div class="field my-5">


Do you know what the field css class is? I don't think that's tailwind related? Maybe it's the scaffold field class here https://github.com/rails/rails/blob/9c77d72ecc7fdf490e778b0807882fd53115e7a3/actiontext/test/dummy/app/assets/stylesheets/scaffold.css#L40? If so, maybe we can drop that because we want to use only tailwind inlined css?

Ooops...fixed

hahmed · 2021-09-03T11:53:07Z

lib/templates/erb/scaffold/_form.html.erb.tt

+  </div>
+
+<% end -%>
+  <div class="actions inline">


actions also looks like it's from the default scaffold css from https://github.com/rails/rails/blob/9c77d72ecc7fdf490e778b0807882fd53115e7a3/actiontext/test/dummy/app/assets/stylesheets/scaffold.css#L41, maybe drop this too and add mb-something here too?

Ooops...fixed. Thank you ❤️

dhh · 2021-09-04T11:50:30Z

We have to make this match the new style in rails/main where the _post.html.erb partial is used on the index. That's how it matches up to work out of the box with Turbo. Which means we can't use a table on the index.

See the templates in https://github.com/rails/rails/tree/main/railties/lib/rails/generators/erb/scaffold/templates

dixpac · 2021-09-04T11:57:56Z

@dhh no problem.
That was the one of the points we debated internally, main reason why we choose table is that Adam sent us mockups with the table and we didn't wan't to deviate too much from his mockups.

But, yeah I agree that index without the table is going to be easier especially for the scaffolds where the table columns are dynamic and it is hard to style the table properly.

Anyways, we'll match with the Rails 7 changes 👍🏻

dhh · 2021-09-13T14:07:15Z

lib/templates/erb/scaffold/_form.html.erb.tt

+    <%%= form.password_field :password %>
+</div>
+
+<div class="my-5">


Don't think these div's are aligned properly, yeah?

When we generate the scaffold the divs are indeed properly aligned as shown in a fresh rails/main app:

I have had to add that extra indentation for .tt files that I have worked on in the past too so that the generated files look right as you showed above. That's not the only quirk it has for lining up code. Variables and things also have to be lined up weird so they generate in the correct location. I have never understood why, but would like to look into it more. Any suggestions on where I could dive deeper on this?

dhh · 2021-09-13T14:07:23Z

lib/templates/erb/scaffold/edit.html.erb.tt

+
+  <%%= link_to "Show this <%= human_name.downcase %>", @<%= singular_table_name %>, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+</div>


dhh · 2021-09-13T14:07:38Z

lib/templates/erb/scaffold/new.html.erb.tt

+  <%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
+
+  <%%= link_to 'Back to <%= human_name.pluralize.downcase %>', <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+</div>


dhh · 2021-09-13T14:07:45Z

lib/templates/erb/scaffold/partial.html.erb.tt

+    <%%= link_to 'Edit this <%= human_name.downcase %>', edit_<%= singular_table_name %>_path(<%= singular_table_name %>), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
+    <hr class="mt-6">
+  <%% end %>
+</div>


Add custom scaffold generator that is same as the one inside the Rails 7 in order to make this work with Rails 6.

dixpac · 2021-09-13T19:06:18Z

lib/generators/tailwindcss/scaffold/scaffold_generator.rb

+          end
+        end
+
+        template "partial.html.erb", File.join("app/views", controller_file_path, "_#{singular_table_name}.html.erb")


In order to get the partial in rails 6 I had to "re-implement/copy" Rails 7 scaffold generator :)

dixpac · 2021-09-14T09:47:09Z

@dhh I think this should be ready now, and it should also work with Rails 6. Take a 👀 when you have time.

dhh · 2021-09-28T15:31:24Z

Finally got a chance to check this out. Looking very good! Only thing I'd say is that we could use some padding. So headings and buttons aren't slammed against the edges of the browser:

dhh · 2021-09-28T15:31:51Z

lib/generators/tailwindcss/scaffold/scaffold_generator.rb

+        end
+    end
+  end
+end


dhh · 2021-09-28T15:32:13Z

test/lib/generators/tailwindcss/scaffold_generator_test.rb

+
+    %w(index edit new show _form _message).each { |view| assert_file "app/views/messages/#{view}.html.erb" }
+  end
+end


dixpac · 2021-09-28T18:26:57Z

@dhh re paddings that is strange! Only way I could see that happening is if you don't have a main wrapper(https://github.com/rails/tailwindcss-rails/pull/71/files#diff-82d31adf98ad40bfa67ed05464d36790777703adead66a2478d97320061f136cR9)

Could you push sample app you are showing on the Github so we can double check 🙏

For the reference this is how it looks like on the app I've just created

dhh · 2021-09-29T13:40:14Z

I had not run the installer correctly. You're right. It looks great!! This is really neat.

seanwmitchell · 2021-09-29T17:04:52Z

@dixpac Thanks for your work on this, I’m finally going to get rid of rails_admin gem (with heaps of dependent gems) and scaffold out the rest of my models. Great work 👍 I appreciate it.

lafeber · 2021-10-01T07:25:19Z

@BakiVernes I absolutely love this, I was working on a similar thing :) Have you considered applying the tailwind classes in css, like daisy-ui does?

BakiVernes · 2021-10-01T08:35:44Z

Thank you @lafeber! We have considered extracting classes, but since this gem comes with a precompiled css file with all of tailwinds utility classes inside (so no preprocessing done) it's gonna be a challenge. But we will definitely take a shot at it :)

esale · 2022-06-06T15:19:56Z

We have to make this match the new style in rails/main where the _post.html.erb partial is used on the index. That's how it matches up to work out of the box with Turbo. Which means we can't use a table on the index.

See the templates in https://github.com/rails/rails/tree/main/railties/lib/rails/generators/erb/scaffold/templates

I'm sorry if this is not the place for this comment:

@dhh I love Rails, among other things, because it enables me to do very fast functional prototypes. And part of that was having an index scaffold that I could instantly show to a client to display a list of items, and customize later. It was amazing and well known:
Rails automates scaffolding to make early coding more productive than ever before. (Ruby on Rails: Up and Running by Bruce Tate, Curt Hibbs)

Now, with Rails 7.0.3, if I wanted that, do I have to manually code another view? Or maybe there is some CSS that would allow me to show this new index like a table? I'm not UI expert, and with earlier Rails versions, I didn't needed to be.

I'm not the only one troubled with this:

https://www.reddit.com/r/rails/comments/pztx9g/scaffold_index_no_longer_generating_html_tables/
https://www.reddit.com/r/rails/comments/qypvnm/rails_new_scaffold_index/
https://stackoverflow.com/questions/71357307/no-table-view-after-crud-scaffolding
https://stackoverflow.com/questions/72402399/add-new-partial-to-rails-7-generate-scaffold

IMHO this change as it is, may be beneficial to some while detrimental to others. I feel like the small guy being left behind here.

I appreciate very much all the work you have done, @dhh along with all the Rails team.

Regards.

olivierlacan · 2024-02-25T12:44:50Z

$ rails -v
Rails 7.1.3
rails new --css=tailwind rails-7-1-tailwind
cd rails-7-1-tailwind/
bin/rails g scaffold Post title:string description:text
bin/rails db:migrate
bin/rails s

@dixpac I'm curious what you did to obtain the output shown in your post. Granted this was likely several versions behind what I used here.

There are no browser console or Rails server errors indicating any issues with loading CSS. So is this is the expected stock output of Rails scaffolds in 7.1.3.2 with tailwindcss-rails 2.3.0?

Update: Never mind, looks like bin/dev is needed here for bin/rails tailwindcss:watch, works fine when booting the server with it:

Add Tailwind styled scaffold templates

e48dc28

Co-authored-by: Dino Marić <dino.onex@gmail.com>

hahmed reviewed Sep 3, 2021

View reviewed changes

Match templates to rails main branch

bfb324a

BakiVernes force-pushed the template_generator branch from 7d80a2b to bfb324a Compare September 12, 2021 17:33

dhh reviewed Sep 13, 2021

View reviewed changes

Support Rails 6

f14aa08

Add custom scaffold generator that is same as the one inside the Rails 7 in order to make this work with Rails 6.

dixpac force-pushed the template_generator branch from 8f2b32a to f14aa08 Compare September 13, 2021 19:02

Remove commented out code from engine.rb

9c5aaa3

dixpac reviewed Sep 13, 2021

View reviewed changes

BakiVernes requested a review from dhh September 20, 2021 11:44

dhh mentioned this pull request Sep 20, 2021

Ship scaffold generator that uses a nice Tailwind design #23

Closed

dhh reviewed Sep 28, 2021

View reviewed changes

lib/generators/tailwindcss/scaffold/scaffold_generator.rb

end

end

end

end

Copy link

Member

dhh Sep 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add CR

salzig reacted with thumbs up emoji

dhh reviewed Sep 28, 2021

View reviewed changes

dhh merged commit b9bf2ae into rails:main Sep 29, 2021

rubys mentioned this pull request Oct 25, 2021

--javascript option causes support for tailwind styled scaffold templates not to be installed rails/rails#43531

Closed

JulianPasquale mentioned this pull request Mar 1, 2023

update tailwindcss gem rootstrap/rails_hotwire_base#45

Open

patriciomacadden mentioned this pull request Jan 20, 2025

make the index a table again #457

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Tailwind styled scaffold templates #71

Add Tailwind styled scaffold templates #71

BakiVernes commented Sep 3, 2021 •

edited

Loading

BakiVernes commented Sep 3, 2021

dhh commented Sep 3, 2021

hahmed Sep 3, 2021 •

edited

Loading

dixpac Sep 3, 2021

hahmed Sep 3, 2021

dixpac Sep 3, 2021

dhh commented Sep 4, 2021

dixpac commented Sep 4, 2021

dhh Sep 13, 2021

BakiVernes Sep 13, 2021

Willardgmoore Sep 29, 2021

dhh Sep 13, 2021

dhh Sep 13, 2021

dhh Sep 13, 2021

dixpac Sep 13, 2021 •

edited

Loading

dixpac commented Sep 14, 2021 •

edited

Loading

dhh commented Sep 28, 2021

dhh Sep 28, 2021

dhh Sep 28, 2021

dixpac commented Sep 28, 2021 •

edited

Loading

dhh commented Sep 29, 2021

seanwmitchell commented Sep 29, 2021

lafeber commented Oct 1, 2021

BakiVernes commented Oct 1, 2021

esale commented Jun 6, 2022

olivierlacan commented Feb 25, 2024 •

edited

Loading

Add Tailwind styled scaffold templates #71

Add Tailwind styled scaffold templates #71

Conversation

BakiVernes commented Sep 3, 2021 • edited Loading

Summary

TODO

Additional information

BakiVernes commented Sep 3, 2021

dhh commented Sep 3, 2021

hahmed Sep 3, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dhh commented Sep 4, 2021

dixpac commented Sep 4, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dixpac Sep 13, 2021 • edited Loading

Choose a reason for hiding this comment

dixpac commented Sep 14, 2021 • edited Loading

dhh commented Sep 28, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dixpac commented Sep 28, 2021 • edited Loading

dhh commented Sep 29, 2021

seanwmitchell commented Sep 29, 2021

lafeber commented Oct 1, 2021

BakiVernes commented Oct 1, 2021

esale commented Jun 6, 2022

olivierlacan commented Feb 25, 2024 • edited Loading

BakiVernes commented Sep 3, 2021 •

edited

Loading

hahmed Sep 3, 2021 •

edited

Loading

dixpac Sep 13, 2021 •

edited

Loading

dixpac commented Sep 14, 2021 •

edited

Loading

dixpac commented Sep 28, 2021 •

edited

Loading

olivierlacan commented Feb 25, 2024 •

edited

Loading