logo

最近新开不少项目,又实在是不想自己去定义特别多的 css 公共样式了,毕竟人多不好维护。于是找到了这个 tailwindcss UI 库。主要是内置了很多常用的 css 样式,前期避免了大量时间去写 css,中间开发也不用专门去维护,方便的一批。

文档地址

推荐看英文原文档,因为他是最新的版本,而中文文档只是 2.2.16 的,英文文档早已在 3.1.6 了。

中文文档

英文文档

使用说明

1
npm install -D tailwindcss postcss autoprefixer
  • 在项目中使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 1.创建postcss.config.ts文件
module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
]
}

// 2.创建tailwind.config.ts文件
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
theme: {
extend: {},
},
plugins: [],
}

// 3.在main.ts中引入样式
import "tailwindcss/tailwind.css"

// 4.修改vite.config.ts文件
export default (mode, command) => {
return defineConfig({
css: {
postcss: {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
]
}
}
})
}

// 5.使用,和正常的class一样的使用方法
<p class='text-blue-400'>就是这样的用法啦</p>

总结

开发起来确实很顺畅,少写了很多很多的样式,除非是UI指定的样式需要写一些,其他的基本样式就没有怎么写过。减少了太多的css时间,更多的时间留在业务逻辑以及项目框架等上面去了。我看谁还不用这个tailwindcss!