How do I use plugins to set default list style?

[tettoffensive]

I'm using a third-party component which renders <ul><li>Stuff in here</li></ul> with no classes or id associated. I wanted to set the default list style that tailwind erases in base style to disc.

I tried doing this:

plugins: [({ addUtilities }) => addUtilities({ 'ul > li': { listStyleType: 'disc' } })],

But I must be misunderstanding how to use these methods because this and everything I've tried have not worked.

Am I on the right track or way off? What am I missing? (using 1.7.0)

[ben-rogerson]

Try something like this:

module.exports = {
  // theme: {},
  plugins: [discChildren],
}

function discChildren({ addComponents }) {
  addComponents({
    '.my-class': {
      'ul > li': {
        listStyleType: 'disc',
      },
    },
  })
}

You'd add the class (tw="my-class") either on the component or a parent of the component.

[tettoffensive]

@ben-rogerson This worked, but something funny is happening. I tried to add:

'ol > li': {
  listStyleType: 'decimal',
}

However, it wasn't showing up. Inspecting the CSS in the browser for some reason it's not there. It feels like a caching issue, but with very peculiar behavior because if I change the 'ul' to be decimal it still shows up as disc.

I'm restarting my server and I've also tried clearing the browser cache. But I haven't been able to get the 'ol' rule to show up.

EDIT: If I create a new class, then it works. something is caching the rule somewhere.

this works:

function discChildren({ addComponents }) {
  addComponents({
    '.my-class': {
      'ul > li': {
        listStyleType: 'disc',
      },
    '.my-class-2': {
      'ol > li': {
        listStyleType: 'decimal',
      },
    },
  })
}

does not work:

function discChildren({ addComponents }) {
  addComponents({
    '.my-class': {
      'ul > li': {
        listStyleType: 'disc', // try changing to decimal and it will stay disc
      },
      'ol > li': {
        listStyleType: 'decimal',
      },
    },
  })
}

[ben-rogerson]

There's some Gatsby sized caching happening by the sounds, try making a change in the code to force a recompile if that doesn't work, delete your .cache and restart the server. #11

[tettoffensive]

Turns out to be an import issue. I had never used the syntax tw="my-class" before. Always did css={tw`my-class`} (because I didn't know about the former).

In either case, I must import tw from 'twin.macro'; for the classes to be applied. I didn't notice because there's no complaint of missing import when using tw=

But when using tw= and import tw from 'twin.macro'; TypeScript does complain that 'tw' is declared but its value is never read.ts(6133).

(Hope that wasn't too confusing)

[fvanwijk]

You can do import 'twin.macro'; if you are using tw as prop instead of template function

[ben-rogerson]

I recommend having a quick read through the examples in the readme. I'm also working on some guides for the css prop and the styled import.