Skip to content

Commit 1c7e429

Browse files
philipp-spiessphilipp-spiess
committed
Revert changes to Vite playground
1 parent 59de5ae commit 1c7e429

File tree

4 files changed

+7
-322
lines changed

4 files changed

+7
-322
lines changed

‎playgrounds/vite/package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616
"tailwindcss": "workspace:^"
1717
},
1818
"devDependencies": {
19-
"@tailwindcss/forms": "^0.5.7",
20-
"@tailwindcss/typography": "^0.5.14",
2119
"@types/react": "^18.3.3",
2220
"@types/react-dom": "^18.3.0",
2321
"bun": "^1.1.22",

‎playgrounds/vite/src/app.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
11
@import 'tailwindcss';
22
@plugin "./plugin.js";
3-
@plugin "./typography.js";
4-
@plugin "./forms.js";

‎playgrounds/vite/src/app.tsx

Lines changed: 4 additions & 248 deletions
Original file line numberDiff line numberDiff line change
@@ -2,254 +2,10 @@ import { Foo } from './foo'
22

33
export function App() {
44
return (
5-
<div>
6-
<div className="m-3 p-3 border">
7-
<h1 className="text-blue-500">Hello World</h1>
8-
<button className="hocus:underline">Click me</button>
9-
<Foo />
10-
</div>
11-
<div className="mt-8 prose prose-slate mx-auto lg:prose-lg">
12-
<h1>Headline</h1>
13-
<p className="lead">
14-
Until now, trying to style an article, document, or blog post with Tailwind has been a
15-
tedious task that required a keen eye for typography and a lot of complex custom CSS.
16-
</p>
17-
<p>
18-
By default, Tailwind removes all of the default browser styling from paragraphs, headings,
19-
lists and more. This ends up being really useful for building application UIs because you
20-
spend less time undoing user-agent styles, but when you <em>really are</em> just trying to
21-
style some content that came from a rich-text editor in a CMS or a markdown file, it can
22-
be surprising and unintuitive.
23-
</p>
24-
<p>
25-
We get lots of complaints about it actually, with people regularly asking us things like:
26-
</p>
27-
<blockquote>
28-
<p>
29-
Why is Tailwind removing the default styles on my <code>h1</code> elements? How do I
30-
disable this? What do you mean I lose all the other base styles too?
31-
</p>
32-
</blockquote>
33-
</div>
34-
<div>
35-
<div class="antialiased text-gray-900 px-6">
36-
<div class="max-w-xl mx-auto py-12 md:max-w-4xl">
37-
<h2 class="text-2xl font-bold">Reset styles</h2>
38-
<p class="mt-2 text-lg text-gray-500">
39-
These are form elements this plugin styles by default.
40-
</p>
41-
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
42-
<div class="grid grid-cols-1 gap-6">
43-
<label class="block">
44-
<span class="text-gray-700">Input (text)</span>
45-
<input
46-
type="text"
47-
class="form-input mt-1 block w-full"
48-
placeholder="[email protected]"
49-
/>
50-
</label>
51-
<label class="block">
52-
<span class="text-gray-700">Input (email)</span>
53-
<input
54-
type="email"
55-
class="form-input mt-1 block w-full"
56-
placeholder="[email protected]"
57-
/>
58-
</label>
59-
<label class="block">
60-
<span class="text-gray-700">Input (email, multiple)</span>
61-
<input
62-
type="email"
63-
multiple
64-
class="form-input mt-1 block w-full"
65-
placeholder="[email protected]"
66-
/>
67-
</label>
68-
<label class="block">
69-
<span class="text-gray-700">Input (password)</span>
70-
<input
71-
type="password"
72-
class="form-input mt-1 block w-full"
73-
placeholder="[email protected]"
74-
/>
75-
</label>
76-
<label class="block">
77-
<span class="text-gray-700">Input (date)</span>
78-
<input type="date" class="form-input mt-1 block w-full" />
79-
</label>
80-
<label class="block">
81-
<span class="text-gray-700">Input (datetime-local)</span>
82-
<input type="datetime-local" class="form-input mt-1 block w-full" />
83-
</label>
84-
<label class="block">
85-
<span class="text-gray-700">Input (month)</span>
86-
<input type="month" class="form-input mt-1 block w-full" />
87-
</label>
88-
<label class="block">
89-
<span class="text-gray-700">Input (number)</span>
90-
<input type="number" class="form-input mt-1 block w-full" />
91-
</label>
92-
<label class="block">
93-
<span class="text-gray-700">Input (search)</span>
94-
<input type="search" class="form-input mt-1 block w-full" />
95-
</label>
96-
<label class="block">
97-
<span class="text-gray-700">Input (time)</span>
98-
<input type="time" class="form-input mt-1 block w-full" />
99-
</label>
100-
<label class="block">
101-
<span class="text-gray-700">Input (week)</span>
102-
<input type="week" class="form-input mt-1 block w-full" />
103-
</label>
104-
</div>
105-
<div class="grid grid-cols-1 gap-6">
106-
<label class="block">
107-
<span class="text-gray-700">Input (tel)</span>
108-
<input
109-
type="tel"
110-
multiple
111-
class="form-input mt-1 block w-full"
112-
placeholder="[email protected]"
113-
/>
114-
</label>
115-
<label class="block">
116-
<span class="text-gray-700">Input (url)</span>
117-
<input
118-
type="url"
119-
multiple
120-
class="form-input mt-1 block w-full"
121-
placeholder="[email protected]"
122-
/>
123-
</label>
124-
<label class="block">
125-
<span class="text-gray-700">Select</span>
126-
<select class="form-select block w-full mt-1">
127-
<option>Option 1</option>
128-
<option>Option 2</option>
129-
</select>
130-
</label>
131-
<label class="block">
132-
<span class="text-gray-700">Select (single, with size)</span>
133-
<select class="form-select block w-full mt-1" size="3">
134-
<option>Option 1</option>
135-
<option>Option 2</option>
136-
<option>Option 3</option>
137-
<option>Option 4</option>
138-
<option>Option 5</option>
139-
</select>
140-
</label>
141-
<label class="block">
142-
<span class="text-gray-700">Select (multiple)</span>
143-
<select class="form-multiselect block w-full mt-1" multiple>
144-
<option>Option 1</option>
145-
<option>Option 2</option>
146-
<option>Option 3</option>
147-
<option>Option 4</option>
148-
<option>Option 5</option>
149-
</select>
150-
</label>
151-
<label class="block">
152-
<span class="text-gray-700">Select (multiple, with size)</span>
153-
<select class="form-multiselect block w-full mt-1" multiple size="3">
154-
<option>Option 1</option>
155-
<option>Option 2</option>
156-
<option>Option 3</option>
157-
<option>Option 4</option>
158-
<option>Option 5</option>
159-
</select>
160-
</label>
161-
<label class="block">
162-
<span class="text-gray-700">Textarea</span>
163-
<textarea
164-
class="form-textarea mt-1 block w-full h-24"
165-
rows="3"
166-
placeholder="Enter some long form content."
167-
></textarea>
168-
</label>
169-
<fieldset class="block">
170-
<legend class="text-gray-700">Checkboxes</legend>
171-
<div class="mt-2">
172-
<div>
173-
<label class="inline-flex items-center">
174-
<input class="form-checkbox" type="checkbox" checked />
175-
<span class="ml-2">Option 1</span>
176-
</label>
177-
</div>
178-
<div>
179-
<label class="inline-flex items-center">
180-
<input class="form-checkbox" type="checkbox" />
181-
<span class="ml-2">Option 2</span>
182-
</label>
183-
</div>
184-
<div>
185-
<label class="inline-flex items-center">
186-
<input class="form-checkbox" type="checkbox" />
187-
<span class="ml-2">Option 3</span>
188-
</label>
189-
</div>
190-
</div>
191-
</fieldset>
192-
<fieldset class="block">
193-
<legend class="text-gray-700">Radio Buttons</legend>
194-
<div class="mt-2">
195-
<div>
196-
<label class="inline-flex items-center">
197-
<input
198-
class="form-radio"
199-
type="radio"
200-
checked
201-
name="radio-direct"
202-
value="1"
203-
/>
204-
<span class="ml-2">Option 1</span>
205-
</label>
206-
</div>
207-
<div>
208-
<label class="inline-flex items-center">
209-
<input class="form-radio" type="radio" name="radio-direct" value="2" />
210-
<span class="ml-2">Option 2</span>
211-
</label>
212-
</div>
213-
<div>
214-
<label class="inline-flex items-center">
215-
<input class="form-radio" type="radio" name="radio-direct" value="3" />
216-
<span class="ml-2">Option 3</span>
217-
</label>
218-
</div>
219-
</div>
220-
</fieldset>
221-
</div>
222-
</div>
223-
</div>
224-
<div class="max-w-4xl mx-auto py-12">
225-
<h2 class="text-2xl font-bold">Untouched</h2>
226-
<p class="mt-2 text-lg text-gray-500">
227-
These are form elements we don't handle (yet?), but we use this to make sure we
228-
haven't accidentally styled them by mistake.
229-
</p>
230-
<div class="mt-8 grid grid-cols-2 gap-6 items-start">
231-
<div class="grid grid-cols-1 gap-6">
232-
<label class="block">
233-
<span class="text-gray-700">Input (range)</span>
234-
<input type="range" class="mt-1 block w-full" />
235-
</label>
236-
<label class="block">
237-
<span class="text-gray-700">Input (color)</span>
238-
<input type="color" class="mt-1 block w-full" />
239-
</label>
240-
<label class="block">
241-
<span class="text-gray-700">Input (file)</span>
242-
<input type="file" class="mt-1 block w-full" />
243-
</label>
244-
<label class="block">
245-
<span class="text-gray-700">Input (file, multiple)</span>
246-
<input type="file" multiple class="mt-1 block w-full" />
247-
</label>
248-
</div>
249-
</div>
250-
</div>
251-
</div>
252-
</div>
5+
<div className="m-3 p-3 border">
6+
<h1 className="text-blue-500">Hello World</h1>
7+
<button className="hocus:underline">Click me</button>
8+
<Foo />
2539
</div>
25410
)
25511
}

0 commit comments

Comments
 (0)