Lädt...


🔧 Use Tailwind CSS with Your Rails Forms


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

This article was originally published on Rails Designer

Rails' Form Builder gives a great interface to easily build extensive forms. But a common issue many Rails developers using Tailwind CSS stumble upon, is styling their text_field's, text_area's and check_boxes'. There are multiple solutions:

  1. copy all Tailwind's classes around;
  2. using Tailwind's @apply directive and add a (vanilla) class, eg. input to the form field;
  3. create custom components (using ViewComponent) for each field type.

Option 2 was my go-to solution for a long time. Reusable, easy to make changes and simple enough to apply. But when I was working on my next SaaS, I started to explore a new option: a custom form builder.

What is a Form Builder?

Rails Form Builder provides a structured way to generate and handle HTML forms, allowing you to create form fields that are automatically associated with model objects and their attributes. I use them a lot!

Creating a basic custom form builder

You can create your own (Action view) Form Builder by subclassing ActionView::Helpers::FormBuilder.

The most basic version could look like this:

class CustomFormBuilder < ActionView::Helpers::FormBuilder
  def text_field(attribute, options = {})
    super(attribute, options.merge(class: "px-2 py-1 text-gray-900 bg-gray-50 rounded"))
  end

  # def password_field(attribute, options = {});end
  # def email_field(attribute, options = {});end
  # def file_field(attribute, options = {});end
  # def url_field(attribute, options = {});end
end

You can see how you can write this for every supported field type and add the needed Tailwind CSS classes. The most common field types are: text_field, password_field, email_field, file_field, and url_field.

You can use your new Form Builder in different ways. For just one form:

<%= form_with model: @user, builder: CustomFormBuilder do |form| %>
  <%= form.text_field :name %>
<% end %>

Of, if you want to apply it to all your forms, add the following to your ApplicationController:

default_form_builder CustomFormBuilder

For the above example, this would then render:

<input type="text" name="user[name]" class="px-2 py-1 text-gray-900 rounded bg-gray-50" id="user_name">

Included in Rails Designer

Rails Designer's UI Components Library has its own FormBuilder included, giving you beautiful form fields without doing all the work.

It has support for all the typical field types like text_field and password_field, but also collection_select and collection_radio_buttons.

It has also a feature called Smart Inputs. If you used gems like simple_form, this is familiar. You can write <%= form.input :name %> and it will render the correct field helper, including a label and a wrapping div-element, something like this:

<div class="w-full mt-4">
  <label class="text-gray-700" for="user_title">Title</label>

  <input class="w-full px-2 py-1 text-sm text-gray-900 rounded bg-gray-50" type="text" name="user[title]" id="user_title">
</div>

It is also smart enough to correctly render the correct field type when using <%= form.input :email %> (email_field) or <%= form.input :password %> (password_field).

Behind the scenes it checks for two Rails Designer components presence: FormLabelComponent and FieldComponent.

Check out the docs on Form Builder for more details.

...

🔧 Use Tailwind CSS with Your Rails Forms


📈 44.49 Punkte
🔧 Programmierung

🔧 How to Use Tailwind CSS for Your Ruby On Rails Project


📈 34.39 Punkte
🔧 Programmierung

🔧 How to upgrade an Astro JS project from Tailwind CSS v3 to Tailwind CSS v4 ( Alpha )


📈 34.34 Punkte
🔧 Programmierung

🔧 Configurare Tailwind CSS: Guida all'Inizializzazione | Setting Up Tailwind CSS: Initialization Guide


📈 34.34 Punkte
🔧 Programmierung

🔧 Introduction of CSS, What is CSS, Why we use CSS and How CSS describe the HTML elements


📈 31.56 Punkte
🔧 Programmierung

🔧 Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS


📈 31.05 Punkte
🔧 Programmierung

🔧 Tailwind CSS vs. Vanilla CSS: When to Use Each for Your Web Development Projects


📈 30.6 Punkte
🔧 Programmierung

🔧 Tailwind CSS vs. Traditional CSS in a React app: Pros, Cons, and Best Use Cases


📈 27.91 Punkte
🔧 Programmierung

🔧 Rails Designer v1.13: Updated to Tailwind CSS v4


📈 27.9 Punkte
🔧 Programmierung

🔧 Ruby on Rails 8 - Frontend Rápido Usando Tailwind como um Frameworks CSS Classless


📈 27.9 Punkte
🔧 Programmierung

🔧 Ruby on Rails 8 - Frontend Rápido Usando Tailwind como um Frameworks CSS Classless


📈 27.9 Punkte
🔧 Programmierung

🔧 Ruby on Rails 8 - Frontend Rápido Usando Tailwind como um Frameworks CSS Classless


📈 27.9 Punkte
🔧 Programmierung

🔧 New Rails Designer Tool: beautiful gradients with Tailwind CSS


📈 27.9 Punkte
🔧 Programmierung

🔧 How to create modals with Rails and Hotwire (and Tailwind CSS)


📈 27.9 Punkte
🔧 Programmierung

🔧 Tailwind CSS: Tailwind Cost


📈 27.4 Punkte
🔧 Programmierung

🔧 Mastering Tailwind CSS: Overcome Styling Conflicts With Tailwind Merge and clsx


📈 27.4 Punkte
🔧 Programmierung

🔧 Mastering Tailwind CSS: Overcome Styling Conflicts with Tailwind Merge and clsx


📈 27.4 Punkte
🔧 Programmierung

🔧 Material TailWind - combining Material Design and Tailwind CSS


📈 27.4 Punkte
🔧 Programmierung

🔧 Tailwind CSS: Custom Forms


📈 27.27 Punkte
🔧 Programmierung

🔧 Tailwind CSS: Handling Forms and Inputs


📈 27.27 Punkte
🔧 Programmierung

🔧 Bootstrap vs. Tailwind CSS: Which CSS Framework is Best for Your Web Development Project?


📈 26.8 Punkte
🔧 Programmierung

🔧 Creating Dynamic Forms: Elevating Your Forms in your site


📈 25.57 Punkte
🔧 Programmierung

🔧 How to continue to use Rails.application.secrets in Rails >= 7.2


📈 25.27 Punkte
🔧 Programmierung

🔧 How to continue to use Rails.application.secrets in Rails >= 7.2


📈 25.27 Punkte
🔧 Programmierung

🔧 Ruby on Rails 8 - Frontend Rápido Usando CSS Zero como um Frameworks CSS Classless


📈 24.61 Punkte
🔧 Programmierung

🔧 Ruby on Rails 8 - Frontend Rápido Usando CSS Zero como um Frameworks CSS Classless


📈 24.61 Punkte
🔧 Programmierung

🔧 Ruby on Rails 8 - Frontend Rápido Usando CSS-Zero como um Frameworks CSS Classless


📈 24.61 Punkte
🔧 Programmierung

🔧 Ruby on Rails 8 - Frontend Rápido Usando CSS-Zero como um Frameworks CSS Classless


📈 24.61 Punkte
🔧 Programmierung

🔧 Supercharge Your Rails Development: A Deep Dive into Vite-Rails and React Integration


📈 24.15 Punkte
🔧 Programmierung

🔧 Rails Designer v1.4 introduces: Beautiful Layouts for Your Rails App


📈 24.15 Punkte
🔧 Programmierung

🔧 Rails Designer v1.4 introduces: Beautiful Layouts for Your Rails App


📈 24.15 Punkte
🔧 Programmierung

🔧 Tailwind CSS: CSS framework for Kickstart


📈 24.11 Punkte
🔧 Programmierung

🔧 Thoughts on CSS-in-JS and Utility-First CSS (Tailwind)


📈 24.11 Punkte
🔧 Programmierung

matomo