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
thanks for reading
Top comments (2)
Very helpful. Much appreciated
You made my day Muhammed, Thanks