{"_id":"tailwindcss-form-ui","_rev":"4-6f2eca062fbd6872037515d2ff080d6a","name":"tailwindcss-form-ui","dist-tags":{"latest":"0.5.8"},"versions":{"0.0.0-stage":{"name":"tailwindcss-form-ui","version":"0.0.0-stage","_id":"tailwindcss-form-ui@0.0.0-stage","stub":true,"maintainers":[{"name":"lasat79072","email":"lasat79072@leafflip.com"}],"dist":{"shasum":"41de3372146ccaf4dc4dec1ade4827024289d137","tarball":"https://registry.npmjs.org/tailwindcss-form-ui/-/tailwindcss-form-ui-0.0.0-stage.tgz","fileCount":2,"integrity":"sha512-pZEjyuyM4aCao8s1HEcGTtPE00PKqooB3S9nBANW8RvQ06l67VbYzLs+hwR1RKbXU3qu1a3ZcU8aQmrdKthQFA==","signatures":[{"sig":"MEUCIQCXfg8LqBkqVRFlej1V/TyN3OQERT1UQ0TOwkPMfGN7HAIgbMR/NYRTX+535+QXZ+xv3NZd4cSVnABKV+D0CGVkhRE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":341},"_npmUser":{"name":"lasat79072","email":"lasat79072@leafflip.com"},"description":"Temporary package placeholder for staged publishing","directories":{}},"0.5.8":{"_id":"tailwindcss-form-ui@0.5.8","bugs":{"url":"https://github.com/tailwindlabs/tailwindcss-forms/issues"},"dist":{"shasum":"4fb5ed9931c027ff8fe9f37a86963bee695a9c0c","tarball":"https://registry.npmjs.org/tailwindcss-form-ui/-/tailwindcss-form-ui-0.5.8.tgz","fileCount":16,"integrity":"sha512-8ZOG0l0uuK0eKQfEU5gIES/jZGnOKQ/CjmRi1ckYlSo0Rs83M0OwLys43mKzmBPcNjRdXl+jTeYYF56jFeIfkw==","signatures":[{"sig":"MEUCIGsCljuFZaawkULofWqr5Q7Nq5SNpTIOW9w+oIdmsoiYAiEAl59llsYzSEmocQ+P5ggSNWOX78BOUsn7JG+ZCwU/MRg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDpUX7ZPe1NYuAuPdioDHQkzF2L082jIFJZVzcrCgcVIgIhAPterV5pGhfvg++0pkE4O/4+M2QjvjW68YLKvsHn5h2B"}],"unpackedSize":66978},"main":"src/index.js","name":"tailwindcss-form-ui","types":"src/index.d.ts","author":{"name":"@tailwindcss"},"license":"MIT","scripts":{"dev":"concurrently \"npm run serve\" \"npm run watch\"","test":"exit 0","build":"tailwindcss -o dist/tailwind.css","serve":"live-server .","watch":"npm run build -- -w","format":"prettier . --write","release-notes":"node ./scripts/release-notes.js","release-channel":"node ./scripts/release-channel.js"},"version":"0.5.8","_npmUser":{"name":"lasat79072","email":"lasat79072@leafflip.com"},"homepage":"https://github.com/tailwindlabs/tailwindcss-forms#readme","prettier":{"semi":false,"plugins":["prettier-plugin-tailwindcss"],"printWidth":100,"singleQuote":true,"trailingComma":"es5"},"repository":{"url":"git+https://github.com/tailwindlabs/tailwindcss-forms.git","type":"git"},"_npmVersion":"11.16.0","description":"A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.","directories":{},"maintainers":[{"name":"lasat79072","email":"lasat79072@leafflip.com"}],"_nodeVersion":"24.18.0","dependencies":{"mini-svg-data-uri":"^1.2.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"postcss":"^8.4.13","prettier":"^3.3.3","live-server":"^1.2.2","tailwindcss":"^3.0.24","autoprefixer":"^10.4.6","concurrently":"^5.3.0","prettier-plugin-tailwindcss":"^0.6.8"},"peerDependencies":{"tailwindcss":">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwindcss-form-ui_0.5.8_1793737943752_0.4467724049186166"}}},"time":{"created":"2026-10-13T15:21:40.424Z","modified":"2026-11-03T20:32:24.010Z","0.5.1":"2026-09-17T13:31:03.780Z","0.0.0-stage":"2026-10-13T15:21:40.424Z","0.5.8":"2026-11-03T20:32:23.848Z"},"description":"A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.","maintainers":[{"name":"lasat79072","email":"lasat79072@leafflip.com"}],"readme":"# tailwindcss-form-ui\n\nA plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install -D tailwindcss-form-ui\n```\n\nThen, when using Tailwind CSS v4, add the plugin to your main stylesheet:\n\n```css\n/* app.css */\n@import \"tailwindcss\";\n@plugin \"tailwindcss-form-ui\";\n```\n\nIf you are still using **Tailwind CSS v3**, add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-form-ui'),\n    // ...\n  ],\n}\n```\n\n## Basic usage\n\n[**View the live demo**](https://tailwindcss-form-ui.vercel.app/)\n\nAll of the basic form elements you use will now have some simple default styles that are easy to override with utilities.\n\nCurrently we add basic utility-friendly form styles for the following form element types:\n\n- `input[type='text']`\n- `input[type='password']`\n- `input[type='email']`\n- `input[type='number']`\n- `input[type='url']`\n- `input[type='date']`\n- `input[type='datetime-local']`\n- `input[type='month']`\n- `input[type='week']`\n- `input[type='time']`\n- `input[type='search']`\n- `input[type='tel']`\n- `input[type='checkbox']`\n- `input[type='radio']`\n- `select`\n- `select[multiple]`\n- `textarea`\n\nEvery element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `<select>` or `<input type=\"checkbox\">` that normally need to be reset with `appearance: none` and customized using custom CSS:\n\n```html\n<!-- You can actually customize padding on a select element now: -->\n<select class=\"rounded-full px-4 py-3\">\n  <!-- ... -->\n</select>\n\n<!-- Or change a checkbox color using text color utilities: -->\n<input type=\"checkbox\" class=\"rounded text-pink-500\" />\n```\n\nMore customization examples and best practices coming soon.\n\n### Using classes to style\n\nIn addition to the global styles, we also generate a set of corresponding classes which can be used to explicitly apply the form styles to an element. This can be useful in situations where you need to make a non-form element, such as a `<div>`, look like a form element.\n\n```html\n<input type=\"email\" class=\"form-input rounded-full px-4 py-3\" />\n\n<select class=\"form-select rounded-full px-4 py-3\">\n  <!-- ... -->\n</select>\n\n<input type=\"checkbox\" class=\"form-checkbox rounded text-pink-500\" />\n```\n\nHere is a complete table of the provided `form-*` classes for reference:\n\n| Base                      | Class              |\n| ------------------------- | ------------------ |\n| `[type='text']`           | `form-input`       |\n| `[type='email']`          | `form-input`       |\n| `[type='url']`            | `form-input`       |\n| `[type='password']`       | `form-input`       |\n| `[type='number']`         | `form-input`       |\n| `[type='date']`           | `form-input`       |\n| `[type='datetime-local']` | `form-input`       |\n| `[type='month']`          | `form-input`       |\n| `[type='search']`         | `form-input`       |\n| `[type='tel']`            | `form-input`       |\n| `[type='time']`           | `form-input`       |\n| `[type='week']`           | `form-input`       |\n| `textarea`                | `form-textarea`    |\n| `select`                  | `form-select`      |\n| `select[multiple]`        | `form-multiselect` |\n| `[type='checkbox']`       | `form-checkbox`    |\n| `[type='radio']`          | `form-radio`       |\n\n### Using only global styles or only classes\n\nAlthough we recommend thinking of this plugin as a \"form reset\" rather than a collection of form component styles, in some cases our default approach may be too heavy-handed, especially when integrating this plugin into existing projects.\n\nIf generating both the global (base) styles and classes doesn't work well with your project, you can use the `strategy` option to limit the plugin to just one of these approaches.\n\nWhen using Tailwind CSS v4, configure the plugin in your main stylesheet:\n\n```css\n/* app.css */\n@plugin \"tailwindcss-form-ui\" {\n  strategy: \"base\"; /* only generate global styles; or */\n  strategy: \"class\"; /* only generate classes */\n}\n```\n\nIf you are still using **Tailwind CSS v3**, configure the plugin in your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nplugins: [\n  require(\"tailwindcss-form-ui\")({\n    strategy: 'base', // only generate global styles\n    strategy: 'class', // only generate classes\n  }),\n],\n```\n\nWhen using the `base` strategy, form elements are styled globally, and no `form-{name}` classes are generated.\n\nWhen using the `class` strategy, form elements are not styled globally, and instead must be styled using the generated `form-{name}` classes.\n","readmeFilename":"README.md","homepage":"https://github.com/tailwindlabs/tailwindcss-forms#readme","repository":{"url":"git+https://github.com/tailwindlabs/tailwindcss-forms.git","type":"git"},"author":{"name":"@tailwindcss"},"bugs":{"url":"https://github.com/tailwindlabs/tailwindcss-forms/issues"},"license":"MIT"}