我在我的 tailwind.config.js 文件中添加了新的字体系列。这些可用于 .font-sans 类,但我也想更改全局字体系列。 'tailwindcss/base' 导入在 html, body {} 选择器上添加了一个通用的无衬线系列。
第三步:配置tailwindcss # /www/livewire-tutorial/01/tailwind.config.js中自定义字体luxun,这样在视图文件中 font-luxun const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { theme: { extend: { fontFamily: { sans: ['Inter var', ...defaultTheme.fontFamily.sans], luxun: ...
<p class="font-sanssm:font-serifmd:font-monolg:font-sansxl:font-serif"> <!-- ... --> </p> I'm a paragraph. Customizing Font Families By default Tailwind provides three font family utilities: a cross-browser sans-serif stack, a cross-browser serif stack, and a cross-browser monospa...
按UnoCSS 作者的说法,UnoCSS 并非要替代 Tailwind CSS 而是从另一个角度使原子化CSS在业务中融合的更完美。 UnoCSS 作者是 Vite 团队成员,我觉得正是因为他作为 Vite 的开发者,对于工程化构建具有很高的敏感度,所以才能创造出 UnoCSS 将原子化的CSS与前端工程融合到极致。 那么UnoCSS 做了哪些事呢: 按需生成 ...
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...
tailwindcss 3.3.3(完成入门,需要补充每个单独样式) 归纳 修饰符堆叠 <button class="dark:md:hover:bg-fuchsia-600"> 以下为修饰符 伪类伪元素 使用方法: 在实用程序类前添加hover:bg-sky-700 伪类 hover focus focus-within 用来选择和样式化一个元素或者它的任何后代元素获得焦点的情况...
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 中的特定值,构建后会...
如果您还想为字体大小提供一个默认的字母间距值,您可以在您的tailwind.config.js文件中使用[fontSize, { letterSpacing, lineHeight }]这样的元组来实现。 // tailwind.config.jsmodule.exports={theme:{fontSize:{'2xl':['24px',{letterSpacing:'-0.01em',}],// Or with a default line-height as well'...
By default, Tailwind provides ninefont-weightutilities. You change, add, or remove these by editing thetheme.fontWeightsection of your Tailwind config. tailwind.config.js module.exports={theme:{fontWeight:{thin:'100',hairline:'100',extralight:'200',light:'300',normal:'400',medium:'500',semi...
默认情况下, 针对 font style 功能类,只生成 responsive 变体。 您可以通过修改您的tailwind.config.js文件中的variants部分中的fontStyle属性来控制为font style功能生成哪些变体。 例如,这个配置也将生成hover and focus变体: // tailwind.config.jsmodule.exports={variants:{extend:{// ...+fontStyle:['hover'...