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

Commit fa9a291

Browse files
adamwathanadamwathan
committed
Update README
1 parent 47c8d5f commit fa9a291

File tree

2 files changed

+81
-90
lines changed

2 files changed

+81
-90
lines changed

‎README.md‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1-
# Tailwind CSS Playground
1+
# Tailwind CSS Basic Form Styles
22

3-
A simple starter project for playing around with Tailwind in a proper PostCSS environment.
3+
Out of the box, selects, checkboxes, and radios look awful in Tailwind and right now the only way to make them look better is with custom CSS. The goal of this experiment is to provide a better starting point for form elements that is still fairly unopinionated and easy to customize by just layering on additional utilities instead of having to write complicated CSS rules (looking at you checkboxes.)
44

5-
To get started:
5+
Preview what I've got currently here:
6+
7+
https://nervous-knuth-fa9c3e.netlify.com/
8+
9+
## Running locally
610

711
1. Clone the repository:
812

913
```bash
10-
git clone https://github.com/tailwindcss/playground.git tailwindcss-playground
14+
git clone https://github.com/adamwathan/tailwindcss-form-styles.git tailwindcss-form-styles
1115

12-
cd tailwindcss-playground
16+
cd tailwindcss-form-styles
1317
```
1418

1519
2. Install the dependencies:
@@ -33,21 +37,3 @@ To get started:
3337
```
3438

3539
Now you should be able to see the project running at localhost:8080.
36-
37-
4. Open `public/index.html` in your editor and start experimenting!
38-
39-
## Building for production
40-
41-
Even though this isn't necessarily a starter kit for a proper project, we've included an example of setting up both [Purgecss](https://www.purgecss.com/) and [cssnano](https://cssnano.co/) to optimize your CSS for production.
42-
43-
To build an optimized version of your CSS, simply run:
44-
45-
```bash
46-
# Using npm
47-
npm run production
48-
49-
# Using Yarn
50-
yarn run production
51-
```
52-
53-
After that's done, check out `./public/build/tailwind.css` to see the optimized output.

‎public/index.html‎

Lines changed: 72 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -10,80 +10,85 @@
1010
</head>
1111
<body class="antialiased text-gray-900">
1212
<div class="bg-gray-700 min-h-screen flex items-center justify-center">
13-
<div class="max-w-2xl w-full bg-white rounded p-8 shadow-lg">
14-
<div class="flex -mx-6">
15-
<div class="w-1/2 px-6">
16-
<label class="block">
17-
<span class="text-gray-700">Input</span>
18-
<input type="email" class="mt-1 block w-full form-input" value="john@example.com">
19-
</label>
20-
<label class="block mt-6">
21-
<span class="text-gray-700">Textarea</span>
22-
<textarea class="mt-1 block w-full form-textarea" rows="3">Some longer form content.</textarea>
23-
</label>
24-
<label class="block mt-6">
25-
<span class="text-gray-700">Select</span>
26-
<select class="form-select block w-full mt-1">
27-
<option>Option 1</option>
28-
<option>Option 2</option>
29-
</select>
30-
</label>
31-
</div>
32-
<div class="w-1/2 px-6">
33-
<div class="block">
34-
<span class="text-gray-700">Checkboxes</span>
35-
<div class="mt-2">
36-
<div>
37-
<label class="inline-flex items-center">
38-
<input type="checkbox" class="sr-only">
39-
<span class="form-checkbox text-indigo-700" aria-hidden="true"></span>
40-
<span class="ml-2">Option 1</span>
41-
</label>
42-
</div>
43-
<div>
44-
<label class="inline-flex items-center">
45-
<input type="checkbox" class="sr-only">
46-
<span class="form-checkbox text-green-600" aria-hidden="true"></span>
47-
<span class="ml-2">Option 2</span>
48-
</label>
49-
</div>
50-
<div>
51-
<label class="inline-flex items-center">
52-
<input type="checkbox" class="sr-only">
53-
<span class="form-checkbox text-pink-600" aria-hidden="true"></span>
54-
<span class="ml-2">Option 3</span>
55-
</label>
56-
</div>
57-
</div>
13+
<div class="max-w-2xl w-full">
14+
<div class="bg-white rounded p-8 shadow-lg">
15+
<div class="flex -mx-6">
16+
<div class="w-1/2 px-6">
17+
<label class="block">
18+
<span class="text-gray-700">Input</span>
19+
<input type="email" class="mt-1 block w-full form-input" value="john@example.com">
20+
</label>
21+
<label class="block mt-6">
22+
<span class="text-gray-700">Textarea</span>
23+
<textarea class="mt-1 block w-full form-textarea" rows="3">Some longer form content.</textarea>
24+
</label>
25+
<label class="block mt-6">
26+
<span class="text-gray-700">Select</span>
27+
<select class="form-select block w-full mt-1">
28+
<option>Option 1</option>
29+
<option>Option 2</option>
30+
</select>
31+
</label>
5832
</div>
59-
<div class="block mt-6">
60-
<span class="text-gray-700">Radio buttons</span>
61-
<div class="mt-2">
62-
<div>
63-
<label class="inline-flex items-center">
64-
<input type="radio" class="sr-only" name="radio1" value="1">
65-
<span class="form-radio text-indigo-700" aria-hidden="true"></span>
66-
<span class="ml-2">Option 1</span>
67-
</label>
68-
</div>
69-
<div>
70-
<label class="inline-flex items-center">
71-
<input type="radio" class="sr-only" name="radio2" value="2">
72-
<span class="form-radio text-green-600" aria-hidden="true"></span>
73-
<span class="ml-2">Option 2</span>
74-
</label>
33+
<div class="w-1/2 px-6">
34+
<div class="block">
35+
<span class="text-gray-700">Checkboxes</span>
36+
<div class="mt-2">
37+
<div>
38+
<label class="inline-flex items-center">
39+
<input type="checkbox" class="sr-only">
40+
<span class="form-checkbox text-indigo-700" aria-hidden="true"></span>
41+
<span class="ml-2">Option 1</span>
42+
</label>
43+
</div>
44+
<div>
45+
<label class="inline-flex items-center">
46+
<input type="checkbox" class="sr-only">
47+
<span class="form-checkbox text-green-600" aria-hidden="true"></span>
48+
<span class="ml-2">Option 2</span>
49+
</label>
50+
</div>
51+
<div>
52+
<label class="inline-flex items-center">
53+
<input type="checkbox" class="sr-only">
54+
<span class="form-checkbox text-pink-600" aria-hidden="true"></span>
55+
<span class="ml-2">Option 3</span>
56+
</label>
57+
</div>
7558
</div>
76-
<div>
77-
<label class="inline-flex items-center">
78-
<input type="radio" class="sr-only" name="radio3" value="3">
79-
<span class="form-radio text-pink-600" aria-hidden="true"></span>
80-
<span class="ml-2">Option 3</span>
81-
</label>
59+
</div>
60+
<div class="block mt-6">
61+
<span class="text-gray-700">Radio buttons</span>
62+
<div class="mt-2">
63+
<div>
64+
<label class="inline-flex items-center">
65+
<input type="radio" class="sr-only" name="radio1" value="1">
66+
<span class="form-radio text-indigo-700" aria-hidden="true"></span>
67+
<span class="ml-2">Option 1</span>
68+
</label>
69+
</div>
70+
<div>
71+
<label class="inline-flex items-center">
72+
<input type="radio" class="sr-only" name="radio2" value="2">
73+
<span class="form-radio text-green-600" aria-hidden="true"></span>
74+
<span class="ml-2">Option 2</span>
75+
</label>
76+
</div>
77+
<div>
78+
<label class="inline-flex items-center">
79+
<input type="radio" class="sr-only" name="radio3" value="3">
80+
<span class="form-radio text-pink-600" aria-hidden="true"></span>
81+
<span class="ml-2">Option 3</span>
82+
</label>
83+
</div>
8284
</div>
8385
</div>
8486
</div>
8587
</div>
8688
</div>
89+
<div class="text-center mt-4">
90+
<a href="https://github.com/adamwathan/tailwindcss-form-styles" class="text-gray-500 hover:underline font-semibold">View on GitHub</a>
91+
</div>
8792
</div>
8893
</div>
8994
</body>

0 commit comments

Comments
 (0)