List style type in theme config

[matthieudou]

Hi there,

I'm trying to upgrade my tailwind V3 project to V4.

I might have missed it, but didn't found documentation in v4 for listStyleType. I managed to make it work with --list-style-type-square: square;, but since it's undocumented, I'm not sure this is the way to go.

Is this the right way to do ? Is it considered "bad practice" (I know transitions on height aren't "good") ?

Thanks by advance

// tailwind.config.ts
const config: Config = {
  theme: {
    extend: {
      listStyleType: {
        square: 'square',
      },
      transitionProperty: {
        height: 'height',
      },
    },
  },
};

/* tailwind.css */
@theme {
  --list-style-type-square: square;

  --transition-property-height: height;
}

[adamwathan]

Yeah that stuff exists for backward compatibility. Personally unless you actually want those CSS variables to exist I think adding those as custom utilities is more idiomatic in v4:

@utility list-square {
  list-style-type: square;
}

[matthieudou]

I indeed don't need to have them as css variables. The utility seems to be a good compromise.

Thanks !