XENEXE

Tailwind CSS でフォームをカスタマイズする


heroImage

1. はじめに

Tailwind CSS でフォームをカスタマイズする場合,input タグや select タグ,textarea タグなどのフォーム部品を直接カスタマイズすることも出来ますが,公式のプラグイン (tailwindcss-formstailwindcss-custom-forms) が公開されているので,プラグインを用いてカスタマイズする方法がオススメです。

tailwindcss-custom-forms は,フォーム要素にクラス名を記述する必要がありますが,tailwindcss-forms は,自動的にフォーム要素をカスタマイズしてくれます。また,Awesome Tailwind CSS でも,tailwindcss-custom-forms は非推奨に分類されているので,本記事では tailwindcss-forms を用いてフォームをカスタマイズする手順を記述します。

以降の章で行っている作業は,以下の環境下で実行したものです。また,npm や npx はインストール済みの前提で記述しており,インストール手順は割愛していることをご了承ください。

2. 環境構築

(1) 動作確認用の index.html を生成します
 (2) 初期化処理を行い package.json を生成します
 (3) Tailwind CSStailwindcss-forms をインストールします
 (4) Tailwind CSS の設定ファイルである tailwind.config.js を生成します

Terminal window
1
$ touch index.html ・・・ (1)
2
$ npm init -y ・・・ (2)
3
$ npm install tailwindcss@latest @tailwindcss/forms ・・・ (3)
4
$ npx tailwindcss-cli@latest init ・・・ (4)
5
$ ls
6
index.html node_modules package-lock.json
7
package.json tailwind.config.js

上記で生成した index.htmltailwind.config.js を,それぞれ以下のように書き換えます。

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.0" />
6
<title>Tailwind CSS Forms</title>
7
<link href="tailwind.css" rel="stylesheet" />
8
</head>
9
10
<body>
11
<form class="m-16 grid grid-cols-1 gap-6">
12
<label class="block">
13
<span class="text-gray-700">Full name</span>
14
<input
15
type="text"
16
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
17
placeholder=""
18
/>
19
</label>
20
<label class="block">
21
<span class="text-gray-700">Email address</span>
22
<input
23
type="email"
24
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
25
placeholder="john@example.com"
26
/>
27
</label>
28
<label class="block">
29
<span class="text-gray-700">When is your event?</span>
30
<input
31
type="date"
32
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
33
/>
34
</label>
35
<label class="block">
36
<span class="text-gray-700">What type of event is it?</span>
37
<select
38
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
39
>
40
<option>Corporate event</option>
41
<option>Wedding</option>
42
<option>Birthday</option>
43
<option>Other</option>
44
</select>
45
</label>
46
<label class="block">
47
<span class="text-gray-700">Additional details</span>
48
<textarea
49
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
50
rows="3"
51
></textarea>
52
</label>
53
<div class="block">
54
<div class="mt-2">
55
<div>
56
<label class="inline-flex items-center">
57
<input
58
type="checkbox"
59
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
60
checked=""
61
/>
62
<span class="ml-2">Email me news and special offers</span>
63
</label>
64
</div>
65
</div>
66
</div>
67
</form>
68
</body>
69
</html>
1
module.exports = {
2
purge: [],
3
darkMode: false, // or 'media' or 'class'
4
theme: {
5
extend: {},
6
},
7
variants: {
8
extend: {},
9
},
10
plugins: [require('@tailwindcss/forms')],
11
}

最後に,ビルド処理を行い,tailwind.css が正常に生成されれば環境構築は完了です。

Terminal window
1
$ npx tailwindcss-cli@latest build -o tailwind.css
2
3
tailwindcss 2.0.2
4
5
🚀 Building from default CSS... (No input file provided)
6
7
Finished in 3.58 s
8
📦 Size: 3.75MB
9
💾 Saved to tailwind.css
10
11
$ ls
12
index.html node_modules package-lock.json
13
package.json tailwind.config.js tailwind.css

3. 動作確認

上記で生成した index.html を任意のブラウザで開き,以下のようにフォームがカスタマイズされていれば正常に動作しています。この他にも,様々なカスタマイズをすることが出来ます。詳しくは,tailwindcss-forms の README.mdライブデモを参照して下さい。

4. おわりに

ここまで,Tailwind CSS の公式プラグインである tailwindcss-forms を用いて,フォームをカスタマイズする手順について記述してきました。公式のプラグイン以外にも,有志の方々が開発,公開しているプラグインも存在するので,自分に合ったものを見つけて使ってみて下さい。