0%

TailwindCSS 筆記 - 價目表卡片實戰 - 使用官方套件實作登入表單

login

這次使用官方 form 套件來完成登入表單實作。

為什麼要使用官方 form 套件

雖然可以透過 TailwindCSS 高客製化的特性來完成樣式,但還是有點限制,像是下拉選單。

可以看見下拉選單右側的下拉圖標很貼近邊框,而且這個很難修正,並且樣式就算可以客製,也是需要花點時間。

來安裝並使用 form 的官方套件

官方提供 form 的套件,並且很貼心的也好很多樣式,可以看 demo

安裝 form 套件

使用 npm 安裝

1
npm install @tailwindcss/forms

安裝完畢後再配置檔的 plugins 加入這行。

1
require('@tailwindcss/forms'),

tailwind.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
mode: "jit",
purge: ["./**/*.html", "./src/**/*.css", "./js/**/*.js"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require("@tailwindcss/forms"), //加在這裡
],
};

這樣 input 就有效果了!(我把原本切好的樣式先拿掉,目前是套件的預設效果)

origin

再來我把我想要的樣式加上去。

目前沒有加任何樣式的 input,以其中一個為例。

1
<input type="email" />

增加樣式後。

1
2
3
4
<input
type="password"
class="focus:ring-purple-400 focus:border-purple-400 w-full p-2 rounded-md"
/>

after

最後再把寫好的樣式也複製一個到其他 input 就可以了!

只需要專注在自訂效果

因為 form 套件已經把基本的樣式寫好,所以只要專注在其他像 focus 或是 active 以及其他想要客製的類別即可。

最後我把 selectcheckbox 的欄位加上去,讓表單看起來更完整。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<p class="mb-2">電子信箱</p>
<input
type="email"
class="focus:ring-purple-400 focus:border-purple-400 w-full p-2 rounded-md"
/>
<p class="mt-4 mb-2">密碼</p>
<input
type="password"
class="focus:ring-purple-400 focus:border-purple-400 w-full p-2 rounded-md"
/>
<a href="javascript:void(0)" class="block mt-2 text-blue-400">忘記密碼</a>

<div class="mt-4">
<select
class="focus:ring-purple-400 focus:border-purple-400 w-full p-2 rounded-md"
>
<option value="">---請選擇語言---</option>
<option value="1">繁體中文</option>
<option value="2">English</option>
</select>
</div>
<div class="mt-4 flex items-center">
<input
class="mr-2 focus:ring-purple-400 text-purple-400"
type="checkbox"
name="checkbox"
id=""
/>
<label for="checkbox">記住密碼</label>
</div>

final

本次實作程式碼:https://github.com/hsuchihting/tailwindcss

參考資料