Tailwind Base

添加基础样式 - 使用Tailwind添加全局的基础样式

全局基础样式是样式表开头的样式,用于为基础HTML元素设置有效的默认值,或应用自定义重置样式。

Tailwind包括一组实用的基础样式集称为preflight,用于上是采用normal.css并在其上封装了一层自定义的样式。

htmlbody元素应用全局样式

<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的中性灰
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。