Change default list style position and text-color

Support
#1

I’m trying to change the default list style position to list-inside for both ol and ul elements. I would also like to change the color of the disc or number to match the default text.

I want to change it across my entire site, but mostly want it changed for my posts.

Here is one of my current posts with both list types.

I read the Gust docs for customization.

However, I’m unsure if I should change it in the tailwind.config.js file, tailwind.css file, or in one of the theme files.

Any suggestions? Thanks!

#2

You’re probably best changing this in the tailwind.config.js but it depends a little. The blog posts use Tailwind Typography so you can customise that through the config like this:

{
  "theme": {
    "extend": {
      "typography": {
        "DEFAULT": {
          "css": {
            "ol": {
              "list-style-position": "inside"
            },
           "ul": {
              "list-style-position": "inside"
            },
            "ol > li::marker": {
              "color": "inherit",
            },
            "ul > li::marker": {
              "color": "inherit",
            }
          }
        }
      }
    }
  }
}

That’ll change the base CSS settings in the typography plugin. If you want to change it in other places too you can use the css section to do that, but just be sure to take care how you apply those rules. Lists are used in many places on the site ( e.g. pagination, navigation, etc ) so setting a global ol { list-style: ... } may not be what you’re after.

1 Like
#3

Changing it for the typography plugin is exactly what I wanted…thanks!