Can't overwrite styles in production with tailwindcss

[wiscaksono]

I tried to overwrite the existing styles with tailwindcss like this

.react-syntax-highlighter-line-number {
  @apply text-[#607B96];
}

code .token {
  @apply text-[#607B96] !important;
}

.efofCE {
  @apply bg-transparent p-0 !important;
}

.efofCE span {
  @apply bg-transparent !important;
}

.sc-bcXHqe.kBPKLM {
  @apply hidden !important;
}

And this is the result in develop.

This is the result in production (vercel).

how to fix this?

[pawelkrystkiewicz]

@wiscaksono How did you solved this? Did you somehow froze class names from being scrambled in prod?

[wiscaksono]

@pawelkrystkiewicz ah i forgot how to fix it, but you can check the code on my repository here https://github.com/wiscaksono/wiscaksono-site

[pawelkrystkiewicz]

@wiscaksono thanks! Although I already found the docs on how to add custom styles and this is enough for me.

It seems like you kept the approach of modifying by class name updates. I couldn't find those names in my instance which suggests that those just obscured versions of actual class names. Anyway solved, thanks 👏