tailwindcss forms

@tailwindcss/表格

該外掛程式提供表單樣式的基本重置，使表單元素易於使用實用程式覆蓋。

安裝

從 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

每個元素都已標準化/重置為簡單的視覺一致樣式，易於使用實用程式進行自定義，甚至像<select>或<input type="checkbox">這樣通常需要使用appearance: none並使用自訂進行自訂CSS：

 <!-- 現在您實際上可以在選擇元素上自訂填充： --><select class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- 或使用文字顏色實用程式變更複選框顏色：--><input type="checkbox" class="rounded text-pink-500" />

更多客製化範例和最佳實踐即將推出。

使用類別來設計樣式

除了全域樣式之外，我們還會產生一組對應的類，可用於將表單樣式明確套用至元素。這在您需要使非表單元素（例如<div> ）看起來像表單元素的情況下非常有用。

 <input type="email" class="form-input rounded-full px-4 py-3" /><select class="form-select rounded-full px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox rounded 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選項將外掛程式限制為僅使用其中一種方法。

 // tailwind.config.jsplugins: [
  require("@tailwindcss/forms")({strategy: 'base', // 只產生全域樣式strategy: 'class', // 只產生類
  }),],

使用base策略時，表單元素會全域設定樣式，且不會產生form-{name}類別。

使用class策略時，表單元素不會全域設定樣式，而必須使用產生的form-{name}類別來設定樣式。