您可以在您的tailwind.config.js文件中使用[fontSize, lineHeight]形式的元组为您的每个字体大小提供一个默认的行高。 // tailwind.config.jsmodule.exports={theme:{fontSize:{sm:['14px','20px'],base:['16px','24px'],lg:['20px','28px'],xl:['24px','32px'],}}} ...
Font Sizes By default, Tailwind provides 10font-sizeutilities. You change, add, or remove these by editing thetheme.fontSizesection of your Tailwind config. // tailwind.config.jsmodule.exports={theme:{fontSize:{-'xs':'.75rem',-'sm':'.875rem',+'tiny':'.875rem','base':'1rem','lg...
// Tailwind's default thememodule.exports = { theme: {// ... fontSize: { xs: ['0.75rem',{ lineHeight: '1rem'}], sm: ['0.875rem',{ lineHeight: '1.25rem'}], base: ['1rem',{ lineHeight: '1.5rem'}], lg: ['1.125rem',{ lineHeight: '1.75rem'}]...
看看效果,给文字设置font size为22px; TailwindCSS 设置文字大小 总结 tailwindcss 是非常灵活的css框架,我们可以通过自定义config文件来定制属于我们自己项目的个性配置。后续会详细解析 tailwindcss.config 支持的配置项,让我们的项目样式变得更灵活和易于维护。
Transform your design workflow and save a ton of time with the Tailwind Font Size Generator plugin for Figma! This intuitive plugin allows you to seamlessly generate font sizes and font styles using the default Tailwind CSS font scale, ensuring your desi
font-size: 2rem; } } @layer components { btn-blue { @apply bg-blue-500 px-4 py-2 rounded-xl font-bold hover:bg-blue-700; } } @config:用于指定 Tailwind 在编译该 CSS 文件时应使用的配置文件 @config "./tailwind.input.config.js"; b. 函数 函数用于访问 Tailwind 中的特定值,构建后会...
font-size:1rem; color:#6b7280; } 在Tailwind CSS 中,同样的设计可以直接使用实用类实现: <divclass="p-4 bg-gray-100 rounded-lg"> <h2class="text-xl font-bold mb-2">Hello, World!</h2> <pclass="text-gray-600">前端充电宝</p> ...
// tailwind.config.jsconstplugin=require('tailwindcss/plugin')module.exports={plugins:[plugin(function({addBase,config}){addBase({'h1':{fontSize:config('theme.fontSize.2xl')},'h2':{fontSize:config('theme.fontSize.xl')},'h3':{fontSize:config('theme.fontSize.lg')},})})]} ...
theme}) => { matchUtilities({ fsize: (value) => ({ fontSize: value }) ...