tailwindcss v4, does not work with checkbox

[inndim]

What version of @tailwindcss/forms are you using?

v4.1.4

What version of Node.js are you using?

v22.11

What browser are you using?

Chrome v135

What operating system are you using?

Windows, Ubuntu

Reproduction repository

https://play.tailwindcss.com/wjtVnxdT0K?file=css

Describe your issue

The checkbox in tailwindcss 4 is not styled. Here is an example in the sandbox: https://play.tailwindcss.com/wjtVnxdT0K?file=css
I also attach an example for tailwindcss 3 in which everything works: https://play.tailwindcss.com/oG1T0lcPlE?file=css

How to do it now in tailwindcss 4?

[philipp-spiess]

Hey! The reason for this is that you're overwriting the checkbox in the base layer but also import the forms plugin which will emit utility classes in the utilities layer. You can fix this by changing your @layer base to @layer utilities or removing the @layer all together: https://play.tailwindcss.com/wQAuBum6PY?file=css

[ansgarsteinkamp]

In the utilities layer? That would mean it’s impossible to override it with utility classes, right?

[philipp-spiess]

That would mean it’s impossible to override it with utility classes, right?

If that's the goal I'd suggest putting it into the components layer: https://play.tailwindcss.com/Ie1rga7QUB?file=css this one is registered between base and utilities :)

[ansgarsteinkamp]

Thank you very much, but the only solution that worked for me with Tailwind v4 is the following:

@plugin '@tailwindcss/forms' {
   strategy: "class";
}

@layer base {
   [type="text"],
   [type="email"],
   [type="url"],
   [type="password"],
   [type="number"],
   [type="date"],
   [type="datetime-local"],
   [type="month"],
   [type="search"],
   [type="tel"],
   [type="time"],
   [type="week"] {
      @apply form-input;
   }

   textarea {
      @apply form-textarea;
   }

   select {
      @apply form-select;
   }

   [multiple] {
      @apply form-multiselect;
   }

   [type="checkbox"] {
      @apply form-checkbox;
   }

   [type="radio"] {
      @apply form-radio;
   }
}