Plugin breaks checkbox styling

[anquinn]

What version of @tailwindcss/forms are you using?

0.5.8

What version of Node.js are you using?

21.6.2

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/GFkEfRhCWb

Describe your issue

Adding the form plugin to the TailwindUI examples breaks the styling. This can be seen here: https://play.tailwindcss.com/nTA7jckBOV?file=config

If you remove the plugin from the config the CSS works as intended.

[RobinMalfait]

Hey!

Tailwind UI doesn't require the @tailwindcss/forms plugin anymore. The @tailwindcss/forms plugin by default applies global styles for all kinds of inputs, including checkboxes. This means that there is indeed a chance that some styles are incompatible.

In this case, if you can get rid of the forms plugin (if you only use Tailwind UI inputs) I would remove it. However if you can't, I would recommend to use the class strategy for the @tailwindcss/form plugin. This will allow you to add classes to just the elements you want to apply the default styles from @tailwindcss/forms to:

  /** @type {import('tailwindcss').Config} */
  export default {
    theme: {},
    plugins: [
-     require('@tailwindcss/forms')
+     require('@tailwindcss/forms')({
+       strategy: 'class',
+     }),
    ],
  }

Play: https://play.tailwindcss.com/M8K1c1TJR5?file=config
More info: https://github.com/tailwindlabs/tailwindcss-forms?tab=readme-ov-file#using-classes-to-style

This also means that for Tailwind UI inputs and checkbox, you don't have to apply the class.

Hope this helps!

[smitpatelx]

• If you are using tailwind v4, here is how I achieved customizable(check-icon-color) check box using css and classes:

/* checkbox.css */

input[type="checkbox"] {
  @apply relative bg-none;

  &::after {
    content: '';
    @apply block w-full h-full z-10
    scale-0 opacity-0 transition-all duration-400 ease-in-out
    absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
    bg-current pointer-events-none;

    mask-size: 120%;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  &:checked::after {
    @apply opacity-100 scale-100 transition-all duration-400 ease-in-out pointer-events-none;
  }
}

<input
  checked={true} 
  type="checkbox"
  className="w-5 h-5
    bg-zinc-900 checked:bg-sky-500 disabled:bg-zinc-700 after:bg-transparent
    checked:after:text-sky-950 disabled:after:text-zinc-500"
/>

• If you have Content-Security-Policy enabled. You might need to add img-src 'self' data:; in your CSP to allow loading images encoded in your css.
• checked:after:text-sky-950 class will generate the following code in final css output:

.checked\:after\:text-sky-950 {
    &:checked {
        &::after {
            content: var(--tw-content);
            color: var(--color-sky-950) /* oklch(0.293 0.066 243.157) = #052f4a */;
        }
    }
}