{"_id":"tailwind-form-styles","name":"tailwind-form-styles","dist-tags":{"latest":"0.5.1"},"versions":{"0.5.1":{"name":"tailwind-form-styles","version":"0.5.1","main":"src/index.js","types":"src/index.d.ts","license":"MIT","repository":{"type":"git","url":"git+https://github.com/tailwindlabs/tailwindcss-forms.git"},"publishConfig":{"access":"public"},"prettier":{"printWidth":100,"semi":false,"singleQuote":true,"trailingComma":"es5","plugins":["prettier-plugin-tailwindcss"]},"scripts":{"dev":"concurrently \"npm run serve\" \"npm run watch\"","serve":"live-server .","watch":"npm run build -- -w","build":"tailwindcss -o dist/tailwind.css","test":"exit 0","release-channel":"node ./scripts/release-channel.js","release-notes":"node ./scripts/release-notes.js","format":"prettier . --write"},"peerDependencies":{"tailwindcss":">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"},"devDependencies":{"autoprefixer":"^10.4.6","concurrently":"^5.3.0","live-server":"^1.2.2","postcss":"^8.4.13","prettier":"^3.3.3","prettier-plugin-tailwindcss":"^0.6.8","tailwindcss":"^3.0.24"},"dependencies":{"mini-svg-data-uri":"^1.2.3"},"_id":"tailwind-form-styles@0.5.1","description":"A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.","bugs":{"url":"https://github.com/tailwindlabs/tailwindcss-forms/issues"},"homepage":"https://github.com/tailwindlabs/tailwindcss-forms#readme","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-5ECCc8bbpOWuiGV4qTR68u7F3VPhiwKxobTw4OpHYLCeskAaFAkmvxCij25Rh0SBnCVrIIjPdVI+xBmCSQHDXA==","shasum":"ff1313982edb5d39383c5f1c1886281b881451d7","tarball":"https://registry.npmjs.org/tailwind-form-styles/-/tailwind-form-styles-0.5.1.tgz","fileCount":16,"unpackedSize":81032,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFCo7g0XfzVcyO2FtbyaXc1oa5a+ib3ZJIMpN3Ndg4XZAiBaZRfo5Yc7KcHRmFqOZr7nmZkvHeavhl2d5dpnHkK6GQ=="}]},"_npmUser":{"name":"tasiti3383","email":"tasiti3383@meonvr.com"},"directories":{},"maintainers":[{"name":"tasiti3383","email":"tasiti3383@meonvr.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tailwind-form-styles_0.5.1_1789740195435_0.1948358380287991"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-18T14:03:15.236Z","0.5.1":"2026-09-18T14:03:15.557Z","modified":"2026-09-18T14:03:15.741Z"},"maintainers":[{"name":"tasiti3383","email":"tasiti3383@meonvr.com"}],"description":"A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.","homepage":"https://github.com/tailwindlabs/tailwindcss-forms#readme","repository":{"type":"git","url":"git+https://github.com/tailwindlabs/tailwindcss-forms.git"},"bugs":{"url":"https://github.com/tailwindlabs/tailwindcss-forms/issues"},"license":"MIT","readme":"# tailwind-form-styles\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 tailwind-form-styles\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 \"tailwind-form-styles\";\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('tailwind-form-styles'),\n    // ...\n  ],\n}\n```\n\n## Basic usage\n\n[**View the live demo**](https://tailwind-form-styles.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 \"tailwind-form-styles\" {\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(\"tailwind-form-styles\")({\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","_rev":"1-e8eaff3109702ad826615dedb66152ad"}