CODEWITHSUNDEEP
csstailwind-csspseudo-element
emma_hofferman
emma_hofferman

Reputation: 109

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: "";
}

Upvotes: 0

Views: 8561

Answers (3)

Ateeb Asif
Ateeb Asif

Reputation: 184

I found a solution for the pseudo elements before and after. all you have to do is for the content add single quote at the start and end and where there is a space use underscore _ so the code will be something like this

<div class="before:content-['i_am_before']" > content</div>

Upvotes: 0

Micha&#235;l Perrin
Micha&#235;l Perrin

Reputation: 6258

You can do this in with no CSS file involved.

Just add some customization code in tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            code: {
              '&::before': {
                content: 'none !important',
              },
              '&::after': {
                content: 'none !important',
              },
            },
          },
        },
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

Upvotes: 0

p0on
p0on

Reputation: 36

Use !important, this works for me.

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

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

Upvotes: 2

Related Questions