@tailwindcss/forms - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
   "name": "@tailwindcss/forms",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "src/index.js",
@@ -22,8 +22,8 @@ "license": "MIT",
     "clean-css": "^4.2.1",
-    "postcss": "^7.0.17",
-    "tailwindcss": "^2.0.0-alpha.14"
+    "postcss": "^7.0.17"
   },
   "dependencies": {
+    "tailwindcss": "^2.0.0-alpha.15",
     "mini-svg-data-uri": "^1.2.3"
   }
 }

README.md

@@ -5,3 +5,2 @@ # @tailwindcss/forms
 
-
 ## Installation
@@ -36,2 +35,55 @@
 
-All of the basic form elements you use will now have some sensible default styles that are easy to override with utilities. Works basically like the `@tailwindcss/custom-forms` plugin in terms of how you modify things using utility classes. More details eventually.
+All of the basic form elements you use will now have some sensible default styles that are easy to override with utilities.
+
+Currently we add basic utility-friendly form styles for the following form element types:
+
+- `input[type='text']`
+- `input[type='password']`
+- `input[type='email']`
+- `input[type='number']`
+- `input[type='url']`
+- `input[type='date']`
+- `input[type='datetime-local']`
+- `input[type='month']`
+- `input[type='week']`
+- `input[type='time']`
+- `input[type='search']`
+- `input[type='tel']`
+- `input[type='checkbox']`
+- `input[type='radio']`
+- `select`
+- `select[multiple]`
+- `textarea`
+
+**Note that for text inputs, you must add the `type="text"` attribute for these styles to take effect.** This is a necessary trade-off to avoid relying on the overly greedy `input` selector and unintentionally styling elements we don't have solutions for yet, like `input[type="range"]` for example.
+
+Every element has been normalized/reset in a way that they look pretty great without doing anything to them at all:
+
+```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! -->
+<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">
+```
+
+More customization examples and best practices coming soon.

New alerts

License Policy Violation

License

This 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

License

This 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

25760

increased by5.86%

Dev dependency count

3

decreased by-25%

Number of lines in readme file

87

increased by148.57%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedtailwindcss@^2.0.0-alpha.15

• + Added@babel/code-frame@7.24.7(transitive)

• + Added@babel/helper-validator-identifier@7.24.7(transitive)

• + Added@babel/highlight@7.24.7(transitive)

• + Added@nodelib/fs.scandir@2.1.5(transitive)

• + Added@nodelib/fs.stat@2.0.5(transitive)

• + Added@nodelib/fs.walk@1.2.8(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedacorn@7.4.1(transitive)

• + Addedacorn-node@1.8.2(transitive)

• + Addedacorn-walk@7.2.0(transitive)

• + Addedansi-styles@3.2.14.3.0(transitive)

• + Addedanymatch@3.1.3(transitive)

• + Addedarg@5.0.2(transitive)

• + Addedautoprefixer@10.4.20(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbinary-extensions@2.3.0(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedbraces@3.0.3(transitive)

• + Addedbrowserslist@4.23.3(transitive)

• + Addedbytes@3.1.2(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedcamelcase-css@2.0.1(transitive)

• + Addedcaniuse-lite@1.0.30001660(transitive)

• + Addedchalk@2.4.24.1.2(transitive)

• + Addedchokidar@3.6.0(transitive)

• + Addedcolor@4.2.3(transitive)

• + Addedcolor-convert@1.9.32.0.1(transitive)

• + Addedcolor-name@1.1.31.1.4(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addedcommander@8.3.0(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addedcss-color-names@0.0.4(transitive)

• + Addedcss-unit-converter@1.1.2(transitive)

• + Addedcssesc@3.0.0(transitive)

• + Addeddefined@1.0.1(transitive)

• + Addeddetective@5.2.1(transitive)

• + Addeddidyoumean@1.2.2(transitive)

• + Addeddlv@1.1.3(transitive)

• + Addedelectron-to-chromium@1.5.25(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfast-glob@3.3.2(transitive)

• + Addedfastq@1.17.1(transitive)

• + Addedfill-range@7.1.1(transitive)

• + Addedfraction.js@4.3.7(transitive)

• + Addedfs-extra@10.1.0(transitive)

• + Addedfs.realpath@1.0.0(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglob@7.2.3(transitive)

• + Addedglob-parent@5.1.26.0.2(transitive)

• + Addedgraceful-fs@4.2.11(transitive)

• + Addedhas-flag@3.0.04.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedhex-color-regex@1.1.0(transitive)

• + Addedhsl-regex@1.0.0(transitive)

• + Addedhsla-regex@1.0.0(transitive)

• + Addedhtml-tags@3.3.1(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedis-arrayish@0.2.10.3.2(transitive)

• + Addedis-binary-path@2.1.0(transitive)

• + Addedis-color-stop@1.1.0(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedis-extglob@2.1.1(transitive)

• + Addedis-glob@4.0.3(transitive)

• + Addedis-number@7.0.0(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedjsonfile@6.1.0(transitive)

• + Addedlilconfig@2.1.0(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlodash.topath@4.5.2(transitive)

• + Addedmerge2@1.4.1(transitive)

• + Addedmicromatch@4.0.8(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmodern-normalize@1.1.0(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addednode-emoji@1.11.0(transitive)

• + Addednode-releases@2.0.18(transitive)

• + Addednormalize-path@3.0.0(transitive)

• + Addednormalize-range@0.1.2(transitive)

• + Addedobject-hash@2.2.0(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.0(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedpostcss@8.4.47(transitive)

• + Addedpostcss-js@3.0.3(transitive)

• + Addedpostcss-load-config@3.1.4(transitive)

• + Addedpostcss-nested@5.0.6(transitive)

• + Addedpostcss-selector-parser@6.1.2(transitive)

• + Addedpostcss-value-parser@3.3.14.2.0(transitive)

• + Addedpretty-hrtime@1.0.3(transitive)

• + Addedpurgecss@4.1.3(transitive)

• + Addedqueue-microtask@1.2.3(transitive)

• + Addedquick-lru@5.1.1(transitive)

• + Addedreaddirp@3.6.0(transitive)

• + Addedreduce-css-calc@2.1.8(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedreusify@1.0.4(transitive)

• + Addedrgb-regex@1.0.1(transitive)

• + Addedrgba-regex@1.0.0(transitive)

• + Addedrun-parallel@1.2.0(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedsupports-color@5.5.07.2.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtailwindcss@2.2.19(transitive)

• + Addedtmp@0.2.3(transitive)

• + Addedto-regex-range@5.0.1(transitive)

• + Addeduniversalify@2.0.1(transitive)

• + Addedupdate-browserslist-db@1.1.0(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• + Addedwrappy@1.0.2(transitive)

• + Addedxtend@4.0.2(transitive)

• + Addedyaml@1.10.2(transitive)