<pclass="font-semibold...">The quick brown fox ...</p> <pclass="font-bold...">The quick brown fox ...</p> Using a custom value Use thefont-[<value>]syntaxto set thefont weightbased on a completely custom value: For CSS variables, you can also use thefont-(<custom-property>...
italic 即 font-style: italic; font-thin 即 font-weight: 100; font-light 即 font-weight: 300; font-normal 即 font-weight: 400; font-bold 即 font-weight: 700; font-black 即 font-weight: 900;6. 颜色 透明 渐变<p className="text-red-500">islandZzz -- 文本颜色</p> <p className="...
DOCTYPEhtml><htmllang="en"><head><scriptsrc="https://cdn.tailwindcss.com"></script></head><bodyclass="p-4"><h1class="text-2xl font-bold mb-4">Tailwind CSS Font Weight</h1><pclass="font-thin mb-4">This text is styled with a thin font weight of 100.</p><pclass="font-...
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 中的特定值,构建后会...
You can also provide defaultline-height,letter-spacing, andfont-weightvalues for a font size: @theme{ --text-tiny:0.625rem; --text-tiny--line-height:1.5rem; --text-tiny--letter-spacing:0.125rem; --text-tiny--font-weight:500;
TailwindCss具有较好的语义化,但使用默认的命名方案,会大大增加开发者的记忆成本,例如:字体粗细值从thin(100) 定义到了black(900)。 使用数字标签的方式可以减少 UI 工具的值转换为TailwindCss类的成本。例如:font-weight: 600不清楚对应font-bold还是font-semibold,但font-600就很明确。
有9 种不同的字体大小和相当多的颜色的Utilize Class,因此你可以通过仅更新 html 文件进行设计,而无需编写自己的 css 样式。 如果你想使用未在 Tailwind CSS 的Utilize Class中注册的颜色,你可能想知道该怎么做。在这种情况下,你可以通过在 Tailwind CSS配置文件中注册它,以与其他 Tailwind CSSUtilize Class相同的...
Font Family Font Size Font Smoothing Font Style Font Weight Font Variant Numeric Letter Spacing Line Height List Style Type List Style Position Placeholder Color Placeholder Opacity Text Align Text Color Text Opacity Text Decoration Text Transform ...
CSS框架:TailwindCSS自定义配置教程 CSS框架(如Bootstrap, Tailwind CSS):TailwindCSS自定义配置 一、TailwindCSS简介 1.1 什么是TailwindCSS 1.2 TailwindCSS的特点与优势 特点 优势 二、TailwindCSS的自定义配置 2.1 配置文件的创建 示例代码 解释 2.2 使用自定义配置 示例代码 解释 2.3 配置文件的高级用法 示例代码...
text-3xl:font-size: 1.875rem font-bold:font-weight: 700 mb-4:margin-bottom: .75rem mt-0:margin-top: 0 这是有关内容的一些 class: text-gray-700:color: #4a5568 text-sm:font-size: .875rem Tailwind CSS是一项投资。如果你想快速的编写 CSS 和设计你的 app,你要花时间去学习这些 class;与...