Modifying styles

I am a little confused about how to work with tailwind, webpacker and jumpstart in combination. What I am basically trying to do is to change the formatting slightly on .trix-content pre {

Modifying the file javascript/stylsheets/components/trix.scss seem to have no effect what so ever. It doesn't change the format of my trix content in a custom page I have.

However, slapping the following in my application.css does:

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  margin: 0;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  color: #000;
  overflow-x: auto;
} 

Anyone know what's up with that? I see that the javascript/stylsheets/components/trix.scss is imported from javascript/stylsheets/components.scss which is imported from javascript/packs/application.js.

How is this supposed to work? I thought making changes in trix.scss, would get me the result I was after.

It seems to me like the https://rubyyagi.com/solve-slow-webpack-compilation/ isn't correct. 

// Styles
// These are imported separately for faster Webpack recompilation
// https://rubyyagi.com/solve-slow-webpack-compilation/

To me, it seems like this isn't exactly working anymore since the style changes obviously aren't picked up. Chris Oliver could you have a look at this, please?