module.exports = { theme: { extend: { colors: { 'custom-blue': '#1da1f2', }, fontFamily: { 'custom': ['Open Sans', 'sans-serif'], }, }, }, }; 使用@apply 指令 当需要重复使用一组样式时,可以使用 @apply 指令将这些样式组合到一个自定义类中: /* styles.css */ .btn { @ap...
@font-face { font-family: 'CustomFont'; src: url('/static/fonts/CustomFont.ttf') format('truetype'); } body { font-family: 'CustomFont', sans-serif; } </style> 上述代码中,font-family定义了自定义字体的名称,src指定了字体文件的路径和格式。在body选择器中,将自定义字体应用于整个页面。 ...
字体:font-[family] <div class="font-sans">Font Sans</div> <div class="font-serif">Font Serif</div> <div class="font-mono">Font Mono</div> 自定义字体族配置 <head> <!-- ... -->> <script> tailwind.config = { theme: { fontFamily: { sans: ["Inter", "sans-serif"], serif...
例如,创建一个名为custom.css的文件: /* custom.css */ .btn { @apply bg-blue-500 text-white py-2 px-4 rounded; } 然后在HTML中引入此文件并使用自定义类: <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <link href="path/to/...
module.exports={theme:{extend:{colors:{'custom-blue':'#1a202c','custom-red':'#e3342f',},fontFamily:{sans:['Roboto','Arial','sans-serif'],},},},variants:{extend:{},},plugins:[],}; 基础用法讲解 快速上手Tailwind.css类名
['responsive'], fontFamily: ['responsive'], fontSize: ['responsive'], fontSmoothing: ['responsive'], fontStyle: ['responsive'], fontVariantNumeric: ['responsive'], fontWeight: ['responsive'], gap: ['responsive'], gradientColorStops: ['responsive', 'dark', 'hover', 'focus'], gray...
Custom Font Size –We can give custom font sizes in “px”, “rem”, “vw” and others in a similar format as above. Here we wrote text-[18px]. Custom Rounded Value –We can give custom values while making rounded corners. Here it’s rounded-[8px]. ...
Flutter 使用自定义字体
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...
Tailwind CSS 还提供了灵活的配置选项,允许开发者根据项目需求定制样式规则。通过修改tailwind.config.js文件,开发者可以添加自定义的颜色、字体、间距等配置项,从而实现更加个性化的设计。 // tailwind.config.jsmodule.exports = {theme: {extend: {colors: {'custom-blue': '#3490dc',},fontFamily: {sans: [...