Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

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 modeExit fullscreen mode

and addtrix-editor class totrix-editor tag

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

and many thanks for this githubissue

Trix Editor

thanks for reading

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
mtaraabi profile image
Mohammad Alharthi
  • Joined

You made my day Muhammed, Thanks

CollapseExpand
 
hazzazbinfaiz profile image
Md. Hazzaz Bin Faiz
I am a student. Love to learn and share knowledge.
  • Location
    Bangladesh
  • Joined

Very helpful. Much appreciated

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Junior Frontend Developer | Vue Js | Blockchain Enthusiast
  • Location
    Indonesia
  • Joined

More fromMuhamad Jamil

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp