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 中的特定值,构建后会...
text-9xlfont-size: 8rem; line-height: 1; 用法 使用text-{size}功能类控制元素的字体大小。 xs The quick brown fox jumped over the lazy dog. sm The quick brown fox jumped over the lazy dog. base The quick brown fox jumped over the lazy dog. ...
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...
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 monospaced stack. You can change, add, or remove these by editing thetheme.fontFamilysection of your Tailwind config. ...
<pclass="font-normalmd:font-bold"><!-- ... --></p> To learn more, check out the documentation onResponsive Design,Dark Modeandother media query modifiers. By default, Tailwind provides ninefont-weightutilities. You change, add, or remove these by editing thetheme.fontWeightsection of yo...
Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级“工具”类创建布局 如Bootstrap 等传统 CSS 框架,其使用的类通常与组件直接相关;然而,Tailwind 则采用了不同的方法,它将类作为工具集合,让用户能够自由组合这些工具来构建个性化的自定义组件 ...
tailwindcss 3.3.3(完成入门,需要补充每个单独样式) 归纳 修饰符堆叠 <button class="dark:md:hover:bg-fuchsia-600"> 以下为修饰符 伪类伪元素 使用方法: 在实用程序类前添加hover:bg-sky-700 伪类 hover focus focus-within 用来选择和样式化一个元素或者它的任何后代元素获得焦点的情况...
Once the download is complete, unzip the file and copy the font files into the public/fonts folder in your project. If you don’t have a fonts folder, create one.Next, we need to add the font files to the global.css file:@tailwind base; @tailwind components; @tailwind utilities; @...
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
text-...- use to change font size and text color font-thin- font weight text-gray-900- common for designers to use this gray instead of black to make it easier on users' eyes. space-y-2- vertical spacing utility. Use it to replace multiple common attributes to elements. ...