exports = { theme: { extend: { fontSize: { 'xs': ['0.75rem', '1rem'], }, }, }, variants: {}, plugins: [], } <p class="text-xs">这是一个使用自定义字体大小的示例。</p> 通过上述示例,你可以看到TailwindCSS的自定义配置如何增强你的设计能力,同时保持代码的简洁和可维护性。在...
extend: { fontSize: ({ theme }) => ({ ...theme("spacing"), }), }, } }; 看看效果,给文字设置font size为22px; TailwindCSS 设置文字大小 总结 tailwindcss 是非常灵活的css框架,我们可以通过自定义config文件来定制属于我们自己项目的个性配置。后续会详细解析 tailwindcss.config 支持的配置项,让我...
您可以通过修改您的tailwind.config.js文件中的variants部分中的fontSize属性来控制为text sizing功能生成哪些变体。 例如,这个配置也将生成hover and focus变体: // tailwind.config.jsmodule.exports={variants:{extend:{// ...+fontSize:['hover','focus'],}}} ...
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 中的特定值,构建后会...
/** @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':...
theme}) => { matchUtilities({ fsize: (value) => ({ fontSize: value }) ...
font-size: 16px; // ... } <div class='mock'>mock</div> 1. 2. 3. 4. 5. 6. 以上代码就是举个例子,大部分情况应该都是写一个类,然后整一堆样式进去。这种方式写多了以后,会感受到一些痛点,比如说: 1) 取名困难,节点结构一多,取名真的是个难事。当然了,我们可以用一些规范或者选择器的方式...
w-[5em] 5*父元素 font-size3.指定百分比、分数值 w-80 即 80% w-1/24.跟随设备值 w-full 占据父元素 100% w-screen 占据设备宽 100% w-svw、w-lvw、w-dvw 跟随视窗宽度 一般使用 w-dvw 或 h-dvh, 表示当前视窗的宽度。随着视窗大小的变化而变化,适用于大多数响应式设计场景。5...
extend:{}, }, plugins:[], } 在src 目录中创建一个 index.html 文件,并添加以下内容: <!DOCTYPE html> <html> <head> <link href="/dist/output.css"rel="stylesheet"> </head> <body> <h1class="text-3xl font-bold text-center mt-4">Welcome to Tailwind CSS!</h1> ...
在tailwind.config.js 的 theme.extend 修改 p-1 的值,设置为 30px。 刷新页面,就可以看到 p-1 的样式变了: .text-base 是 font-size、line-height 两个样式,这种通过数组配置: 也就是说所有 tailwind 提供的所有内置原子 class 都可以配置。