仅仅是这种样式:text-center(text-align: center)、p-4(padding: 1rem; /* 16px */)。一个类名代表了一个样式属性,貌似提供不了多大的便利,而且刚开始用,不熟悉的语法还需要对照文档去找,有些麻烦 复杂样式,比如这种样式:比如一个 grid-cols-3 和 shadow : /* 三等分的 Grid 属性 */ .grid-cols-3...
<divclass="mt-20"><h2class="text-center text-4xl">Text Color</h2><divclass="grid grid-cols-2 gap-4"><div><h1class="font-semibold text-gray-200">This is text-gray-200</h1><h1class="font-semibold text-gray-600">This is text-gray-600</h1><h1class="font-semibold text-red-200...
text-center { text-align: center; } .lead { font-size: 1.25rem; font-weight: 300; } </style> </head> <body> <div class="container"> <h1 class="text-center">欢迎来到我们的网站</h1> <p class="lead">这是一个使用自定义CSS的示例页面。</p> </div> </body> </html> 在这个...
text-left 即 text-align:left text-center、text-right、text-justify 同理加粗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;...
[{ css: ".hello {\n text-align: center;\n}", file: "index.css" }]; 完美的清除掉了useless类。 它的设计和框架无关,所以各个框架也可以基于这个工具封装自己的上层工具。 比如vue-cli-plugin-purgecss[6],可以用来在 Vue 中清理你没有使用到的样式。
使用text-{align}类来设置文本对齐方式。 <divclass="text-center">居中文本</div> 边距: 使用{direction}-{size}类来设置元素的边距。 <divclass="mb-4">底部边距</div> 填充: 使用p-{size}类来设置元素的内边距。 <divclass="p-2">内边距</div> ...
.bg-blue { background-color: rgb(81, 191, 255); } .bg-green { background-color: rgb(81, 255, 90); } .text-underline { text-decoration: underline; } .text-center { text-align: center; } .font-weight-400 { font-weight: 400; } ...
text-align:left | center | right | justify | justify-all | inherit; text-align的默认值取决于direction方向属性,如果direction属性为ltr则默认值为left。如果direction属性为rtl则为right。 Tailwind提供了基于.text-前缀的工具类用于设置text-align属性 ...
示例如下: <divclassName="hover:text-center"></div> 上面的写法,在 text-center 前加上 hover: 前缀,使其应用在了 hover 伪类里,相当于: .text-center:hover{text-align:center;}
1. 方便性:text-center、grid-cols-3 或许一个text-center不足以使你觉得提供了多大的方便性，但对于...