You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+8-23
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,11 @@
1
1
# @tailwindcss/forms
2
2
3
-
A plugin that provides basic default form styles that are easy to override with utilities. Hopefully the successor to `@tailwindcss/custom-forms`.
3
+
A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
4
4
5
5
## Installation
6
6
7
+
> Note that @tailwindcss/forms is designed for Tailwind CSS v2.0, which is currently in alpha.
8
+
7
9
Install the plugin from npm:
8
10
9
11
```sh
@@ -33,7 +35,7 @@ module.exports = {
33
35
34
36
[**View the live demo**](https://tailwindcss-forms.vercel.app/)
35
37
36
-
All of the basic form elements you use will now have some sensible default styles that are easy to override with utilities.
38
+
All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.
37
39
38
40
Currently we add basic utility-friendly form styles for the following form element types:
39
41
@@ -57,33 +59,16 @@ Currently we add basic utility-friendly form styles for the following form eleme
57
59
58
60
**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.
59
61
60
-
Every element has been normalized/reset in a way that they look pretty great without doing anything to them at all:
61
-
62
-
```html
63
-
<!-- This just looks good! -->
64
-
<inputtype="text">
65
-
```
66
-
67
-
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:
62
+
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:
68
63
69
64
```html
70
-
<!-- You can customize padding on a select element! Oh my god!-->
65
+
<!-- You can actually customize padding on a select element now:-->
71
66
<selectclass="px-4 py-3 rounded-full">
72
67
<!-- ... -->
73
68
</select>
74
-
```
75
-
76
-
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:
77
-
78
-
```html
79
-
<!-- This will be blue when checked -->
80
-
<inputtype="checkbox"class="text-blue-500">
81
-
82
-
<!-- This will be pink when checked -->
83
-
<inputtype="checkbox"class="text-pink-500">
84
69
85
-
<!--This will be green when checked-->
86
-
<inputtype="checkbox"class="text-green-500">
70
+
<!--Or change a checkbox color using text color utilities:-->
0 commit comments