Cannot override the colour of ::before li on <ol> lists

[terryupton]

I have tried a few approaches to make this work. These are detailed below. But whatever I have tried, it seems to fail with some pre-set inheritance overriding the config.

here is a screenshot of the inheritance overriding:

Here is what I have tried:

'ol > li': {
  '&::before': {
    color: theme('colors.pink.500'),
  },
},

ol: {
  li: {
    '&::before': {
      color: theme('colors.pink.500'),
    },
  },
},

<ul> lists seem to work ONLY if you use the second approach. Again wrapping 'ul > li' fails with inheritance.

[terryupton]

Update
So if I set the config like so:

'ol li': {
  '&::before': {
    color: theme('colors.pink.500'),
  },
},
'ul li': {
  '&::before': {
    backgroundColor: theme('colors.current'),
    width: '1rem',
    height: '1rem'
  },
},

Then both work as the inheritance isn't as specific. However, I am not sure if this is either Intuitive or consistent...

Any Thoughts?

[jacobdalamb]

why is this issue still open

[terryupton]

Why do you think it should be closed @benji014628 ?

[jacobdalamb]

Why do you think it should be closed @benji014628 ?

because you already found the solution

[terryupton]

It's not a solution to the original issue, it was a work-around that used a difference level of inheritance, but the original problem still exists and depending the use case could still cause an issue.

Also there are inconsistencies between how the <ul> and <ol> work in the config. So I still believe the issue is valid and should remain open.

[jacobdalamb]

well in order to override a style in your .css file you need to have higher specificity like .box .prose ol li::before or use an id

[jacobdalamb]

and what are the inconsistencies between <ul> and <ol>?

[terryupton]

well in order to override a style in your .css file you need to have higher specificity like .box .prose ol li::before or use an id

I am not trying to override my styles but the styles that the typography plugin generates.

and what are the inconsistencies between <ul> and <ol>?

It says in the original thread.

[jacobdalamb]

okay I don't really get it when the simplest way to override the styles is like this

'ol > li::before': {
       color: theme('colors.pink.500'),
 },
'ul > li::before': {
        backgroundColor: theme('colors.pink.800'),
 },

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should work as expected, but since Tailwind 2.0 you have to keep put the overrides inside the extend section.
Also make sure that for ul you are using backgroundColor and for ol you are using color.

Also note that you can't use deeply nested styles like scss. So it should look something like this:

module.exports = {
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            'ol > li::before': {
              color: theme('colors.pink.500'),
            },
            'ul > li::before': {
              backgroundColor: theme('colors.pink.500'),
            },
          },
        },
      }),
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
}

Here is a working example: https://play.tailwindcss.com/u9vl3dKZ85?file=config