Skip to content
This repository was archived by the owner on Sep 11, 2021. It is now read-only.

Commit ceca61b

Browse files
adamwathanadamwathan
committed
Add some basic documentation
1 parent 3d85f96 commit ceca61b

File tree

3 files changed

+173
-10
lines changed

3 files changed

+173
-10
lines changed

‎components/Layout.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Head from 'next/head'
44

55
export default ({ meta, children }) => {
66
return (
7-
<div class="antialiased text-gray-900">
7+
<div className="antialiased text-gray-900">
88
<Head>
99
<title>{meta.title}</title>
1010
</Head>

‎pages/index.mdx‎

Lines changed: 169 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ instead of being forced to write custom CSS.
2626

2727
## Text Input
2828

29+
Add basic styles to a normal `input` element using the `form-input` class.
30+
2931
<CodeSample code={`
3032
<label class="block">
3133
<span class="text-gray-700">Input</span>
@@ -37,18 +39,21 @@ instead of being forced to write custom CSS.
3739

3840
## Textarea
3941

42+
Add basic styles to a `textarea` element using the `form-textarea` class.
4043

4144
<CodeSample code={`
4245
<label class="block">
4346
<span class="text-gray-700">Textarea</span>
44-
<textarea class="mt-1 block w-full form-textarea" rows="3" placeholder="Enter some long form content."></textarea>
47+
<textarea class="form-textarea mt-1 block w-full" rows="3" placeholder="Enter some long form content."></textarea>
4548
</label>
4649
`}/>
4750

4851
---
4952

5053
## Select
5154

55+
Add basic styles to a `select` element using the `form-select` class.
56+
5257
<CodeSample code={`
5358
<label class="block">
5459
<span class="text-gray-700">Select</span>
@@ -61,10 +66,13 @@ instead of being forced to write custom CSS.
6166

6267
### Select Multiple
6368

69+
If you are using the `multiple` attribute on a `select` element, use the `form-multiselect` class
70+
instead.
71+
6472
<CodeSample code={`
6573
<label class="block">
6674
<span class="text-gray-700">Multiselect</span>
67-
<select class="form-input block w-full mt-1" multiple>
75+
<select class="form-multiselect block w-full mt-1" multiple>
6876
<option>Option 1</option>
6977
<option>Option 2</option>
7078
<option>Option 3</option>
@@ -78,27 +86,70 @@ instead of being forced to write custom CSS.
7886

7987
## Checkbox
8088

89+
Create a custom checkbox by adding a `span` with the `form-checkbox` class next to an
90+
`input[type=checkbox]`.
91+
92+
Hide the real checkbox element using the `sr-only` class, and hide the span from screen readers
93+
using `aria-hidden`.
94+
95+
Control the layout of the checkbox and label however you like — the `form-checkbox` class doesn't
96+
impose any opinions in that regard. Here we've used flexbox to center the checkbox with the label.
97+
8198
<CodeSample code={`
8299
<div class="block">
83100
<span class="text-gray-700">Checkboxes</span>
84101
<div class="mt-2">
85102
<div>
86103
<label class="inline-flex items-center">
87-
<input type="checkbox" class="sr-only"/>
88-
<span class="form-checkbox text-indigo-700" aria-hidden="true"></span>
104+
<input type="checkbox" class="sr-only" checked/>
105+
<span class="form-checkbox text-gray-800" aria-hidden="true"></span>
89106
<span class="ml-2">Option 1</span>
90107
</label>
91108
</div>
92109
<div>
93110
<label class="inline-flex items-center">
94111
<input type="checkbox" class="sr-only"/>
95-
<span class="form-checkbox text-green-600" aria-hidden="true"></span>
112+
<span class="form-checkbox text-gray-800" aria-hidden="true"></span>
96113
<span class="ml-2">Option 2</span>
97114
</label>
98115
</div>
99116
<div>
100117
<label class="inline-flex items-center">
101118
<input type="checkbox" class="sr-only"/>
119+
<span class="form-checkbox text-gray-800" aria-hidden="true"></span>
120+
<span class="ml-2">Option 3</span>
121+
</label>
122+
</div>
123+
</div>
124+
</div>
125+
`}/>
126+
127+
### Changing the color
128+
129+
You can customize the background color of a checkbox when it's checked by using Tailwind's text
130+
color utilities, like `text-indigo-600`.
131+
132+
<CodeSample code={`
133+
<div class="block">
134+
<span class="text-gray-700">Checkboxes</span>
135+
<div class="mt-2">
136+
<div>
137+
<label class="inline-flex items-center">
138+
<input type="checkbox" class="sr-only" checked/>
139+
<span class="form-checkbox text-indigo-600" aria-hidden="true"></span>
140+
<span class="ml-2">Option 1</span>
141+
</label>
142+
</div>
143+
<div>
144+
<label class="inline-flex items-center">
145+
<input type="checkbox" class="sr-only" checked/>
146+
<span class="form-checkbox text-blue-500" aria-hidden="true"></span>
147+
<span class="ml-2">Option 2</span>
148+
</label>
149+
</div>
150+
<div>
151+
<label class="inline-flex items-center">
152+
<input type="checkbox" class="sr-only" checked/>
102153
<span class="form-checkbox text-pink-600" aria-hidden="true"></span>
103154
<span class="ml-2">Option 3</span>
104155
</label>
@@ -107,37 +158,146 @@ instead of being forced to write custom CSS.
107158
</div>
108159
`}/>
109160

161+
### Changing the size
162+
163+
Use Tailwind's width and height utilities (like `h-6` and `w-6`) to customize the size of the
164+
checkbox.
165+
166+
<CodeSample code={`
167+
<div class="block">
168+
<span class="text-gray-700">Checkboxes</span>
169+
<div class="mt-2">
170+
<div>
171+
<label class="inline-flex items-center">
172+
<input type="checkbox" class="sr-only" checked/>
173+
<span class="form-checkbox h-4 w-4 text-gray-800" aria-hidden="true"></span>
174+
<span class="ml-2">Option 1</span>
175+
</label>
176+
</div>
177+
<div class="mt-1">
178+
<label class="inline-flex items-center">
179+
<input type="checkbox" class="sr-only"/>
180+
<span class="form-checkbox h-6 w-6 text-gray-800" aria-hidden="true"></span>
181+
<span class="ml-3 text-lg">Option 2</span>
182+
</label>
183+
</div>
184+
<div class="mt-1">
185+
<label class="inline-flex items-center">
186+
<input type="checkbox" class="sr-only"/>
187+
<span class="form-checkbox h-8 w-8 text-gray-800" aria-hidden="true"></span>
188+
<span class="ml-4 text-xl">Option 3</span>
189+
</label>
190+
</div>
191+
</div>
192+
</div>
193+
`}/>
194+
110195
---
111196

112197
## Radio Button
113198

199+
Create a custom radio button by adding a `span` with the `form-radio` class next to an
200+
`input[type=radio]`.
201+
202+
Hide the real radio button using the `sr-only` class, and hide the span from screen readers
203+
using `aria-hidden`.
114204

205+
Control the layout of the radio button and label however you like — the `form-radio` class doesn't
206+
impose any opinions in that regard. Here we've used flexbox to center the radio button with the label.
115207

116208
<CodeSample code={`
117209
<div class="block">
118-
<span class="text-gray-700">Radio buttons</span>
210+
<span class="text-gray-700">Radio Buttons</span>
119211
<div class="mt-2">
120212
<div>
121213
<label class="inline-flex items-center">
122-
<input type="radio" class="sr-only" name="radio" value="1"/>
123-
<span class="form-radio text-indigo-700" aria-hidden="true"></span>
214+
<input type="radio" class="sr-only" name="radio" value="1" checked/>
215+
<span class="form-radio text-gray-800" aria-hidden="true"></span>
124216
<span class="ml-2">Option 1</span>
125217
</label>
126218
</div>
127219
<div>
128220
<label class="inline-flex items-center">
129221
<input type="radio" class="sr-only" name="radio" value="2"/>
130-
<span class="form-radio text-green-600" aria-hidden="true"></span>
222+
<span class="form-radio text-gray-800" aria-hidden="true"></span>
131223
<span class="ml-2">Option 2</span>
132224
</label>
133225
</div>
134226
<div>
135227
<label class="inline-flex items-center">
136228
<input type="radio" class="sr-only" name="radio" value="3"/>
229+
<span class="form-radio text-gray-800" aria-hidden="true"></span>
230+
<span class="ml-2">Option 3</span>
231+
</label>
232+
</div>
233+
</div>
234+
</div>
235+
`}/>
236+
237+
### Changing the color
238+
239+
You can customize the background color of a radio button when it's checked by using Tailwind's text
240+
color utilities, like `text-indigo-600`.
241+
242+
<CodeSample code={`
243+
<div class="block">
244+
<span class="text-gray-700">Radio Buttons</span>
245+
<div class="mt-2">
246+
<div>
247+
<label class="inline-flex items-center">
248+
<input type="radio" class="sr-only" name="radio-colors" value="1" checked/>
249+
<span class="form-radio text-indigo-600" aria-hidden="true"></span>
250+
<span class="ml-2">Option 1</span>
251+
</label>
252+
</div>
253+
<div>
254+
<label class="inline-flex items-center">
255+
<input type="radio" class="sr-only" name="radio-colors" value="2"/>
256+
<span class="form-radio text-blue-500" aria-hidden="true"></span>
257+
<span class="ml-2">Option 2</span>
258+
</label>
259+
</div>
260+
<div>
261+
<label class="inline-flex items-center">
262+
<input type="radio" class="sr-only" name="radio-colors" value="3"/>
137263
<span class="form-radio text-pink-600" aria-hidden="true"></span>
138264
<span class="ml-2">Option 3</span>
139265
</label>
140266
</div>
141267
</div>
142268
</div>
143269
`}/>
270+
271+
### Changing the size
272+
273+
Use Tailwind's width and height utilities (like `h-6` and `w-6`) to customize the size of the
274+
radio button.
275+
276+
<CodeSample code={`
277+
<div class="block">
278+
<span class="text-gray-700">Radio Buttons</span>
279+
<div class="mt-2">
280+
<div>
281+
<label class="inline-flex items-center">
282+
<input type="radio" class="sr-only" name="radio-sizes" value="1" checked/>
283+
<span class="form-radio h-4 w-4 text-gray-800" aria-hidden="true"></span>
284+
<span class="ml-2">Option 1</span>
285+
</label>
286+
</div>
287+
<div class="mt-1">
288+
<label class="inline-flex items-center">
289+
<input type="radio" class="sr-only" name="radio-sizes" value="2"/>
290+
<span class="form-radio h-6 w-6 text-gray-800" aria-hidden="true"></span>
291+
<span class="ml-3 text-lg">Option 2</span>
292+
</label>
293+
</div>
294+
<div class="mt-1">
295+
<label class="inline-flex items-center">
296+
<input type="radio" class="sr-only" name="radio-sizes" value="3"/>
297+
<span class="form-radio h-8 w-8 text-gray-800" aria-hidden="true"></span>
298+
<span class="ml-4 text-xl">Option 3</span>
299+
</label>
300+
</div>
301+
</div>
302+
</div>
303+
`}/>

‎static/css/tailwind.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@
2929
> p {
3030
@apply text-gray-700 leading-relaxed
3131
}
32+
> p code {
33+
@apply text-sm font-bold text-gray-700 bg-gray-200
34+
}
3235
}
3336

3437
.hljs {

0 commit comments

Comments
 (0)