.font-seriffont-family: Georgia, Cambria, "Times New Roman", Times, serif; .font-monofont-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; Sans-serif Use.font-sansto apply a web safe sans-serif font family: ...
module.exports = { theme: { extend: { colors: { 'custom-blue': '#1da1f2', }, fontFamily: { 'custom': ['Open Sans', 'sans-serif'], }, }, }, }; 使用@apply 指令 当需要重复使用一组样式时,可以使用 @apply 指令将这些样式组合到一个自定义类中: /* styles.css */ .btn { @ap...
font-family: 'CustomFont', sans-serif; } </style> 上述代码中,font-family定义了自定义字体的名称,src指定了字体文件的路径和格式。在body选择器中,将自定义字体应用于整个页面。 使用Tailwind CSS自定义字体:如果你正在使用Tailwind CSS框架,可以通过在tailwind.config.js文件中的theme部分添加自定义字体来实现。
0x01 概述 (1)简介 Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级“工具”类创建布局 如 Bootstrap 等传统 CSS 框架,其使用的类通常与组件直接相关;然而,Tailwind 则采用了
Tailwind CSS 还提供了灵活的配置选项,允许开发者根据项目需求定制样式规则。通过修改tailwind.config.js文件,开发者可以添加自定义的颜色、字体、间距等配置项,从而实现更加个性化的设计。 // tailwind.config.jsmodule.exports = {theme: {extend: {colors: {'custom-blue': '#3490dc',},fontFamily: {sans: [...
@import"tailwindcss"; 您只需使用 CSS 变量,而不是在 JavaScript 配置文件中设置所有自定义: @import"tailwindcss";@theme{--font-family-display:"Satoshi","sans-serif";--breakpoint-3xl:1920px;--color-neon-pink:oklch(71.7%0.25360);--color-neon-lime:oklch(91.5%0.258129);--color-neon-cyan:ok...
// tailwind.config.jsconstdefaultTheme=require('tailwindcss/defaultTheme')module.exports={theme:{extend:{fontFamily:{sans:['Lato',...defaultTheme.fontFamily.sans,]}}} Disabling an entire core plugin If you don't want to generate any classes for a certain core plugin, it's better to set...
Custom font with @font-face 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...
Font Family (only custom font families that you defined in tailwind.config.js) Font Size Font Style Font Weight Font Variant Numeric (only oldstyle-nums, lining-nums, tabular-nums and proportional-nums) Letter Spacing (must be used with font size utilities, e.g. text-lg) Line Height Text...
图标与 TailwindCSS 一起使用，而不是直接使用图像或 SVG 图标，以及如何基于给定图像为 TailwinCSS ...