1. Home
  2. Forum
  3. React - EJ 2
  4. Use with TailwindCSS and Preflight defaults

Use with TailwindCSS and Preflight defaults

I have just spent sometime trying to figure out why the lists were not working within the RichTextEditor..


The tailwindcss preflight defaults were the cause removing all basic defaults.


.e-rte-content ul {
padding-inline-start: 40px;
@apply list-disc;
}
.e-rte-content ol {
padding-inline-start: 40px;
@apply list-decimal;
}


I have applied these in the tailwind.css file to get around the issue, but maybe something like this should be in the 

@syncfusion/ej2-richtexteditor/styles/tailwind.css


file so no others have this issue.


4 Replies
VJ Vinitha Jeyakumar Syncfusion Team January 29, 2024 09:49 AM UTC

Hi Jason,


We would like to inform you that the reported issue occurred  because of the default styles of the browser is overwritten by the tailwind CSS preflight styles.
It can be resolved by adding the CSS styles below to override the tailwind CSS,

Code snippet:

  .e-rte-content li {
  margin-bottom: 10px !important;
  padding: unset !important;
  }
   .e-rte-content ul {
   list-style-type: disc !important;
   padding: unset !important;
   margin-left: 40px;
    }
   .e-rte-content ol {
    list-style-type: decimal !important;
    padding: unset !important;
    margin-left: 40px;
    }
  .e-rte-content ol[style*="list-style-type: upper-alpha"]{
    list-style-type: upper-alpha !important;
    padding: unset !important;
    margin-left: 40px;
    }
  .e-rte-content ol[style*="list-style-type: lower-alpha"]{
      list-style-type: lower-alpha !important;
      padding: unset !important;
      margin-left: 40px;
      }
  .e-rte-content ol[style*="list-style-type: upper-roman"]{
        list-style-type: upper-roman !important;
        padding: unset !important;
        margin-left: 40px;
        }
    .e-rte-content ol[style*="list-style-type: lower-roman"]{
          list-style-type: lower-roman !important;
          padding: unset !important;
          margin-left: 40px;
          }


Regards,
Vinitha

JA Jason January 29, 2024 09:07 PM UTC

OK this works I guess, I don't know why you are requiring the use of !important, this isn't needed if this css is placed in the tailwind.css file? 

Also why are you using padding: unset and margin-left as the defaults, instead of padding-inline-start: 40px?

Is this for ie compatibility?

Where is your documentation for this on


JA Jason January 29, 2024 09:09 PM UTC

Also using @apply list-desc etc is a better alternative for use with tailwind as this will use any custom style set in the tailwind config?


VJ Vinitha Jeyakumar Syncfusion Team March 14, 2024 12:11 PM UTC

Hi Jason,

The !important tag is used here to override the CSS added in the tailwind.css file which is causing the issues with numbered and bulleted list.

The padding and margin-left values are overridden by the Tailwind CSS. So, that we have used padding as unset and margin-left value as 40px to get the proper styles for the list items.

We will also include this information in our UG documentation and it will be published live in any of our upcoming releases.

Regards,
Vinitha

Loader.
Up arrow icon