Resolving problem when using Trix rich editor with tailwind

#tailwindcss #trix

it takes so loong for me to realize that tailwind reset is overriding the trix style because trix using a html tag like heading or list, and those tag style has been reset with tailwind.

Btw what i do is make my own style to give back the default style especially for heading and list tag.

so in my index.css, i added this

/* Tailwind Override */.trix-editor {    width: 100%;}.trix-editor h1 {    font-size: 1.25rem !important;    line-height: 1.25rem !important;    margin-bottom: 1rem;    font-weight: 600;}.trix-editor a:not(.no-underline) {    text-decoration: underline;}.trix-editor a:visited {    color: green;}.trix-editor ul {    list-style-type: disc;    padding-left: 1rem;}.trix-editor ol {    list-style-type: decimal;    padding-left: 1rem;}.trix-editor pre {    display: inline-block;    width: 100%;    vertical-align: top;    font-family: monospace;    font-size: 1.5em;    padding: 0.5em;    white-space: pre;    background-color: #eee;    overflow-x: auto;}.trix-editor blockquote {    border: 0 solid #ccc;    border-left-width: 0px;    border-left-width: 0.3em;    margin-left: 0.3em;    padding-left: 0.6em;}

and addtrix-editor class totrix-editor tag

<trix-editor input="x"></trix-editor>

and many thanks for this githubissue

Trix Editor

thanks for reading