CSS Tailwind

作者: JunChow520 | 来源:发表于2020-05-27 00:14 被阅读0次

一般的UI中CSS框架都是内建各种预设的组件，比如按钮、卡片、警告框等，当需要通过定制化设计时，组件的高度耦合性则带来很大的弊端。Tailwind并不提供预先设计好的内建组件，而是提供了更为基础的工具类（utility classes），可直接在HTML源码上构建完全定制化的设计。

Tailwind顺风是一个CSS框架的工具集，Tailwind的理念是抽取共用体（Utilities First）。
Tailwind CSS是一个高度可定制的基础层CSS框架，提供了构建定制化所需的构建块，无需重新覆盖内建于框架内中的风格。

CSS类库管理的实质上是CSS命名的问题，目前流行的解决方案有：

BEM（Block Element Modifer）
BEM即.block__element--modifier{}的形式，使用BEM后CSS就有了三个作用域。
ACSS（CSS Atomic）
ACSS是雅虎团队的Atomic CSS，其理念是将样式原子化。

安装

$ npm i tailwindcss

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

特性

响应式

Tailwind CSS的每个工具类都支持响应式布局，使用类似{screen}:的命名前缀以区分响应式类。

组件友好

仅需使用工具类（utility classes）即可，Tailwind从重复模式中提取组件的工具类。

可定制

Tailwind CSS是基于PostCSS开发的，通过JavaScript代码配置。

核心

实用为主（Utility-First）

传统的Web页面设计需手工为HTML元素编写CSS样式，使用Tailwind可以直接在HTML使用预先定义的类名来设置元素的样式。

自适应设计（Responsive Design）

Tailwind中每个工具类均可有条件地应用到不同的断点（breakpoint），默认情况下根据常见移动设备分辨率划分了4个断点，分别对应4个不同的媒体查询。

自适应

断点	屏幕类型	最小宽度
sm	小型屏幕（small），手机	min-width:640px;
md	中等屏幕（medium），平板	min-width:768px;
lg	大型屏幕（large），笔记本	min-width:1024px;
xl	超大屏幕（extra large），台式机	min-width:1280px;

/*sm small*/
@meida (min-width:640px){}
/*md medium*/
@meida (min-width:768px){}
/*lg large*/
@meida (min-width:1024px){}
/*xl extra large*/
@meida (min-width:1280px){}

当需要为元素添加仅在某个断点处生效的工具类时，需在工具类名前添加前缀breakpoint:classname。

例如：不同分辨率设备图片宽度限制

<img class="w-16 md:w-32 lg:w-48" src="..." />

例如：营销页面组件在小屏幕上使用堆叠布局，大屏幕上使用并排布局。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto bg-gray-200 p-4">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"/>
    </div>
    <div class="mt-4 md:mt-0 md:ml-6">
      <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">市场营销</div>
      <a class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">为您的生意发现新的客户</a>
      <p class="mt-2 text-gray-600">经营一家企业是一件非常艰巨的工作，这里有五个可用来发掘您第一个客户的想法。</p>
    </div>
  </div>
</div>

md:flex将外部元素默认的display:block在中等屏幕和较大屏幕上转换为display:flex弹性盒子容器。
当图像元素的父元素为弹性容器时，为确保图像不发生收缩，因此为img元素添加md:flex-shrink-0，以防止在中等屏幕和更大的屏幕中不发生收缩。从技术角度来讲可以只是用flex-shrink-0，因为它在较小屏幕上不会起作用，但由于只在md中等屏幕上起作用，所以最好在类名中添加md以明确指明。
小型屏幕上图片默认为全宽，中型屏幕及以上则使用md:w-56将图片宽度限制为固定大小。
小型屏幕上内容部分使用mt-4，即在内容和图像之间添加外顶边距。当在水平并排布局时不需要此边距，使用md:mt-0撤销，并使用md:ml-6添加左边距。

大屏并排布局

小屏堆叠布局

移动优先（Mobile First）

默认Tailwind使用移动优先断点系统，类似Bootstrap或Foundation。这也就意味着那些没有添加断点前缀的类名会在所有屏幕大小上都会生效，比如uppercase。带断点前缀的类名则仅在指定断点及更大尺寸中生效，比如md:uppercase。

例如：不同断点处循环使用多个背景色，即调整浏览器大小以查看背景色的更改。

更换背景色

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-4 bg-gray-200 flex items-center justify-center">
  <div class="w-20 h-20 rounded bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">
  </div>
</div>

伪类变量（Pseudo-Class Variants）

基础样式（base）

Tailwind默认分为三个模块分别是base、component、utilities。

base 基础样式
component 组件类样式
utilities工具类样式

Tailwind以normalize.css为基础，在其上构建出preflight基础样式，其目的在于消除不同厂商浏览器渲染不一致的内置样式。

清零默认外边距

preflight从元素（比如标题、引号、段落等）中删除默认外边距

blockquote,dl,dd,h1,h2,h3,h4,h5,h6,figure,p,pre{margin:0;}

取消标题默认样式

默认标题元素默认样式，使之具有与普通文本相同的字体大小和字号粗细。

h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:inherit;}

取消列表默认样式

ol, ul{margin:0; padding:0; list-style:none;}

图像类元素设置为块级元素

img, svg, video, canvas, audio, iframe, embed, object{display:block; vertical-align:middle;}

全局重置边框样式

*, *::before, *::after{ border-width:0; border-style:solid; border-color:theme('borderColor.default', currentColor);}

布局（layout）

容器（container）

.container容器类是一个将元素宽度固定到当前断点的组件。

断点	最大宽度
none	width:100%;
sm	max-width:640px;
md	max-width:768px
lg	max-width:1024px;
xl	max-width:1280px;

.container容器类用于设置元素的最大宽度，以匹配当前断点的最小宽度。适用于固定屏幕大小设计而非容纳完全流动的viewport视口。

.container{
  width:100%:
}

.container容器类不会自动居中也没有任何内置的水平填充。

盒模型（box sizing）

类名	属性	描述
.box-border	box-sizing:border-box;	边框盒模型，元素尺寸包含边框和内边距。
.box-content	box-sizing:content-box;	内容盒模型，元素尺寸不包含边框和内边距。

box-sizing属性用于控制浏览器如何计算元素大小，即盒子模型的尺寸。

包含边框和内边距的盒模型（border-box）

border-box

.border-box{
  box-sizing:border-box;
}

border-box盒子模型会将元素的框大小设置为border box边框盒子模型，告诉浏览器在给定元素的高度或宽度时会包含边框和填充。

例如：创建100px x 100px的元素，使用border box盒子模型时，如果具有2px的边框和4像素的内边距（padding），最终呈现的是 100px x 100px的区域，其中内容区域则为88px x 88px。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="flex align-center justify-center p-4">
  <div class="box-border h-32 w-32 p-4 border-4 border-gray-400 bg-gray-200">
    <div class="w-full h-full bg-gray-300"></div>
  </div>
</div>

不包含边框和内边距的盒模型（content-box）

使用box-content类名将定义元素的盒模型为内容框，也就是告诉浏览器在元素计算宽度或高度时包含边框和内边距的大小。

.content-box{
  box-sizing: content-box;
}

content-box

例如：创建100px x 100px的元素时，若边框为2px，内边距为4px，最终呈现的尺寸为112px x 112px，内部内容区域为 100px x 100px。

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="flex align-center justify-center p-4">
  <div class="content-box w-32 h-32 p-4 border-4 border-gray-400 bg-gray-200">
    <div class="w-full h-full bg-gray-100"></div>
  </div>
</div>

显示框（display）

CSS中的display属性用于控制元素生成的显示框类型

类名	属性	描述
.hidden	display:none	隐藏元素，不显示框。
.block	display:block	设置元素显示为块级元素，元素前后会带有换行符。
.inline	display:inline	设置元素显示为行内（内联）元素，元素前后没有换行符。
.inline-block	display:inline-block	设置元素显示为内联块级元素（行内块元素）
.flow-root	display:flow-root	设置元素显示为块级元素并创建BFC块级格式化上下文
.flex	display:flex;	设置元素显示为块级弹性盒子容器
.inline-flex	display:inline-flex;	设置元素显示为行内弹性盒子容器
.grid	display:grid;	设置元素显示为栅格容器
.inline-grid	display:inline-grayd;	设置元素显示为行内栅格容器
.hidden	隐藏显示区域

块级元素（block）

块级元素独占一行，且尽可能撑满父级元素的宽度。
快积元素默认宽度为父元素宽度的100%
块级元素即可容纳内联元素也可容纳块级元素
常见块级元素包括div、h1~h6、p、hr、ol、ul

block

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="bg-gray-200 p-4">
  <span class="block text-center text-gray-700 bg-gray-400 px-4 py-2">1</span>
  <span class="block text-center text-gray-700 bg-gray-400 px-4 py-2 mt-2">2</span>
  <span class="block text-center text-gray-700 bg-gray-400 px-4 py-2 mt-2">3</span>
</div>

内联元素（inline）

非块级元素均为内联元素，内联元素只能容纳文本或内联元素。
常见内联元素包括strong、em、s、u、a、span、img、input...
内联元素默认大小是不可控制的，内联元素不可以设置width和height。
内联元素默认与其它内联元素在一行上，相邻内联元素不换行，宽度即为内容宽度。
内联元素padding在4个方向上都有效，内联元素margin只在水平方向有效。

inline

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="bg-gray-200 p-4">
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">1</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">2</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">3</div>
</div>

行内块级元素（inline-block）

inline-block元素结合行内和块级的优点，即可设置width和height，又让padding和margin生效，也可和其它行内元素并排显示。
vertical-align属性会影响到inline-block元素
若HTML代码中元素之间存在空格，则inline-block元素之间会产生间隙。
inline-block元素是将对象呈现为inline对象，对象内容则作为block对象显示。

inline-block

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="bg-gray-200">
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

带BFC的块级元素（flow-root）

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="flow-root bg-gray-400">
  <div class="block my-4 px-4 py-2 bg-gray-500 text-center text-gray-700">1</div>
</div>
<div class="flow-root bg-gray-200">
  <div class="block my-4 px-4 py-2 bg-gray-400 text-center text-gray-700">2</div>
</div>

flow-root

弹性盒子容器（flex）

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="flex bg-gray-200">
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">1</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">2</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">3</div>
</div>

flex

行内弹性盒子容器（inline-flex）

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="inline-flex bg-gray-200">
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">1</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">2</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">3</div>
</div>

inline-flex

栅格容器（grid）

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="grid gap-4 grid-cols-3 bg-gray-200 text-center">
  <div class="bg-gray-400 p-4">1</div>
  <div class="bg-gray-400 p-4">2</div>
  <div class="bg-gray-400 p-4">3</div>
  <div class="bg-gray-400 p-4">4</div>
  <div class="bg-gray-400 p-4">5</div>
  <div class="bg-gray-400 p-4">6</div>
  <div class="bg-gray-400 p-4">7</div>
</div>

grid

浮动（float）

CSS标准文档流在正常情况下，页面总是从左向右、从上向下布局的。浮动属性可以打破标准文档流默认的布局从而实现特殊的布局。浮动会让块级元素脱离文档流，漂浮在文档流之上，因此和文档流并不处于同一个层次。

CSS的float浮动属性用于设置元素水平向左或向右移动，其周围元素同时会自动排列。浮动元素会尽量向左或向右移动，直到其外边缘触碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它，浮动元素之前的元素将不受影响。

浮动设计的初衷并不是用来布局的，而仅仅是为了实现图片文字环绕效果，即图片做浮动，文字环绕图片。

当元素设置浮动属性后，会表现出如下特性：

破坏文档流
浮动属性的本质是用来破坏文档流，因此设置元素浮动属性后会导致父元素高度塌陷。
包裹性
包裹性包含包裹和自适应两个特征

包裹是指若浮动元素的子元素宽度足够小，则父级浮动元素宽度就是子元素的宽度。
自适应是指若浮动元素的父元素已设置宽度且浮动元素的子元素宽度超出父元素，则浮动元素宽度最终会表现为父元素的宽度。

BFC 块状格式化上下文
当元素设置了浮动属性，其display显示属性最终值会表现为block或table。
margin合并失效
元素设置了浮动属性后会自动形成BFC，因此也就没有margin合并的效果。
行盒和浮动元素不可重叠性
行框盒子和浮动元素不会发生重叠

类名	属性	描述
.clearfix	&::after{content:""; display:table; clear:both;}	清除浮动
.float-none	float:none;	浮动默认值，设置元素不浮动。
.float-left	float:left;	设置元素向左浮动
.float-right	float:right;	设置元素向右浮动

左浮动（float-left）

使用.float-left工具类将元素浮动到父级容器的最左端

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-4 bg-gray-200 overflow-hidden">
  <img src="http://source.unsplash.com/300x300" class="float-left mr-4 my-2 h-32"/>
  <p>使用左浮动将元素浮动到父级容器的左边</p>
</div>

为了避免float属性带来父容器container高度塌陷，父容器添加了overflow-hidden将其转换成BFC以解决这个问题。

float-left

右浮动（float-right）

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto my-4 p-4 bg-gray-200 overflow-hidden">
  <img src="http://source.unsplash.com/100x100" class="float-right ml-4"/>
  <p class="overflow-hidden">设置元素右浮动将其浮动到父级容器的右端设置元素右浮动将其浮动到父级容器的右端设置元素右浮动将其浮动到父级容器的右端</p>
</div>

float-right

不浮动（float-none）

使用.float-none工具类可重置元素的float属性为默认的none即不发生浮动。

清除浮动（clear）

类名	属性	描述
.clear-left	clear:left;	清除左浮动
.clear-right	clear:right;	清除右浮动
.clear-both	clear:both;	清除左右浮动
.clear-none	clear:none;	不清除浮动

可替换对象（replaced object）

可替换元素缩放方式（object fit）

类名	属性	描述
.object-fill	object-fit:fill;	填充，拉伸
.object-contain	object-fit:contain;	包含，缩放
.object-cover	object-fit:cover;	覆盖，裁剪
.object-none	object-fit:none;	原样
.object-scale-down	object-fit:scale-down;	降低，none与contain看谁小

可替换元素定位方式（object position）

类名	属性	描述
.object-bottom	object-position:bottom;	底部
.object-center	object-position:center;	居中
.object-left	object-position:left;	左侧
.object-left-bottom	object-position:left bottom;	左下角
.object-left-top	object-position:left top;	左上角
.object-right	object-position:right;	右侧
.object-right-bottom	object-position:right bottom;	右下角
.object-right-top	object-position:right top;	右上角
.object-top	object-position:top;	顶部

object-position

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 grid grid-cols-3 gap-4">
  <div class="bg-black text-white text-center">
    left-top
    <img src="http://source.unsplash.com/100x100" class="object-left-top object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    top
    <img src="http://source.unsplash.com/100x100" class="object-top object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    right-top
    <img src="http://source.unsplash.com/100x100" class="object-right-top object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    left
    <img src="http://source.unsplash.com/100x100" class="object-left object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    center
    <img src="http://source.unsplash.com/100x100" class="object-center object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    right
    <img src="http://source.unsplash.com/100x100" class="object-right object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    left-bottom
    <img src="http://source.unsplash.com/100x100" class="object-left-bottom object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    bottom
    <img src="http://source.unsplash.com/100x100" class="object-bottom object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    right-bottom
    <img src="http://source.unsplash.com/100x100" class="object-right-bottom object-none bg-gray-400 h-48 w-full"/>
  </div>
</div>