添加基础样式 - 使用Tailwind添加全局的基础样式
全局基础样式是样式表开头的样式,用于为基础HTML元素设置有效的默认值,或应用自定义重置样式。
Tailwind包括一组实用的基础样式集称为preflight
,用于上是采用normal.css
并在其上封装了一层自定义的样式。
对html
和body
元素应用全局样式
<html lang="en" class="antialised text-gray-500 leading-tight">
<head></head>
<body class="min-h-screen bg-gray-100">
</body>
</html>
为html
元素设置全局的字体及其相关的全局样式
全局样式 | 属性 | 描述 |
---|---|---|
antialiased | -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; | 设置字体平滑度为抗锯齿 |
leading-tight | line-height:1.25; | 设置行高为1.25倍 |
text-gray-500 | color:#a0aec0; | 设置字体颜色为中度中性灰 |
为body
元素元素设置全局的样式
全局样式 | 属性 | 描述 |
---|---|---|
min-h-screen | min-height:100vh; | 设置主体高度为窗口高度100vh |
bg-gray-100 | background-color:#f7fafc; | 设置主体背景颜色为1/10的中性灰 |