DEV Community

Muhamad Jamil
Muhamad Jamil

Posted on

Resolving problem when using Trix rich editor with tailwind

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
hazzazbinfaiz profile image
Md. Hazzaz Bin Faiz

Very helpful. Much appreciated

Collapse
 
mtaraabi profile image
Mohammad Alharthi

You made my day Muhammed, Thanks