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 add trix-editor class to trix-editor tag

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

and many thanks for this github issue

Trix Editor

thanks for reading