Trix and tailwind - a simple approach

When you first install Trix in a Rails project that uses tailwind, you may notice that the formatting doesn’t appear correctly. For instance, H1 tags might not be the expected size, and bullet or numbered lists may not display as intended.
There are several articles offering different solutions; here’s the approach I take.

Since I use esbuild in all my projects, my first step is to add @tailwindcss/typography to ensure proper styling.

yarn add "@tailwindcss/typography"

I also ensure that @tailwindcss/typography is included in my tailwind.config.js file. Below, you’ll see the other Tailwind plugins I use—if you’d like to include them in your project, remember to add them with yarn add.

module.exports = {
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/typography"),
    require('@tailwindcss/line-clamp'),
  ],
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './app/components/**/*.{rb,html,html.erb,yml}'
  ]
}

To apply the correct styles within the editor, I add the prose class when setting up the form field. Although I typically include a few other classes (as you can see), prose is the key to getting the formatting to work as expected.

<%= form.rich_text_area :content, class: "block prose max-w-full w-full rounded-md border-0 
p-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600"%>

So now when you are using the trix editor the formatting should be correct.

To display Trix content correctly, update the Trix content partial at views/layouts/action_text/contents/_content.html.erb. In this example, I’ve replaced the trix-content class with the prose class. You can also adjust the prose-sm class as needed to suit your styling preferences.

<article class="prose prose-sm max-w-full">  
  <%= yield -%>
</article>

Now, wherever you render your content in the app, it should display with the correct formatting.