Tailwind CSSにフォームプラグインを導入する

記事を書くきっかけ

TailWindを使用してラジオボタンのスタイルを記述しようした際に躓いたので本記事を書きました。

インストール

npm install -D @tailwindcss/forms

※form関係のスタイルを簡単にリセットするプラグインを提供してくれます。

tailwind.config.js

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

require部分を追記する。

これでselect要素やinput要素のデフォルトスタイルをリセットしてくれます。

基本的な使い方

基本的なフォーム要素はユーティリティで簡単に上書き可能なシンプル要素が設定されています。要するにTailWindのユーティリティクラスを簡単に使えますということです。

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

参考文献

さいごに

Reactの学習と並行してTailWindも学習しているのですが、
いまのところTailWindの旨味を実感できない状況です。
（ユーティリティクラスで記述するのにすごく違和感を感じる）
しかし、コンポーネントごとにスタイルを書いていくReactとは相性がいいと思っているので立ち止まらず学習を続けます。

意見コメント等ありましたら気軽にコンタクトしていただけると嬉しいです。