Checkbox does not render as expected

[justincervantes]

What version of @tailwindcss/typography are you using?

0.5.8

What version of Node.js are you using?

18.13.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction repository

https://play.tailwindcss.com/kSdylLBCTc

Describe your issue

When parsing markdown that contains a checkbox item into HTML, the generated output still has a bullet point for a normal list (I'm using marked as a markdown parser to HTML - https://www.npmjs.com/package/marked).

- [ ] Hello world

Generates

<ul>
  <li>
    <input type="checkbox" disabled=""> 
    Hello world
  </li>
</ul>

The expected behaviour is just getting a checkbox, similar to what you'll see in a github readme for a list of tracked items. Instead, you see the checkbox with a bullet in front of it.

[Sevichecc]

I hope this issue (#55) might be helpful.

[justincervantes]

Thanks @Sevichecc, it helped me come up with a workaround. The linked solution had some classes which weren't available to me, but with some has chaining I was able to achieve the same.

Leaving it below for anyone else who runs into this.

tailwind.config.js - add this to the theme extend

    theme: {
        extend: {
            typography: {
                DEFAULT: {
                    css: {
                        'ul:has(li):has(input[type="checkbox"])': {
                            padding: 0,
                        },
                        'ul > li:has(input[type="checkbox"])': {
                            listStyle: 'none',
                        },
                        'ul > li:has(input[type="checkbox"]) ul li': {
                            paddingLeft: 30,
                        },
                    },
                },
            },
        },
    },

*Revised to address sub check box lists. There might be a better way to get it pixel perfect (source code uses a function called em, but 30 padding looked fine to me).

[Sevichecc]

@justincervantes Thank you for your solution! I used your configuration in another project and it worked great.

[reinink]

Hey! So it's always been a little tricky to know how far to go with the typography plugin — as you might expect people have lots of different use cases and it's almost impossible for this plugin to cover all of them. For example, form elements are something we haven't touched with this plugin, which is why you're bumping into this issue with the checkboxes.

Fortunately we've done our best to make customizing the typography styles as straightforward as possible, as as others have noted you can make some adjustments to your tailwind.config.js file to support this use case.

Here's another example of how you can implement this:

theme: {
  extend: {
    typography: {
      DEFAULT: {
        css: {
          'ul > li:has(input[type="checkbox"])': {
            listStyle: 'none',
          },
          'ul > li > input[type="checkbox"]:first-child': {
            margin: '0 16px 0 -32px !important',
          },
        },
      },
    },
  },
},

You might need to adjust these values slightly depending on the font sizes you're using. Also, fair warning, this implementation relies on has(), which doesn't have great browser support yet. You could alternatively do this using a .todo class:

- 'ul > li:has(input[type="checkbox"])': {
+ 'ul.todo': {

Just be aware that you'll then need to update your markup to include this class when needed:

- <ul>
+ <ul class="todo">

Hope that helps! 🤙