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

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

為什麼要使用官方 form 套件

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

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

來安裝並使用 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 就有效果了！(我把原本切好的樣式先拿掉，目前是套件的預設效果)

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

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

<input type="email" />

增加樣式後。

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

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

只需要專注在自訂效果

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

最後我把 select 與 checkbox 的欄位加上去，讓表單看起來更完整。

<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>

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

參考資料

• tailwindlabs/tailwindcss-forms