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

Question

• 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

Answer 1

• 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