Does TailwindCSS support ch units of measurement?

Question

New to Tailwind and re-writing a site but in my Styled Components file I'm declaring a ch unit of 50, example:

const Foobar = styled.div`
  max-width: 50ch;
`

when researching the documentation I don't see if this is supported in my version:

"tailwindcss": "^3.4.6"

and the so far I've only see this be a feature request in this discussion.

In TailwindCSS how can I utilize a ch unit of width measurement?

Answer 1

You can always customize your tailwindcss theme and extend the default theme to your liking.

module.exports = {
  theme: {
    extend: {
      spacing: {
        'ch-25': '25ch',
        'ch-50': '50ch',
        'ch-75': '75ch',
      }
    }
  }
}

<div class="max-w-ch-50">Foobar</div>

Additionally, you can also use arbitrary values.

<div class="max-w-[50ch]">Foobar</div>

Playground