TailWind CSS 学习分享

介绍

是一个 CSS 框架，和bootstrap，element ui，antd一样。将一些 css 样式封装好，用来提高开发效率的一个工具。个人理解就是可配置的原子CSS

环境安装

npm init -y && npm i tailwindcss autoprefixer postcss -D

配置文件

生成tailwind.config.js

// -full指令所有预设的基础类列出到配置文件中
npx tailwindcss init --full

使用

引入TailWind

将 Tailwind 基础类引入到项目的样式表中，如项目的样式在 style.css 文档中

/*  styles.css */
@tailwind base; //重置默认属性
@tailwind components; //一些组件样式
@tailwind utilities; //工具类，也就是最常用的样式封装

tailwind 的工具类涵盖了大部分的常规需求，详细的列表见官网(https://docs.tailwindchina.com/docs)

常用工具类

1.颜色 类名= 使用目标+颜色+权重

一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，颜色green：

文字颜色： text-green  
背景颜色： bg-green  
边框颜色1： border-green      //default，不需要数字描述  
边框颜色2： border-green-700  //数字表示颜色的深浅，越大颜色越深  

2.文本 "text-"

文本颜色、文本装饰、大小写转换和溢出样式 见：https://docs.tailwindchina.com/docs/text-color

3.字体 "font-"

字体类型 "font-"+{type}

字体粗细 "font-"+{weight}

4.行高 "leading-"+{size}

5.背景 "bg-"

<div class="bg-purple-600 bg-opacity-100"></div>
<div class="bg-purple-600 bg-opacity-75"></div>

背景颜色、背景图片位置等见： https://docs.tailwindchina.com/docs/background-image

6. 边框 "rounded-"或"border-"

"rounded-"设置边框的圆角样式，"border-"设置边框颜色、粗细、边框类型等

<div class="rounded-full py-3 px-6">Pill Shape</div> //rounded-full=border-raduis:9999px
<div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>
<div class="border-4 border-light-blue-500 border-opacity-100"></div>

7. 边距 "p-" "m-"

内边距padding： 使用p{t|r|b|l|x|y}-{size}功能类控制元素一侧的内边距。size是tailwind.config.js中配置的spacing对象的键。

外边距margin： 使用 m{t|r|b|l|x|y}-{size},用法同padding

8. 布局

8.1 display：元素显示类型

其他样式：docs.tailwindchina.com/docs/displa…

8.2 Flex "flex-"

<div class="flex">
  <div class="flex-1">1</div>
  <div class="flex-1">2</div>
  <div class="flex-1 hidden">3</div>
</div>

其他对齐方式：docs.tailwindchina.com/docs/justif…

box-sizing ：控制浏览器如何计算元素的总大小的功能类。

image.png

9. 伪类 { hover: | focus: | checked: |active: | visited: |disabled: } + 功能类

并不是所有功能类都可以放在伪类的后面，只有tailwind文档规定的才可使用，如果需要在tailwind的配置文件中配置variants选项。

//hover active
<button class="bg-red-500 hover:bg-red-700 active:bg-purple-500 ">
  Hover me
</button>
//disabled
<button class="disabled:opacity-50">
  Submit
</button>
//checked
<input type="checkbox" class="appearance-none checked:bg-blue-600">

编辑器插件

tailwind css intellisense

• 自动补全
• lint
• 悬停预览：当鼠标悬停在类名上时，展示其对应的 css

编译

使用Tailwind Cli

编译默认的 Tailwind CSS 文件

npx tailwindcss build -i style.css  -o _style.css

根据指定的配置文件编译 Tailwind CSS 文件

npx tailwindcss build -i style.css -o _style.css -c tailwind.config.js

使用PostCss

postcss.config.js文件添加tailwindcss,autoprefixer配置即可

// postcss.config.js
module.exports = {
  plugins: {
    //…
    tailwindcss: {},
    autoprefixer: {},
    //…
  }
}