TailwindCSS 从零开始 - 价目表卡片实战 - 使用官方套件实作登入表单

这次使用官方 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 就有效果了！(我把原本切好的样式先拿掉，目前是套件的预设效果)

再来我把我想要的样式加上去。

目前没有加任何样式的 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