Applying Tailwind before: pesudo overrides existing ::before content

[AsuraKev]

Hi there,

I have a class defined in my css file like

.fp-icon-small::before {
display: inline-block;
font-family: fp-icons-small !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 16px;
vertical-align: text-bottom;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.fp-icon-test::before {
content: '';
}

they are being used like <i className=''fp-icon-small fp-icon-test"/> I want to increase the font size by adding a class before:text-xl however my icon never displays again and I think its because adding before:text-xl removed the existing ::before content.

any idea how to achieve it without interferring with existing style properties?

thanks

[maxlshk]

Tailwind indeed does override the content you've set through your custom CSS, and as far as I know there are only three possible fixes for this problem. First one is the most logical one, but other two also may be considered if you really want to stick to using Tailwind styling.

1. Instead of using Tailwind's before:text-xl, you could create a custom utility class that specifically increases the font size of the ::before pseudo-element.
2. Use !important in your .fp-icon-test::before (but personally I don't recommend this approach because it may cause conflicts further in your styling if you want to reuse this class)
3. Try adding custom CSS plugin, that won't override existing ::before content:

const plugin = require('tailwindcss/plugin')

module.exports = {
  // Your existing config...
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.before-font-xl::before': {
          fontSize: '1.25rem', // Adjust as needed
        },
      }, ['responsive'])
    }),
  ],
}

Here is the Tailwind Play showcase, however I can't display option 3 there , because it requires changes in tsconfig.json