改變Tailwind元件中的字體系列的方法

Question

我有一個選擇元件，我想設定一個自訂字體，就像另一個輸入框一樣

<select data-te-select-init data-te-select-font="14">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>3

Answer 1

考慮使用選項classes來為選擇元素套用自訂類別。這樣可以使用字體系列實用類別來套用所需的font-family。

例如，我們可以透過使用data-te-class-form-outline屬性將mono font-family套用到formOutline元素，如下圖所示：

tailwind.config = {
  darkMode: "class"
  corePlugins: {
    preflight: false,
  },
};

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/tw-elements.min.css" />
<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<select data-te-select-init data-te-select-font="14" data-te-class-form-outline="relative font-mono">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>3

<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>