Skip to content

Commit 0fee22e

Browse files
adamwathanadamwathan
committed
Init
0 parents  commit 0fee22e

File tree

8 files changed

+460
-0
lines changed

8 files changed

+460
-0
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
yarn.lock
3+
package-lock.json

‎README.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# @tailwindcss/forms
2+
3+
A plugin that provides basic default form styles that are easy to override with utilities. Hopefully the successor to `@tailwindcss/custom-forms`.
4+
5+
6+
## Installation
7+
8+
Install the plugin from npm:
9+
10+
```sh
11+
# Using npm
12+
npm install @tailwindcss/forms
13+
14+
# Using Yarn
15+
yarn add @tailwindcss/forms
16+
```
17+
18+
Then add the plugin to your `tailwind.config.js` file:
19+
20+
```js
21+
// tailwind.config.js
22+
module.exports = {
23+
theme: {
24+
// ...
25+
},
26+
plugins: [
27+
require('@tailwindcss/forms'),
28+
// ...
29+
],
30+
}
31+
```
32+
33+
## Usage
34+
35+
All of the basic form elements you use will now have some sensible default styles that are easy to override with utilities. Works basically like the `@tailwindcss/custom-forms` plugin in terms of how you modify things using utility classes. More details eventually.

‎demo.html

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>@tailwindcss/forms Kitchen Sink</title>
6+
7+
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@next/dist/base.min.css" />
8+
<link rel="stylesheet" href="/dist/forms.min.css" />
9+
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@next/dist/components.min.css" />
10+
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@next/dist/utilities.min.css" />
11+
</head>
12+
<body>
13+
<div class="antialiased text-gray-900 px-6">
14+
<div class="max-w-2xl mx-auto py-12">
15+
<div class="flex flex-wrap -mx-6">
16+
<div class="w-1/2 px-6">
17+
<label class="block">
18+
<span class="text-gray-700">Input (no type)</span>
19+
<input class="mt-1 block w-full" placeholder="[email protected]" />
20+
</label>
21+
<label class="block mt-4">
22+
<span class="text-gray-700">Input (text)</span>
23+
<input type="text" class="mt-1 block w-full" placeholder="[email protected]" />
24+
</label>
25+
<label class="block mt-4">
26+
<span class="text-gray-700">Input (email)</span>
27+
<input
28+
type="email"
29+
class="mt-1 block w-full rounded-none border-0 border-b focus:ring-0 focus:border-black"
30+
placeholder="[email protected]"
31+
/>
32+
</label>
33+
<label class="block mt-4">
34+
<span class="text-gray-700">Input (range)</span>
35+
<input type="range" class="mt-1 block w-full" />
36+
</label>
37+
<label class="block mt-4">
38+
<span class="text-gray-700">Input (date)</span>
39+
<input type="date" class="mt-1 block w-full" />
40+
</label>
41+
<label class="block mt-4">
42+
<span class="text-gray-700">Input (datetime-local)</span>
43+
<input type="datetime-local" class="mt-1 block w-full" />
44+
</label>
45+
<label class="block mt-4">
46+
<span class="text-gray-700">Input (month)</span>
47+
<input type="month" class="mt-1 block w-full" />
48+
</label>
49+
<label class="block mt-4">
50+
<span class="text-gray-700">Input (number)</span>
51+
<input type="number" class="mt-1 block w-full" />
52+
</label>
53+
<label class="block mt-4">
54+
<span class="text-gray-700">Input (search)</span>
55+
<input type="search" class="mt-1 block w-full" />
56+
</label>
57+
<label class="block mt-4">
58+
<span class="text-gray-700">Input (time)</span>
59+
<input type="time" class="mt-1 block w-full" />
60+
</label>
61+
<label class="block mt-4">
62+
<span class="text-gray-700">Input (week)</span>
63+
<input type="week" class="mt-1 block w-full" />
64+
</label>
65+
<label class="block mt-4">
66+
<span class="text-gray-700">Input (email, multiple)</span>
67+
<input
68+
type="email"
69+
multiple
70+
class="mt-1 block w-full"
71+
placeholder="[email protected]"
72+
/>
73+
</label>
74+
<label class="block mt-4">
75+
<span class="text-gray-700">Input (file)</span>
76+
<input type="file" class="mt-1 block w-full" />
77+
</label>
78+
<label class="block mt-4">
79+
<span class="text-gray-700">Input (file)</span>
80+
<input type="file" multiple class="mt-1 block w-full" />
81+
</label>
82+
<label class="block mt-4">
83+
<span class="text-gray-700">Textarea</span>
84+
<textarea
85+
class="mt-1 block w-full h-24"
86+
rows="3"
87+
placeholder="Enter some long form content."
88+
>
89+
</textarea>
90+
</label>
91+
<div class="block mt-4">
92+
<span class="text-gray-700">Checkboxes</span>
93+
<div class="mt-2">
94+
<div>
95+
<label class="inline-flex items-center">
96+
<input type="checkbox" checked />
97+
<span class="ml-2">Option 1</span>
98+
</label>
99+
</div>
100+
<div>
101+
<label class="inline-flex items-center">
102+
<input type="checkbox" />
103+
<span class="ml-2">Option 2</span>
104+
</label>
105+
</div>
106+
<div>
107+
<label class="inline-flex items-center">
108+
<input type="checkbox" />
109+
<span class="ml-2">Option 3</span>
110+
</label>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
<div class="w-1/2 px-2">
116+
<label class="block">
117+
<span class="text-gray-700">Select</span>
118+
<select class="block w-full mt-1">
119+
<option>Option 1</option>
120+
<option>Option 2</option>
121+
</select>
122+
</label>
123+
<label class="block mt-4">
124+
<span class="text-gray-700">Multiselect</span>
125+
<select class="block w-full h-24 mt-1" multiple="">
126+
<option>Option 1</option>
127+
<option>Option 2</option>
128+
<option>Option 3</option>
129+
<option>Option 4</option>
130+
<option>Option 5</option>
131+
</select>
132+
</label>
133+
<div class="block mt-4">
134+
<span class="text-gray-700">Radio Buttons</span>
135+
<div class="mt-2">
136+
<div>
137+
<label class="inline-flex items-center">
138+
<input type="radio" checked name="radio-direct" value="1" />
139+
<span class="ml-2">Option 1</span>
140+
</label>
141+
</div>
142+
<div>
143+
<label class="inline-flex items-center">
144+
<input type="radio" name="radio-direct" value="2" />
145+
<span class="ml-2">Option 2</span>
146+
</label>
147+
</div>
148+
<div>
149+
<label class="inline-flex items-center">
150+
<input type="radio" name="radio-direct" value="3" />
151+
<span class="ml-2">Option 3</span>
152+
</label>
153+
</div>
154+
</div>
155+
</div>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
</body>
161+
</html>

‎dist/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*
2+
!.gitignore
3+
!.npmignore

‎dist/.npmignore

Whitespace-only changes.

‎package.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "@tailwindcss/forms",
3+
"version": "0.1.0",
4+
"main": "src/index.js",
5+
"license": "MIT",
6+
"repository": "https://github.com/tailwindlabs/tailwindcss-forms",
7+
"publishConfig": {
8+
"access": "public"
9+
},
10+
"prettier": {
11+
"printWidth": 100,
12+
"semi": false,
13+
"singleQuote": true,
14+
"trailingComma": "es5"
15+
},
16+
"scripts": {
17+
"prepublishOnly": "node scripts/build.js"
18+
},
19+
"devDependencies": {
20+
"autoprefixer": "^9.6.1",
21+
"clean-css": "^4.2.1",
22+
"postcss": "^7.0.17",
23+
"tailwindcss": "^2.0.0-alpha.14"
24+
},
25+
"dependencies": {
26+
"mini-svg-data-uri": "^1.2.3"
27+
}
28+
}

‎scripts/build.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const fs = require('fs')
2+
const postcss = require('postcss')
3+
const tailwind = require('tailwindcss')
4+
const CleanCSS = require('clean-css')
5+
6+
function buildDistFile(filename) {
7+
return postcss([
8+
tailwind({
9+
corePlugins: [],
10+
plugins: [require('../src/index.js')],
11+
}),
12+
require('autoprefixer'),
13+
])
14+
.process('@tailwind base', {
15+
from: null,
16+
to: `./dist/${filename}.css`,
17+
map: false,
18+
})
19+
.then((result) => {
20+
fs.writeFileSync(`./dist/${filename}.css`, result.css)
21+
return result
22+
})
23+
.then((result) => {
24+
const minified = new CleanCSS().minify(result.css)
25+
fs.writeFileSync(`./dist/${filename}.min.css`, minified.styles)
26+
})
27+
.catch((error) => {
28+
console.log(error)
29+
})
30+
}
31+
32+
console.info('Building CSS...')
33+
34+
Promise.all([buildDistFile('forms')]).then(() => {
35+
console.log('Finished building CSS.')
36+
})

0 commit comments

Comments
 (0)