// tailwind.config.jsmodule.exports = {variants:{// ...-fontFamily:['responsive'],+fontFamily:['responsive', 'hover', 'focus'],}} Disabling If you don't plan to use thefont familyutilities in your project, you can disable them entirely by setting thefontFamilypropertytofalsein thecore...
如果您希望应用新定义的 sans font-family (仍然没有覆盖)但使用 Tailwind 作为默认后备,请修改您的脚本,如下所示; // tailwind.config.js const { fontFamily } = require('tailwindcss/defaultTheme') module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts...
Tailwind CSS 使用默认的字体家族堆栈,但与颜色类似,您可以更改这些默认值,以匹配您项目的排版风格。 您可以在tailwind.config.js文件中扩展或替换默认的 Font Family。要添加自定义 Font Family,请使用fontFamily对象中的 extend 属性: // tailwind.config.js module.exports ={ theme:{ extend:{ fontFamily:{ sa...
javascript // tailwind.config.js module.exports = { theme: { extend: { colors: { 'nav-bg': '#34495e', 'nav-text': '#ecf0f1', 'nav-hover': '#2c3e50', }, typography: { 'nav': { 'h1': { 'fontFamily': 'sans-serif', 'fontWeight': '600', 'fontSize': '2xl', 'color...
运行npx tailwind init,生成一个空的tailwind.config.js 在里面tailwind.config.js添加并指定要覆盖的字体系列(Tailwind 的默认系列是)。将新添加的字体系列放在开头(顺序很重要)fontFamilyextendsans module.exports = { theme: { extend: { fontFamily: { 'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-...
如果希望为页面整体添加一些默认的样式,例如字体 font family、标题大小等,可以将这些自定义的样式代码添加到base容器中。 @tailwind base; @tailwind components; @tailwind utilities; @layer base { h1 { font-size: 1.5rem; } h2 { /* 可以在样式表中通过指令 @apply 使用基础类来设置样式 */ @apply ...
tailwind.config = { theme: { fontFamily: { sans: ["Inter", "sans-serif"], serif: ["Inter", "serif"], mono: ["Inter", "monospace"] } } } </script> </head> 字号:text-[size] <div class="text-xs">Text Extra Small</div> <div class="text-sm">Text Small</div> <div class...
我有一个tailwind.config.js文件,如下所示:const colors = require('tailwindcss/colors');const plugin = require('tailwindcss/plugin');module.exports = { mode: 'jit', purge:...
fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. plugins:用于扩展Tailwind的功能,可以添加自定义插件。 plugins: [ // 引入插件 ], 1. 2. 3. 通过这些配置,您可以根据项目需求定制Tailwind CSS,确保它与您的开发环境和设计规范无缝集成。
Install a custom font with @font-face. /** @type {import('tailwindcss').Config} */module.exports={content:["./src/**/*.{html,js}"],theme:{extend:{},},plugins:[require('@stratox/tailwind').config({fontFamily:['Open Sans','Helvetica','Arial','sans-serif'],fontFace:[{'font-...