tailwind使用指南

前言

tailwind学习曲线比较陡峭，熟悉之后会方便开发，但熟悉之前需要频繁查文档。下面讲一下如何使用tailwind及常用样式，帮助快速上手。我使用的技术栈是vite+vue。

安装

安装

npm install -D tailwindcss postcss autoprefixer 
npx tailwindcss init -p

添加配置

// tailwind.config.js 
export default { 
    content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], 
    theme: { extend: {}, }, 
    plugins: [], 
}

引入tailwind样式

// style.css 
@tailwind base; 
@tailwind components; 
@tailwind utilities;

在main.ts中导入该文件。

使用

<h1 class="text-3xl font-bold underline"> Hello world! </h1>

常用样式

tailwind预设了一部分属性值，比如 w-1 表示 width: 0.25rem; /* 4px */。但新手可以不使用预设值，直接用 \[\] 设置自定义的值。

宽高

class	属性
w-10px	width: 10px;
h-10px	height: 10px;
min-w-10px	min-width: 10px;
max-w-10px	max-width: 10px;
size-10px	width: 10px;height: 10px;

布局

class	属性
block	display: block;
flex	display: flex;
hidden	display: none;
box-border	box-sizing: border-box;
float-left	float: left;
overflow-hidden	overflow: hidden;
overflow-x-auto	overflow-x: auto;
absolute	position: absolute;
top-10px	top: 10px;

flex

class	属性
flex-col	flex-direction: column;
flex-nowrap	flex-wrap: nowrap;
justify-center	justify-content: center;
items-center	align-items: center;

margin & padding

class	属性
m-10px	margin: 10px;
mx-10px	margin-left: 10px;margin-right: 10px;
ml-10px	margin-left: 10px;

padding就是把m换成p。x 代表left和right。y代表top和bottom。

font

class	属性
text-16px	font-size: 16px;
font-bold	font-weight: 700;
text-center	text-align: center;
tracking-2px	letter-spacing: 2px;
text-#000	color: #000;
line-clamp-2	超出2行省略
leading-30px	line-height: 30px;

背景

class	属性
bg-#000	background-color: #000;
bg-url(/src/assets/xx.png)	background-image: url(/src/assets/xx.png);
bg-no-repeat	background-repeat: no-repeat;
bg-cover	background-size: cover;
bg-center	background-position: center;

border

class	属性
border-2px	border-width: 2px;
border-#000	border-color: #000;
border-solid	border-style: solid;
rounded-4px	border-radius: 4px;
divide-#000	颜色为#000的分割线

动画

class	属性
translate-x-10px	transform: translateX(10px);
scale-1.1	transform: scale(1.1);
rotate-60deg	transform: rotate(60deg);
origin-center	transform-origin: center;
transition-height	transition-property: height;
duration-2000ms	transition-duration: 2000ms;
ease-linear	transition-timing-function: linear;
delay-2000ms	transition-delay: 2000ms;

animation推荐theme.extend中设置。

交互

class	属性
cursor-pointer	cursor: pointer;
pointer-events-none	pointer-events: none;

自定义主题

在tailwind.config.js中可以自定义主题。可以设置的样式包括screens 、colors 、borderRadius等等。

在theme中设置表示覆盖某属性原来的所有选项。但，如果想保留某属性默认的选项，但又想添加新的选项，可以在theme.extend中配置。

比如，很多地方都需要设置border-radius: 6px，那可以进行如下配置：

module.exports = { 
    theme: { 
        borderRadius: { 
            DEFAULT: '6px', 
            'lg': '12px', 
        }, 
    } 
}

使用如下：

<div class="rounded"></div>
<div class="rounded-lg"></div>

第一个div的border-radius为6px，第二个div的border-radius为12px。

可能遇到的问题

动态设置class

利用 data-* 属性

<div data-x="a" class="bg-red data-[x=a]:bg-green"></div>

特殊属性不支持

如果某些属性，tailwind不支持，可以用 @layer utilities {} 设置

@layer utilities { 
    .stroke-progress { 
        -webkit-text-stroke: 0.4rem #010507; 
    } 
}

使用tailwind同时使用UI组件库

如果舍不得UI组件的某些功能，想和组件库搭配使用

可以用 @layer components{} 修改UI库组件的样式

@layer components { 
    .el-dialog {} 
}

elementplus下拉框样式

tailwind+elementplus，给组件的下拉框设置样式时，需要设置 :teleported="false" ，@layer才会生效。