Tailwindcss: Tailwindcss messes with Trix

[rgaufman]

Hi there,

I'm using https://github.com/basecamp/trix version 1.1.1 and Tailwindcss version 1.0.4. When I try to add the WYSIWYG editor like this:

    <div class="flex flex-wrap">
      <div class="w-full">
        <form>
          <input id="x" value="Editor content goes here" type="hidden" name="content">
          <trix-editor input="x"></trix-editor>
        </form>
      </div>
    </div>

It works, but the ordered and unordered lists do not indent or render correctly. How do I prevent tailwindcss from clashing with the expected default styles for lists?

[4refael]

This is because tailwind resets some default styles. You can remove '@tailwind base;' from your css and use your own reset.

[AlexVipond]

Also, you can keep tailwind's base reset and just override specific pieces of it further down in the cascade.

Or add some css specifically for the editor, e.g. add a trix-editor class on a parent element and manually style .trix-editor ul, .trix-editor li, etc.

Main thing to remember is that this is all just css at the end of the day—the standard specificity and cascade rules still apply.

[adamwathan]

You can disable our preflight styles if they are conflicting with something else you're using:

https://tailwindcss.com/docs/preflight/#disabling-preflight

If you'd like to keep using them, you could create a custom class that tries to undo whatever styles are causing the conflict and wrap the Trix editor with that class, something sort of like this (not test, just the general idea):

.trix ul {
  list-style-type: disc;
  padding-left: 2.5rem;
}

.trix ol {
  list-style-type: decimal;
  padding-left: 2.5rem;
}