Missing item markers and indentation with tailwindcss + Trix?
I love building systems that scale effortlessly and stand the test of time. Over the past 20+ years, I’ve worked across iGaming, PropTech, Healthcare, and Security, leading teams and writing code that keeps products fast, secure, and reliable.
I’ve helped engineering organizations grow stronger and more resilient, building systems that proved their value all the way through acquisition.
My favorite projects are the ones that make complex systems simpler — the kind that turn chaos into clarity and help teams move faster with confidence.
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 [email protected]
