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

Commit 47c8d5f

Browse files
adamwathanadamwathan
committed
Add basic input, textarea, select, checkbox, and radio styles
0 parents  commit 47c8d5f

File tree

11 files changed

+297
-0
lines changed

11 files changed

+297
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
public/build
3+
yarn.lock

‎.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["bradlc.vscode-tailwindcss"]
3+
}

‎README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Tailwind CSS Playground
2+
3+
A simple starter project for playing around with Tailwind in a proper PostCSS environment.
4+
5+
To get started:
6+
7+
1. Clone the repository:
8+
9+
```bash
10+
git clone https://github.com/tailwindcss/playground.git tailwindcss-playground
11+
12+
cd tailwindcss-playground
13+
```
14+
15+
2. Install the dependencies:
16+
17+
```bash
18+
# Using npm
19+
npm install
20+
21+
# Using Yarn
22+
yarn
23+
```
24+
25+
3. Start the development server:
26+
27+
```bash
28+
# Using npm
29+
npm run serve
30+
31+
# Using Yarn
32+
yarn run serve
33+
```
34+
35+
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.

‎package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"scripts": {
3+
"serve": "cross-env NODE_ENV=development concurrently \"postcss public/tailwind.css -o public/build/tailwind.css --watch\" \"live-server ./public\"",
4+
"development": "cross-env NODE_ENV=development postcss public/tailwind.css -o public/build/tailwind.css",
5+
"production": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/build/tailwind.css"
6+
},
7+
"dependencies": {
8+
"autoprefixer": "^9.5.1",
9+
"tailwindcss": "^1.0"
10+
},
11+
"devDependencies": {
12+
"@fullhuman/postcss-purgecss": "^1.2.0",
13+
"concurrently": "^4.1.0",
14+
"cross-env": "^5.2.0",
15+
"cssnano": "^4.1.10",
16+
"live-server": "^1.2.1",
17+
"postcss-cli": "^6.1.2"
18+
}
19+
}

‎postcss.config.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const purgecss = require('@fullhuman/postcss-purgecss')({
2+
content: ['./public/**/*.html'],
3+
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
4+
})
5+
6+
module.exports = {
7+
plugins: [
8+
require('tailwindcss'),
9+
require('autoprefixer'),
10+
...process.env.NODE_ENV === 'production'
11+
? [purgecss, require('cssnano')]
12+
: []
13+
]
14+
}

‎public/favicon-16x16.png‎

1 KB
Loading

‎public/favicon-32x32.png‎

1.26 KB
Loading

‎public/favicon.ico‎

14.7 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
7+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
8+
<link rel="stylesheet" href="/build/tailwind.css">
9+
<title>Welcome to Tailwind!</title>
10+
</head>
11+
<body class="antialiased text-gray-900">
12+
<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>
58+
</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>
75+
</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>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
</body>
90+
</html>

‎public/tailwind.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

0 commit comments

Comments
 (0)