ruby-on-railstailwind-cssruby-on-rails-7actiontext

How to add action text rich_content in a rails app with tailwind css


  • Hello everyone, I've been working on a Rails 7 application, and I initially set it up with Tailwind CSS as the CSS compiler. However, I've run into some challenges when integrating Action Text's rich_text_area. Despite following the Rails guide, I'm facing unexpected issues.

  • Specifically, I'm having trouble with bullet points and lists not displaying correctly, even though other tools seem to be functioning as expected.

  • Furthermore, I'm encountering difficulties with image display; it's not rendering as it should.

application.tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;@import 'actiontext.css';

app/javascript/application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import "trix"
import "@rails/actiontext"
import "flowbite/dist/flowbite.turbo.js"

application.html.erb

    <%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>

update

  • I initialized a new Rails app and installed Action Text first; everything worked fine. However, when I added Tailwind CSS following the official guide, Action Text's CSS broke. I believe the problem is that Tailwind CSS is taking precedence over Action Text's CSS.
  • How can I ensure that Tailwind CSS loads after custom CSS

Solution

    • Tailwind wind has a base layer which removes all default browser CSS, like lists, bullets, fonts, So i added these lines in application.tailwind.css
    @layer base {
      ul {
        @apply list-disc list-inside
      }
      ol {
        @apply list-decimal list-inside
      }
    }
    
    • Then i have lists and bullets styled propery