Skip to content

Commit

Permalink
Update form preflight
Browse files Browse the repository at this point in the history
  • Loading branch information
@philipp-spiess
philipp-spiess committed Nov 19, 2024
1 parent 1ce9877 commit d0e89d4
Show file tree
Hide file tree
Showing 3 changed files with 273 additions and 6 deletions.
54 changes: 51 additions & 3 deletions packages/tailwindcss/preflight.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 */
}

/*
Expand Down Expand Up @@ -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? */
}

/*
Expand All @@ -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;
}

/*
Expand Down
224 changes: 221 additions & 3 deletions playgrounds/vite/src/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
)
}
1 change: 1 addition & 0 deletions playgrounds/vite/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@import 'tailwindcss';

0 comments on commit d0e89d4

Please sign in to comment.