Missing item markers and indentation with tailwindcss + Trix?

Missing item markers and indentation with tailwindcss + Trix?

·

1 min read

I started a new Ruby on Rails 7.1 project the other day, and I added both tailwindcss (via the tailwindcss-rails gem) and the trix editor. Everything worked great, except I was missing item markers and indentation on my bulleted lists (both ordered and unordered).

After some research, I discovered that tailwindcss doesn't style lists by default. My lists looked like this in trix:

To fix it, I first added this to my app/assets/application.tailwind.css:

.trix-content ul {
  @apply list-disc;
}

.trix-content ol {
  @apply list-decimal;
}

That was a little better, but I lost indentation:

I added some padding:

.trix-content ul {
  @apply list-disc pl-5;
}

.trix-content ol {
  @apply list-decimal pl-5;
}

That did it:

I hope that helps! If you feel like I got something wrong or you have a question, please comment or shoot me an email at