改变Tailwind组件中的字体系列的方法-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

改变Tailwind组件中的字体系列的方法

P粉037215587 2023-09-14 20:18:29

[CSS3讨论组]

720

我有一个选择组件，我想设置一个自定义字体，就像另一个输入框一样

<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

P粉037215587

全部回复(1)

P粉3478048962023-09-15 00:51:58 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>