Customizing components

RailsFast components are meant to be edited. The defaults are great, but your product should look like your product.

If you want to customize a component provided by RailsFast, here’s the simplest workflow:

Copy the component out of the RailsFast folder before editing: take the partial from app/views/components/railsfast/... and copy it into app/views/components/...
Edit your component: restyle, change layout, edit copy, whatever
Keep upstream updates clean: since your customized component lives outside components/railsfast, you can keep pulling template updates without getting messy conflicts in your edited files.

One useful idea is to ask an AI to refactor the Tailwind classes of a component you'd like restyled. It works best if you also paste a “reference” of what you like (a picture, or HTML code), so the AI can get the vibe better

If you'd rather override the RailsFast components themselves in place, you'd need to add it to the .gitattributes file with merge=ours, like this:

app/views/components/marketing/_hero.html.erb merge=ours

So that when I update the RailsFast template and you do fetch the changes, you don't get your custom component overriden by the upstream template changes.

Styling from the parent (without modifying the component)

Sometimes you want to tweak a component's styles for a specific use case without copying or editing the component itself. Tailwind's arbitrary variant selectors let you target child elements from a parent wrapper.

For example, to customize the blockquote styling inside a testimonial quote component:

<%# Wrap the component and use [&_element] to target children %>
<div class="[&_blockquote]:font-serif [&_blockquote]:italic [&_blockquote]:text-neutral-800">
  <%= render "components/railsfast/marketing/testimonials/quote",
      item: {
        quote: "This product changed my life!",
        name: "Happy Customer"
      }
  %>
</div>

The [&_blockquote] syntax targets any blockquote descendant inside the wrapper div. You can chain multiple overrides and target any element type or class.

Common patterns:

<%# Override heading styles %>
<div class="[&_h2]:text-5xl [&_h2]:font-bold">

<%# Override link colors %>
<div class="[&_a]:text-blue-600 [&_a:hover]:text-blue-800">

<%# Override multiple elements %>
<div class="[&_p]:text-lg [&_ul]:list-disc [&_li]:ml-4">

This approach is ideal when:

You need a one-off style tweak for a specific page
You want to keep the component untouched for upstream updates
The customization is purely visual (fonts, colors, spacing)