@tailwindcss/forms
Advanced tools
@tailwindcss/forms - npm Package Compare versions
Comparing version 0.2.0 to 0.2.1
@@ -12,2 +12,8 @@ # Changelog | ||
| ## [0.2.1] - 2020-11-17 | ||
| ### Fixed | ||
| - Fix issue where default checkbox/radio border color took precedence over user border color on focus ([d0b9fd9](https://github.com/tailwindlabs/tailwindcss-forms/commit/d0b9fd9)) | ||
| ## [0.2.0] - 2020-11-16 | ||
@@ -48,3 +54,4 @@ | ||
| [unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.0...HEAD | ||
| [unreleased]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.1...HEAD | ||
| [0.2.1]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.2.0...v0.2.1 | ||
| [0.2.0]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.4...v0.2.0 | ||
@@ -51,0 +58,0 @@ [0.1.4]: https://github.com/tailwindlabs/tailwindcss-forms/compare/v0.1.3...v0.1.4 |
| { | ||
| "name": "@tailwindcss/forms", | ||
| "version": "0.2.0", | ||
| "version": "0.2.1", | ||
| "main": "src/index.js", | ||
@@ -17,9 +17,16 @@ "license": "MIT", | ||
| "scripts": { | ||
| "prepublishOnly": "node scripts/build.js" | ||
| "dev": "concurrently \"npm run serve\" \"npm run watch\"", | ||
| "serve": "live-server .", | ||
| "watch": "chokidar \"./src/**/*.js\" -c \"npm run build\"", | ||
| "build": "node scripts/build.js", | ||
| "prepublishOnly": "npm run build" | ||
| }, | ||
| "devDependencies": { | ||
| "autoprefixer": "^10.0.2", | ||
| "chokidar-cli": "^2.1.0", | ||
| "clean-css": "^4.2.1", | ||
| "concurrently": "^5.3.0", | ||
| "live-server": "^1.2.1", | ||
| "postcss": "^8.1.7", | ||
| "tailwindcss": "^2.0.0-alpha.23" | ||
| "tailwindcss": "^2.0.0-alpha.25" | ||
| }, | ||
@@ -26,0 +33,0 @@ "dependencies": { |
| # @tailwindcss/forms | ||
| A plugin that provides basic default form styles that are easy to override with utilities. Hopefully the successor to `@tailwindcss/custom-forms`. | ||
| A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities. | ||
| ## Installation | ||
| > Note that @tailwindcss/forms is designed for Tailwind CSS v2.0, which is currently in alpha. | ||
| Install the plugin from npm: | ||
@@ -36,3 +38,3 @@ | ||
| All of the basic form elements you use will now have some sensible default styles that are easy to override with utilities. | ||
| All of the basic form elements you use will now have some simple default styles that are easy to override with utilities. | ||
@@ -61,31 +63,14 @@ Currently we add basic utility-friendly form styles for the following form element types: | ||
| Every element has been normalized/reset in a way that they look pretty great without doing anything to them at all: | ||
| Every 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: | ||
| ```html | ||
| <!-- This just looks good! --> | ||
| <input type="text"> | ||
| ``` | ||
| The real benefit of this plugin however is that all of these elements are easy to modify on the fly with utilities, which is not possible with user agent form styles: | ||
| ```html | ||
| <!-- You can customize padding on a select element! Oh my god! --> | ||
| <!-- You can actually customize padding on a select element now: --> | ||
| <select class="px-4 py-3 rounded-full"> | ||
| <!-- ... --> | ||
| </select> | ||
| ``` | ||
| We've baked in a few useful tricks, like making the checkbox and radio controls use `currentColor` for their checked state, so you can even customize how those look using text color utilities: | ||
| ```html | ||
| <!-- This will be blue when checked --> | ||
| <input type="checkbox" class="text-blue-500"> | ||
| <!-- This will be pink when checked --> | ||
| <input type="checkbox" class="text-pink-500"> | ||
| <!-- This will be green when checked --> | ||
| <input type="checkbox" class="text-green-500"> | ||
| <!-- Or change a checkbox color using text color utilities: --> | ||
| <input type="checkbox" class="rounded text-pink-500" /> | ||
| ``` | ||
| More customization examples and best practices coming soon. |
@@ -131,3 +131,2 @@ const svgToDataUri = require('mini-svg-data-uri') | ||
| 'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`, | ||
| 'border-color': theme('colors.gray.500', colors.gray[500]), | ||
| }, | ||
@@ -134,0 +133,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by37.25%
42804
- Number of package files
- increased by12.5%
9
Worsened metrics
- Dev dependency count
- increased by75%
7
- Lines of code
- decreased by-0.52%
386
- Number of lines in readme file
- decreased by-16.85%
74