text-lefttext-align:left; text-centertext-align:center; text-righttext-align:right; text-justifytext-align:justify; text-starttext-align:start; text-endtext-align:end; Basic usage Setting the text alignment Use thetext-left,text-center,text-right, andtext-justifyutilities to control the...
-- font family -->This is sample of font family sans.This is sample of font family serif.This is sample of font family mono. Font Size 用于设置元素的字体大小 Utilities for controlling the font size of an element. The quick brown fox ...The quick brown fox ...The quick brown fox .....
- lowercase: text-transform: lowercase 3. 背景和边框 - bg: background-color - border: border-style, border-width, border-color - rounded: border-radius - shadow: box-shadow 4. 弹性盒子布局 - flex: display: flex - justify: justify-content - items: align-items - self: align-self - ord...
UnoCSS 通过非常高效的字符串拼接来直接生成对应的 CSS 而非引入整个编译过程。同时，UnoCSS 对类名和...
background-color:#000000; } .lh100{ line-height:100px; } .tc{ text-align:center; ...
我们首先用了如下几个功能类:bg-gray-800 text-white p-2 m-2 rounded-lg。如果你用过 bootstrap 的话,那么你应该对这种写法很熟悉了。如果没用过,那么其实就是普通的 css 类,在 F12 里查看样式,就能看到。tailwind 里定义了一套常用的类给我们使用,像例子中 ...
UnoCSS有类似的更好用快捷方式来快捷实现这个功能: shortcuts: [ // you could still have object style { btn: 'py-2 px-4 font-semibold rounded-lg shadow-md', }, // dynamic shortcuts [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`], ...
下面是一些常用的 Tailwind CSS 组合样式,可以让你的标题看起来更加吸引人: 1. 文字颜色与背景色的对比:使用 `text-{color}-500` 样式类来设置标题的文字颜色,同时使用 `bg-{color}-200` 样式类来设置标题的背景色,这样可以使标题更加醒目。 2. 字体大小与行高的搭配:使用 `text-{size}` 样式类来设置标题...
使用text-align属性:将父容器的text-align属性设置为center,然后将子元素的display设置为inline-block。 综合考虑垂直和水平居中,可以结合以上两种方法: 代码语言:txt 复制 .container { display: flex; justify-content: center; align-items: center; } 这种布局方式适用于各种场景,特别是在响应式设计中非常有用。
Tailwind CSS 备忘清单 Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex, pt-4, text-center 和 rotate...