您可以在tailwind.config.js文件中扩展或替换默认的 Font Family。要添加自定义 Font Family,请使用fontFamily对象中的 extend 属性: // tailwind.config.js module.exports ={ theme:{ extend:{ fontFamily:{ sans:['Poppins','sans-serif'], serif:['Merriweather','serif'], mono:['Fira Code','monospace...
如果希望为页面整体添加一些默认的样式,例如字体 font family、标题大小等,可以将这些自定义的样式代码添加到base容器中。 @tailwind base; @tailwind components; @tailwind utilities; @layer base { h1 { font-size: 1.5rem; } h2 { /* 可以在样式表中通过指令 @apply 使用基础类来设置样式 */ @apply ...
-- font family --><pclass="font-sans text-3xl">This is sample of font family sans.</p><pclass="font-serif text-3xl">This is sample of font family serif.</p><pclass="font-mono text-3xl">This is sample of font family mono.</p></div> Font Size 用于设置元素的字体大小 Utilities...
字体:font-[family] <div class="font-sans">Font Sans</div> <div class="font-serif">Font Serif</div> <div class="font-mono">Font Mono</div> 自定义字体族配置 <head> <!-- ... -->> <script> tailwind.config = { theme: { fontFamily: { sans: ["Inter", "sans-serif"], serif...
假设您只想将“Segoe UI”与 Roboto 和 sans-serif 一起使用,因为 sans font-family 以相同的顺序应用于您的 HTML 元素,没有覆盖,请使用下面的代码段; // tailwind.config.js const { fontFamily } = require('tailwindcss/defaultTheme') module.exports = { content: [ './pages/**/*.{js,ts,jsx,...
字体集合(font family) Tailwind默认采用三种网络安全的字体集合,分别是sans、serif、mono 字号大小(font size) Tailwind使用text-{size}工具类设置CSS中的font-size属性,字体大小采用rem作为相对长度单位。 rem是指相对于根元素<html>的font-size计算值的大小,可简单理解为屏幕宽度的百分比。
您可以使用相同的方式为您正在使用的任何自定义字体添加@font-face规则。 @tailwindbase;@tailwindcomponents;@tailwindutilities;@layerbase{@font-face{font-family:Proxima Nova;font-weight:400;src:url(/fonts/proxima-nova/400-regular.woff)format("woff");}@font-face{font-family:Proxima Nova;font-weight:...
.font-sansfont-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; .font-seriffont-family: Georgia, Cambria, "Times New Roman",...
</p><p>tailwind.config.js中添加引用:</p><p><b>const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { theme: { extend: { fontFamily: { // 添加字体 sans: ['Inter var', ...defaultTheme.fontFamily.sans],
fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. plugins:用于扩展Tailwind的功能,可以添加自定义插件。 plugins: [ // 引入插件 ], 1. 2. 3. 通过这些配置,您可以根据项目需求定制Tailwind CSS,确保它与您的开发环境和设计规范无缝集成。