Day 24 - Tailwind Plugin 使用 (三) => Forms

最後一个 Plugin 就是我们经常会使用到的表单，因为样式都被清除了，必须全部重写，如果我们使用前面所讲的 @apply 来设定成 Base，不是不行，只是又会把 CSS 养得肥肥的，所以 Tailwind 又帮我们把基础写好啦，直接取用就好，那我们来看看怎麽用吧。

表单 Forms

1. 使用 npm 安装 Forms 外挂。

npm install @tailwindcss/forms

2. 到设定档 tailwind.js.config 新增外挂。

// tailwind.config.js

module.exports = {
  theme: {
    ...
  },
  ...
  plugins: [
    require('@tailwindcss/forms'),
    ...
  ],
}

3. 好了～现在所用的基础表单元素都有一些简单的默认样式，直接照着 HTML 表单写法就可以了，如：input[type='text']、input[type='password']、input[type='email']、textarea 等。威尔猪做一个对照图给大家看，我们用一样的原始码当范例，如下：

<label>
  <span>Text</span>
  <input type="text" class="w-full border">
</label>
<label>
  <span>Textarea</span>
  <textarea class="w-full border" rows="3"></textarea>
</label>
<label class="inline-flex items-center">
  <input type="checkbox" checked>
  <span class="ml-2">Checkbox</span>
</label>

当当～是不是简单粗暴，当然你还是可以继续使用各式各样的 Tailwind Utilities 去修改成专案需要的样式。

但是官方说这插件是属於 暴力表单重置，而不是表单组件样式的集合，所以有时候并不全部适用於开发中的专案，我们应该将表单样式选择性加入而不是全局应用，这时候我们就必须到 tailwind.config.js，去修改我们挂载的 Forms Plugin，范例如下：

// tailwind.config.js

module.exports = {
  theme: {
    ...
  },
  ...
  plugins: [
    require("@tailwindcss/forms")({ 
       strategy : 'class', 
    }), 
    ...
  ],
}

这时表单元素就会默认不接收任何重置样式，如果要重置该元素，使用方式为：form-{表单项目}，这样 Tailwind 才会将该元素添加重置样式，比较范例如下：

<label>
  <span>Text</span>
  <input type="text" class="form-input w-full border">
</label>
<label>
  <span>Text</span>
  <input type="text" class="w-full border">
</label>

这样用个别引入重置的方式就不会破坏专案进行中的其他表单元素。

下表为 form-{表单项目} 完整表格以供看倌们参考：

Placeholder

那既然讲到表单，肯定会有 placeholder，而修改 placeholder 颜色，只要使用 placeholder-{color} 就可以了，如果觉得颜色太深，除了调整明度数值之外，还可以使用不透明度来调整，如：placeholder-opacity-{百分比}，范例如下：

<label>
  <span>Text</span>
  <input type="text" class="w-full border placeholder-gray-900 placeholder-opacity-20" placeholder="Full Name">
</label>

focus

正常我们要填入表单时，都会有外框颜色变化，让使用者知道我们目前输入哪个栏位，Tailwind Forms Plugin 也会预设蓝边框，如下图：

那我们该如何修改成我们需要的颜色，有看前面篇幅的你应该马上就知道了，没错，我们必须修改 Border 和 Outline，威尔猪将它改成黄色，范例如下：

<label>
  <span>Text</span>
  <input type="text" class="w-full border placeholder-gray-900 placeholder-opacity-20 focus:border-yellow-500 focus:ring focus:ring-yellow-200/50" placeholder="Full Name">
</label>

以上是 Tailwind 的 4 种 Plugins，是不是简单又实用。今天威尔猪介绍就到此就结束啦，看倌们有感觉解决了很多麻烦事吗？咱们明天见。