TailWind CSS工具库使用

一、简介

官方文档
本 CSS 框架本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。

二、安装

介绍VUE项目的相关安装步骤

1.安装TailWind CSS

通过 npm 安装tailwindcss和它的相关依赖，然后创建tailwind.config.js和postcss.config.js的配置文件。

安装

/* 依据不同VUE版本使用对应命令 */

/* VUE2 */
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

/* VUE3 */
npm install -D tailwindcss postcss autoprefixer

创建配置文件

npx tailwindcss init -p

2.配置模板文件的路径

在tailwind.config.js配置文件中添加所有模板文件的路径。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3.将加载Tailwind的指令添加到你的CSS文件中

在你的主CSS文件中通过@import或者@tailwind指令添加每一个Tailwind功能模块，并将其引入到main.js文件中。

tailwindcss.css

/* 依据不同VUE版本使用对应代码块 */

/* VUE2 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* VUE3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

main.js

import './assets/tailwindcss.css'
/* ... */

三、扩展

安装TailWind CSS IntelliSense扩展
VSCode中安装TailWind CSS IntelliSense扩展，智能自动补全提示、代码检查（linting）、CSS 类定义等，所有这些都集成到编辑器中了，并且无需任何配置。

四、个性化定制

1.自定义类名

TailWind css支持自定义配置功能，在tailwind.config.js中进行定义

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  theme: {
    colors: {
      'blue-primary': '#409eff',
      'blue-light': '#a0cfff',
      active: '#ffd04b',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [],
}

2.类名整合

针对复杂的页面样式，为避免HTML类名过于臃肿，可以自定义类名，将需要使用的CLASS整合到一起，也可以依据项目UI整体风格整合按钮、页头、表格、分页等组件的样式直接使用。
示例

.btn {
  @apply text-orange-500 bg-white rounded-lg hover:scale-90;
}

五、常用配置

1.布局

类名	说明
w	width
max-w	max-width
h	height
max-h	max-height
m	margin
mt	margin-top
mb	margin-bottom
ml	margin-left
mr	margin-right
p	padding
pt	padding-top
pb	padding-bottom
pl	padding-left
pr	padding-right

2.文本样式

类名	说明
font	font-family
text	text-color, text-alignment, text-transform, font-size
leading	line-height
tracking	letter-spacing
uppercase	text-transform: uppercase
lowercase	text-transform: lowercase

3.背景和边框

类名	说明
bg	background-color
border	border-style, border-width, border-color
rounded	border-radius
shadow	box-shadow