This fontSize property contains our custom font sizes: title and paragraph. We added a new colors property that contains a primary color with two shades: 500 and 800.We can apply these classes to style our component like so:export default function Home() { return ( <section className="font...
radius: 12px; /* Custom border radius */ color: white; /* Custom text color */ padding: 10px 20px; /* Custom padding */ text-align: center; /* Center text */ box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Custom shadow */ font-size: 16px; /* Custom font size */ } } ...
Customisability:You can drag to reorder, add or remove styles. Rename titles. Change font size, line height and letter spacing per style. User-Friendly Interface:Easy to navigate, the plugin integrates smoothly into your Figma workspace. Real-Time Updates:Instantly apply and adjust font sizes, ...
darkMode:false,// or 'media' or 'class'theme:{extend:{colors:{primary:'#1a1a1a',secondary:'#333333',},fontSize:{'3xl':['1.875rem',{lineHeight:'2.25rem'}],},},},variants:{extend:{},},plugins:[],}
/** @type {import('tailwindcss').Config} */module.exports={important:true,content:['./src/**/*.{ts,tsx}','./src/**/*.{css,scss}'],corePlugins:{preflight:false,},theme:{extend:{fontSize:{xs:'12px',sm:'14px',base:'16px',lg:'18px',xl:'20px','2xl':'24px','3xl':...
<divclass="bg-custom-blue text-custom-red">自定义颜色样式</div> 利用TailwindCSS实现动态样式 使用TailwindCSS可以动态地改变元素的样式。例如,你可以根据某些条件来切换类: <divclass="bg-blue-500 hover:bg-red-500">鼠标悬停时背景颜色会变化</div> ...
.text-base { font-size: 16px; } .p-1 { padding: 4px; } .border { border-width: 1px; } .border-black { border-color: black; } .border-solid { border-style: solid; } .text-base { font-size: 16px; } .p-1 { padding: 4px; } .border { border-width: 1px; } .border-blac...
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...
fontFamily: { sans: ["Inter", "sans-serif"], serif: ["Inter", "serif"], mono: ["Inter", "monospace"] } } } </script> </head> 字号:text-[size] <divclass="text-xs">Text Extra Small</div> <divclass="text-sm">Text Small</div> ...
<div data-size="large" class="data-[size=large]:p-8"> open 具有 open 属性的元素 <details class="open:bg-white> details 和 dialog 标签具有 open 属性 后代选择器 ltr、rtl 不同文本展示方式下设置样式,html 中设置<html dir="ltr">才能够生效 ...