I cannot find the @tailwindcss/forms in the v4 docs

[lightzane]

Using Tailwind CSS v4

I came styling my input with a type of datetime-local when I realize it looks horrible on mobile device,
Knowing that I just copied the utility classes from the TailwindCSS. But when I compare the actual tailwind docs,
the input fields looks fine. Fine means the spacing and the padding looks good in mobile. But on my web development (and viewing on the mobile devices the padding disappears!)

Good thing I started with the v3 Tailwindcss, and there was a @tailwindcss/forms easily be seen in the docs.
However, using v4, I almost forgot about the @tailwindcss/forms as I was having hard time finding it on the official docs.

I know I can just jump-in on the GitHub docs for Tailwindcss forms, however, for newcomers, they might also be struggling to know that @tailwindcss/forms exist.

Or is there anyone that could help me have a link for the setup of tailwindcss/forms or has it been really missing in the official tailwind v4 docs site?

[rozsazoltan]

• https://tailwindcss.com/docs/functions-and-directives#plugin-directive

Not everyone uses it, and it's not required to use. I think they insist on it; they can easily get informed.

• https://github.com/tailwindlabs/tailwindcss-forms
• https://tailwindcss-forms.vercel.app

By default for v4:

npm install -D @tailwindcss/forms

/* app.css */
@import "tailwindcss";
@plugin "@tailwindcss/forms";

And if you want configure it:

/* app.css */
@import "tailwindcss";
@plugin "@tailwindcss/forms" {
  strategy: "base"; /* only generate global styles; or */
  strategy: "class"; /* only generate classes */
}

If I want a nicer-looking input, then perhaps a UI library would be a better choice than this plugin.

• https://daisyui.com
• https://headlessui.com
• https://heroui.com
• https://primefaces.org
• https://ui.shadcn.com
• etc.