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

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

表单 Forms

  1. 使用 npm 安装 Forms 外挂。
npm install @tailwindcss/forms
  1. 到设定档 tailwind.js.config 新增外挂。
// tailwind.config.js

module.exports = {
  theme: {
    ...
  },
  ...
  plugins: [
    require('@tailwindcss/forms'),
    ...
  ],
}
  1. 好了~现在所用的基础表单元素都有一些简单的默认样式,直接照着 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>

https://ithelp.ithome.com.tw/upload/images/20210924/20141250LtcAbXw0jv.png

当当~是不是简单粗暴,当然你还是可以继续使用各式各样的 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>

https://ithelp.ithome.com.tw/upload/images/20210924/2014125098WXZH7qR7.png

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

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

Base Class
[type='text'] form-input
[type='email'] form-input
[type='url'] form-input
[type='password'] form-input
[type='number'] form-input
[type='date'] form-input
[type='datetime-local'] form-input
[type='month'] form-input
[type='search'] form-input
[type='tel'] form-input
[type='time'] form-input
[type='week'] form-input
textarea form-textarea
select form-select
select[multiple] form-multiselect
[type='checkbox'] form-checkbox
[type='radio'] form-radio

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>

https://ithelp.ithome.com.tw/upload/images/20210924/201412503aaobZOK5c.png

focus

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

https://ithelp.ithome.com.tw/upload/images/20210924/20141250ojXyCxeVM2.png

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

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

https://ithelp.ithome.com.tw/upload/images/20210924/20141250uzU92XU2ar.png

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


<<:  [DAY 11] _软件实现I2C协议以三轴感测器为例 (ADXL345)

>>:  Day 9 k8s event收集-eventrouter

LeetCode解题 Day30

698. Partition to K Equal Sum Subsets https://leet...

用React刻自己的投资Dashboard Day7 - CORS与Proxy Server

tags: 2021铁人赛 React 上一篇在串接API的时候有遇到一个前端蛮常见的问题,跨来源资...

Day36 - 「登愣登愣,登愣登登登」~ 隐挑战 Day12 ─ 果然我的青春写扣喜剧搞错了。完

重复是学习之母。继续写是完赛之母。 继续写是完赛之母XDDDDDDDDDDD 这会不会太符合我现况...

Day16 - 汇出 excel-应用篇

前言 不论是产各式报表,都与 Excel 脱离不了关系,产 Excel 属於必备技能之一,以下示范如...

卡夫卡的藏书阁【Book17】- Kafka - KafkaJS 生产者 - 5

“He is terribly afraid of dying because he hasn’t...