Tailwind Base
2020-06-19 本文已影响0人
JunChow520
添加基础样式 - 使用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的中性灰 |
