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-"

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

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

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

Pill Shape
 //rounded-full=border-raduis:9999px
Circle

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-"

  
1
  
2
  
3

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

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

image.png

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

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

//hover active

  Hover me

//disabled

  Submit

//checked

编辑器插件

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: {},
    //…
  }
}