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

Answer 2

@imports must come first when using @tailwind directives:

@import 'actiontext.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

It also doesn't quite work because "actiontext.css" has =require trix sprockets directive which is stripped by tailwind before it gets to sprockets. If you have minification turned off then it would work.

But you don't need that import at all since you have it in your layout and it doesn't need to go through tailwind anyway:

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

# best do it this way
<%= stylesheet_link_tag "tailwind", "actiontext", "data-turbo-track": "reload" %>

Everything else is simple css issues:

/* tailwind resets list style, so add it back for actiontext */
.trix-content ul { list-style: disc; }
.trix-content ol { list-style: decimal; }

/* right-click->inspect for whatever your image issue is */

If you have @tailwindcss/typography plugin enabled, this also works ok:

<%= f.rich_text_area :content, class: "prose max-w-none" %>