Omit the requirement to specify the type attribute for the text inputs

README.md

@@ -55,8 +55,6 @@ Currently we add basic utility-friendly form styles for the following form eleme
 - `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
@@ -86,4 +84,4 @@ We've baked in a few useful tricks, like making the checkbox and radio controls
 <input type="checkbox" class="text-green-500">
 ```
 
-More customization examples and best practices coming soon.
+More customization examples and best practices coming soon.

index.html

@@ -22,6 +22,10 @@ <h2 class="text-2xl font-bold">Styled</h2>
               <span class="text-gray-700">Input (text)</span>
               <input type="text" class="mt-1 block w-full" placeholder="john@example.com" />
             </label>
+            <label class="block">
+              <span class="text-gray-700">Input (text) [without `type` attribute]</span>
+              <input class="mt-1 block w-full" placeholder="john@example.com" />
+            </label>
             <label class="block">
               <span class="text-gray-700">Input (email)</span>
               <input type="email" class="mt-1 block w-full" placeholder="john@example.com" />

src/index.js

@@ -7,6 +7,7 @@ const { colors, spacing, borderWidth, borderRadius, outline } = defaultTheme
 const forms = plugin(function ({ addBase, theme }) {
   addBase({
     [`
+      input:not([type]),
       [type='text'],
       [type='email'],
       [type='url'],