diff --git a/packages/tailwindcss/preflight.css b/packages/tailwindcss/preflight.css
index 6b8cbbae41db..e1325dcd9bd2 100644
--- a/packages/tailwindcss/preflight.css
+++ b/packages/tailwindcss/preflight.css
@@ -23,6 +23,7 @@
   5. Use the user's configured `sans` font-feature-settings by default.
   6. Use the user's configured `sans` font-variation-settings by default.
   7. Disable tap highlights on iOS.
+  8. Set a default `color-scheme`.
 */
 
 html,
@@ -43,6 +44,7 @@ html,
   font-feature-settings: var(--default-font-feature-settings, normal); /* 5 */
   font-variation-settings: var(--default-font-variation-settings, normal); /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
+  color-scheme: light dark; /* 8 */
 }
 
 /*
@@ -188,7 +190,7 @@ textarea,
   font-feature-settings: inherit;
   font-variation-settings: inherit;
   letter-spacing: inherit;
-  color: inherit;
+  /* color: inherit;  this can be removed because we overwrite the color for all excepte optgroup? */
 }
 
 /*
@@ -199,8 +201,54 @@ textarea,
 button,
 input:where([type='button'], [type='reset'], [type='submit']),
 ::file-selector-button {
-  background: transparent; /* 1 */
-  appearance: button; /* 2 */
+  /*background: transparent this can be removed becuase we overwrite the bacgkround color */
+  /*appearance: button; This is not needed anymore in latest iOS Safari, can we delete this? */
+}
+
+/*
+  Add default form styles that make all form inputs usable.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  color: color-mix(in srgb, currentcolor 50%, transparent);
+}
+
+input:where(:not([type='checkbox'], [type='radio'], [type='file'])),
+textarea,
+select:where([multiple]),
+select:where([size]) {
+  border: 1px solid light-dark(#666, #777);
+  border-radius: 3px;
+  padding-inline: 0.25em;
+  padding-block: 0.125em;
+  background-color: light-dark(#fff, #222);
+  color: light-dark(#000, #fff);
+}
+
+button,
+select:where(:not([multiple], [size])),
+::file-selector-button {
+  padding-inline: 0.25em;
+  padding-block: 0.125em;
+  background-color: light-dark(#eee, #555);
+  border: 1px solid light-dark(#666, #777);
+  border-radius: 4px;
+  color: light-dark(#000, #fff);
+}
+button:where(:hover),
+select:where(:not([multiple], [size]):hover),
+::file-selector-button:where(:hover) {
+  background-color: light-dark(#ddd, #666);
+}
+button:where(:active),
+select:where(:not([multiple], [size]):active),
+::file-selector-button:where(:active) {
+  background-color: light-dark(#ccc, #777);
+}
+
+::file-selector-button {
+  margin-inline-end: 4px;
 }
 
 /*
diff --git a/playgrounds/vite/src/app.tsx b/playgrounds/vite/src/app.tsx
index 4abc17cb52e1..4ef297044b48 100644
--- a/playgrounds/vite/src/app.tsx
+++ b/playgrounds/vite/src/app.tsx
@@ -1,8 +1,226 @@
 export function App() {
   return (
-    <div className="m-3 p-3 border">
-      <h1 className="text-blue-500">Hello World</h1>
-      <div className="-inset-x-full -inset-y-full -space-x-full -space-y-full -inset-full"></div>
+    <div className="px-6 antialiased">
+      <div className="mx-auto max-w-xl py-12 md:max-w-4xl">
+        <h2 className="text-2xl font-bold">Reset styles</h2>
+        <p className="mt-2 text-lg">These are form elements this plugin styles by default.</p>
+        <div className="mt-8 grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+          <div className="grid grid-cols-1 gap-6">
+            <label className="block">
+              <span className="">Input (text)</span>
+              <input
+                type="text"
+                className="form-input mt-1 block w-full"
+                placeholder="john@example.com"
+              />
+            </label>
+            <label className="block">
+              <span className="">Input (email)</span>
+              <input
+                type="email"
+                className="form-input mt-1 block w-full"
+                placeholder="john@example.com"
+              />
+            </label>
+            <label className="block">
+              <span className="">Input (email, multiple)</span>
+              <input
+                type="email"
+                multiple=""
+                className="form-input mt-1 block w-full"
+                placeholder="john@example.com"
+              />
+            </label>
+            <label className="block">
+              <span className="">Input (password)</span>
+              <input
+                type="password"
+                className="form-input mt-1 block w-full"
+                placeholder="john@example.com"
+              />
+            </label>
+            <label className="block">
+              <span className="">Input (date)</span>
+              <input type="date" className="form-input mt-1 block w-full" />
+            </label>
+            <label className="block">
+              <span className="">Input (datetime-local)</span>
+              <input type="datetime-local" className="form-input mt-1 block w-full" />
+            </label>
+            <label className="block">
+              <span className="">Input (month)</span>
+              <input type="month" className="form-input mt-1 block w-full" />
+            </label>
+            <label className="block">
+              <span className="">Input (number)</span>
+              <input type="number" className="form-input mt-1 block w-full" />
+            </label>
+            <label className="block">
+              <span className="">Input (search)</span>
+              <input type="search" className="form-input mt-1 block w-full" />
+            </label>
+            <label className="block">
+              <span className="">Input (time)</span>
+              <input type="time" className="form-input mt-1 block w-full" />
+            </label>
+            <label className="block">
+              <span className="">Input (week)</span>
+              <input type="week" className="form-input mt-1 block w-full" />
+            </label>
+
+            <label className="block">
+              <span className="">Button</span>
+              <div className="mt-1">
+                <button className="rounded">Submit</button>
+              </div>
+            </label>
+          </div>
+          <div className="grid grid-cols-1 gap-6">
+            <label className="block">
+              <span className="">Input (tel)</span>
+              <input
+                type="tel"
+                multiple=""
+                className="form-input mt-1 block w-full"
+                placeholder="john@example.com"
+              />
+            </label>
+            <label className="block">
+              <span className="">Input (url)</span>
+              <input
+                type="url"
+                multiple=""
+                className="form-input mt-1 block w-full"
+                placeholder="john@example.com"
+              />
+            </label>
+            <label className="block">
+              <span className="">Select</span>
+              <select className="form-select appearance-none_ mt-1 block w-full">
+                <option>Option 1</option>
+                <option>Option 2</option>
+              </select>
+            </label>
+            <label className="block">
+              <span className="">Select (single, with size)</span>
+              <select className="form-select mt-1 block w-full" size="3">
+                <option>Option 1</option>
+                <option>Option 2</option>
+                <option>Option 3</option>
+                <option>Option 4</option>
+                <option>Option 5</option>
+              </select>
+            </label>
+            <label className="block">
+              <span className="">Select (multiple)</span>
+              <select className="form-multiselect mt-1 block w-full" multiple="">
+                <option>Option 1</option>
+                <option>Option 2</option>
+                <option>Option 3</option>
+                <option>Option 4</option>
+                <option>Option 5</option>
+              </select>
+            </label>
+            <label className="block">
+              <span className="">Select (multiple, with size)</span>
+              <select className="form-multiselect mt-1 block w-full" multiple="" size="3">
+                <option>Option 1</option>
+                <option>Option 2</option>
+                <option>Option 3</option>
+                <option>Option 4</option>
+                <option>Option 5</option>
+              </select>
+            </label>
+            <label className="block">
+              <span className="">Textarea</span>
+              <textarea
+                className="form-textarea mt-1 block h-24 w-full"
+                rows="3"
+                placeholder="Enter some long form content."
+              ></textarea>
+            </label>
+            <fieldset className="block">
+              <legend className="">Checkboxes</legend>
+              <div className="mt-2">
+                <div>
+                  <label className="inline-flex items-center">
+                    <input className="form-checkbox" type="checkbox" checked="" />
+                    <span className="ml-2">Option 1</span>
+                  </label>
+                </div>
+                <div>
+                  <label className="inline-flex items-center">
+                    <input className="form-checkbox" type="checkbox" />
+                    <span className="ml-2">Option 2</span>
+                  </label>
+                </div>
+                <div>
+                  <label className="inline-flex items-center">
+                    <input className="form-checkbox" type="checkbox" />
+                    <span className="ml-2">Option 3</span>
+                  </label>
+                </div>
+              </div>
+            </fieldset>
+            <fieldset className="block">
+              <legend className="">Radio Buttons</legend>
+              <div className="mt-2">
+                <div>
+                  <label className="inline-flex items-center">
+                    <input
+                      className="form-radio"
+                      type="radio"
+                      checked=""
+                      name="radio-direct"
+                      value="1"
+                    />
+                    <span className="ml-2">Option 1</span>
+                  </label>
+                </div>
+                <div>
+                  <label className="inline-flex items-center">
+                    <input className="form-radio" type="radio" name="radio-direct" value="2" />
+                    <span className="ml-2">Option 2</span>
+                  </label>
+                </div>
+                <div>
+                  <label className="inline-flex items-center">
+                    <input className="form-radio" type="radio" name="radio-direct" value="3" />
+                    <span className="ml-2">Option 3</span>
+                  </label>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto max-w-4xl py-12">
+        <h2 className="text-2xl font-bold">Untouched</h2>
+        <p className="mt-2 text-lg">
+          These are form elements we don't handle (yet?), but we use this to make sure we haven't
+          accidentally styled them by mistake.
+        </p>
+        <div className="mt-8 grid grid-cols-2 items-start gap-6">
+          <div className="grid grid-cols-1 gap-6">
+            <label className="block">
+              <span className="">Input (range)</span>
+              <input type="range" className="mt-1 block w-full" />
+            </label>
+            <label className="block">
+              <span className="">Input (color)</span>
+              <input type="color" className="mt-1 block w-full" />
+            </label>
+            <label className="block">
+              <span className="">Input (file)</span>
+              <input type="file" className="mt-1 block w-full" />
+            </label>
+            <label className="block">
+              <span className="">Input (file, multiple)</span>
+              <input type="file" multiple="" className="mt-1 block w-full" />
+            </label>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/playgrounds/vite/src/index.css b/playgrounds/vite/src/index.css
index d4b5078586e2..068ea50c6350 100644
--- a/playgrounds/vite/src/index.css
+++ b/playgrounds/vite/src/index.css
@@ -1 +1,2 @@
 @import 'tailwindcss';
+