Search code examples
csstailwind-csspseudo-element

Before and after pseudo elements not working in tailwind CSS

I am using typography plugin that tailwind provides inside my NextJS project.

It displays Content inside the code tag with backtick around it. I am trying to remove these backticks. So I tried .prose code::before {content: "";} inside my globals.css file but it has no effect. It works when I change it from Firefox style editor.

Any ideas why it is not working?

/* globals.css inside NextJS Project */
.prose code::before {
  content: "";
}

.prose code::after {
  content: "";
}
Solution

  • Use !important, this works for me.

    /* app.css */
.prose code::before {
    content: "" !important;
}

.prose code::after {
    content: "" !important;
}