tailwindcss forms
v0.5.9
フォーム要素をユーティリティで簡単にオーバーライドできるようにする、フォーム スタイルの基本的なリセットを提供するプラグイン。
npm からプラグインをインストールします。
npm install -D @tailwindcss/forms
次に、プラグインをtailwind.config.jsファイルに追加します。
// tailwind.config.jsmodule.exports = {
テーマ： {// ...
}、
プラグイン: [require('@tailwindcss/forms'),// ...
],}ライブデモを見る
使用するすべての基本的なフォーム要素には、ユーティリティで簡単にオーバーライドできるいくつかの単純なデフォルト スタイルが含まれるようになります。
現在、次のフォーム要素タイプに対して、ユーティリティに適した基本的なフォーム スタイルを追加しています。
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
すべての要素は、ユーティリティを使用して簡単にカスタマイズできる、シンプルな視覚的に一貫したスタイルに正規化/リセットされています。通常はappearance: noneでリセットする必要がある<select>や<input type="checkbox">などの要素も含め、カスタムを使用してカスタマイズされています。 CSS:
<!-- 実際に選択要素のパディングをカスタマイズできるようになりました: --><select class="rounded-full px-4 py-3"> <!-- ... --></select><!-- または、テキスト カラー ユーティリティを使用してチェックボックスの色を変更します: --><input type="checkbox" class="rounded text-pink-500" />
さらに多くのカスタマイズ例とベスト プラクティスが近々公開される予定です。
グローバル スタイルに加えて、フォーム スタイルを要素に明示的に適用するために使用できる、対応するクラスのセットも生成します。これは、 <div>などの非フォーム要素をフォーム要素のように見せる必要がある状況で役立ちます。
<input type="email" class="form-inputrounded-full px-4 py-3" /><select class="form-selectrounded-full px-4 py-3"> <!-- ... --></select><input type="checkbox" class="form-checkboxrounded text-pink-500" />
参照用に提供されているform-*クラスの完全な表を次に示します。
| ベース | クラス |
|---|---|
[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 |
このプラグインをフォーム コンポーネント スタイルのコレクションではなく「フォーム リセット」として考えることをお勧めしますが、場合によっては、特にこのプラグインを既存のプロジェクトに統合する場合、デフォルトのアプローチが強引すぎる可能性があります。
グローバル (ベース) スタイルとクラスの両方の生成がプロジェクトでうまく機能しない場合は、 strategyオプションを使用して、プラグインをこれらのアプローチの 1 つだけに制限できます。
// tailwind.config.jsplugins: [
require("@tailwindcss/forms")({strategy: 'base', // グローバル スタイルのみを生成しますstrategy: 'class', // クラスのみを生成します
})、]、 base戦略を使用する場合、フォーム要素はグローバルにスタイル設定され、 form-{name}クラスは生成されません。
class戦略を使用する場合、フォーム要素はグローバルにスタイル設定されず、代わりに生成されたform-{name}クラスを使用してスタイル設定する必要があります。
