rails: Default Rails 7 setup with CSS processor breaks rich_text

@simonsapiel I could do it by:

1. Adding in app/views/layouts/application.html.erb this line:

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

1. Adding in app/assets/config/manifest.js this line:

//= link actiontext.css

And I deleted import “actiontext.css” from application.tailwind.css

Seems to work almost perfect. When checking with Bootstrap it’s fine. But with tailwind it is not.

Why?

The file app/assets/stylesheets/application.tailwind.css is populated with the new @import "actiontext.css"; at the end, looking like this:

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

and then it does not work. But when I change the file like this (moving the added line to the top):

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

This way it works (for me at least)! 🎉

So, apparently that line needs to be on top for Tailwind. But I’m not a CSS expert (and don’t know anything about ordering here). This is just what occurs to me. ¯_(ツ)_/¯

This worked for me:

/* app/assets/stylesheets/application.tailwind.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "actiontext";

/* app/assets/stylesheets/actiontext.css */
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *
*/
@import "trix/dist/trix"; /* I'm importing it this way */

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

Setup:

• Rails v7.0.2.2
• I’m using cssbundling and jsbundling

I faced this same issue and was able to resolve by simply running the build commands defined in package.json

yarn build
yarn build:css

What really solved this issue for me is that I linked actiontext.css directly in application.html.erb.

I managed to fix the above shared image issue by running rails css:build and I’m not sure if it had any effect but I usually run rails javascript:build along with the other just to be safe and it worked itself right out.

I’ve added this <%= javascript_importmap_tags %> and it works correctly!

Try to run rails assets:precompile, it maybe helps you finding the error!.

Versions:

• Rails 7.0.3
• Ruby 3.1.2
• tailwindcss-rails 2.0.14

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

Really thanks for this answer it helped me a lot. Thanks Again.

@simonsapiel I could do it by:

1. Adding in app/views/layouts/application.html.erb this line:

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

1. Adding in app/assets/config/manifest.js this line:

//= link actiontext.css

And I deleted import “actiontext.css” from application.tailwind.css

@zahidalik thank you for this! I was able to use your method to make it work with vite and tailwind

rails assets:precompile

I was able to solve my rich text with that command, I am using Rails 7.0.2 and Bootstrap 5.1

I opened a PR to address this issue. I’m happy to hear any feedback you have on the implementation @rogiervandenberg.

I managed to fix the above shared image issue by running rails css:build and I’m not sure if it had any effect but I usually run rails javascript:build along with the other just to be safe and it worked itself right out.

ok. I’ll give it a try. 👍🏾