iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

TailwindCSS - 從零開始系列 第 26

TailwindCSS 從零開始 - 價目表卡片實戰 - 使用官方套件實作登入表單

login

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

為什麼要使用官方 form 套件

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

demo: https://codepen.io/hnzxewqw/pen/jOwyKZo

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

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

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

安裝 form 套件

使用 npm 安裝

npm install @tailwindcss/forms

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

 require('@tailwindcss/forms'),

tailwind.config.js

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,以其中一個為例。

 <input type="email" />

增加樣式後。

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

after

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

只需要專注在自訂效果

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

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

<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

參考資料


上一篇
TailwindCSS - 價目表卡片實戰 - 登入彈窗開發
下一篇
TailwindCSS 從零開始 - 翻轉卡片實戰:TailwindCSS feat CSS
系列文
TailwindCSS - 從零開始30

尚未有邦友留言

立即登入留言