點燈坊

失くすものさえない今が強くなるチャンスよ

實作 TextBox

Sam Xiao's Avatar 2021-04-02

Tailwind CSS 可對 <input type="text"> 加以 Style 而更加美觀。

Version

Tailwind CSS 2.0.3

TextBox

simple000

簡單 TextBox 但有 Tailwind 加以 style。

<template>
  <input type="text" class="border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
</template>

設定 TextBox style：

  • border-gray-300：設定 border 顏色
  • rounded-md：設定圓角
  • shadow-sm：設定輕微 shadow
  • focus:ring-indigo-500：設定 focus 時 ring 顏色
  • focus:border-indigo-500：設定 focus 時 border 顏色

@tailwindcss/form Plugin

$ yarn add --dev @tailwindcss/forms

TextBox 需搭配 @tailwindcss/forms plugin，使用 Yarn 安裝。

tailwind.config.js

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

10 行

plugins: [
  require('@tailwindcss/forms'),
]

設定使用 @tailwindcss/forms plugin。

Conclusion

  • TextBox 需搭配 @tailwindcss/forms plugin，如此可減少 utility 使用量

# TailwindCSS