一、通过 npm 安装 Tailwind

通过 npm 安装 Tailwind

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
 
npm i -D unocss

vite.config.ts中引入 Unocss

import Unocss from 'unocss/vite'
 
export default defineConfig({
    plugins: [
        Unocss(),
    ],
})

二、创建配置文件

终端执行：

npx tailwindcss init -p

这将会在您的工程根目录创建 tailwind.config.js 和 postcss.config.js 两个配置文件

配置tailwind.config.js文件 并改写space

//tailwind.config.js

/** @type {import('tailwindcss').Config} */
const spacing = {};
for (let i = 0; i < 3000; i++) {
	spacing[i] = i + 'px';
}
module.exports = {
	content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
	theme: {
		spacing,
		extend: {
			// 自定义
			backgroundImage: {
				'hero-pattern': "url('/assets/images/勾选@2x.png')",
			},
			colors: {
				'cicc-red': '#640000',
			},
		},
	},
	plugins: [],
};

看文档可知margin height width padding这些后面跟的数字单位并不是px

这里改写space 是将w-2 h-2 pt-2 mt-2 类似这种的单位改成px

postcss.config.js

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

最后在main.js或者main.ts中引入css样式 import ‘uno.css’

三、定义自己的css样式：

tailwind.config.ts中写入自己的样式

三、引入 Tailwind 到CSS 中

@forward './vars.scss';
@forward './base.scss';
@forward './tailwind.scss';

组件中使用:

四、使用总结

1. 使用条件判断

:class = {'text-gray-600': isactive} 

例:

2. 类似 :nth-of-type(2), 文档没有中间元素选择器, 有选中子元素第一个, 最后一个, 奇数项的, 偶数项的, 但是找了很久, 没有找到选中指定元素的写法:

这里可以用[&:nth-child(3)]
例:

<ul role="list">
 {#each items as item} 
 <li class="[&:nth-child(3)]:hover:underline">{item}</li> {/each}
</ul> 

3. margin: 0 auto没有单个的语法,只能分开写成 : mx-auto my-0

4. Background-Image: url(‘./图片.png’) 语法:

<div class="bg-[url('/what_a_rush.png')]">  </div> 

5. background-size: 100% 100% 语法:

bg-[lengh: 100%_100%]
bg-[lengh: 200px_100px]

6. 鼠标hover到头部的菜单导航是出现下面的二级导航, 但是hover 1, 4 ,6 时不出现二级路由导航框. tailwindcss实现代码如下:

7.媒体查询范围的写法

字体颜色在屏幕尺寸小于1460px时显示黄色, 在1464-1500px时显示红色, 在大于1501px时显示绿色

<div class="max-[1460px]:text-[yellow] min-[1461px]:max-[1500px]:text-[red] min-[1501px]:text-[green]">
	{{ $t(item.name1) }}
</div>

等价于

@media screen and (min-width: 1501px) {
	.maxHeight {
		color: yellow;
	}
}
@media screen and (min-width: 1461px) and (max-width: 1500px) {
	.maxHeight {
		color: red;
	}
}
@media screen and (max-width: 1460x) {
	.maxHeight {
		color: green;
	}
}