最近新开不少项目，又实在是不想自己去定义特别多的 css 公共样式了，毕竟人多不好维护。于是找到了这个 tailwindcss UI 库。主要是内置了很多常用的 css 样式，前期避免了大量时间去写 css，中间开发也不用专门去维护，方便的一批。
文档地址
中文文档(https://www.tailwindcss.cn/docs)英文文档(https://tailwindcss.com/)
使用说明
- 在 vscode 中安装好
tailwindcss的插件 （tailwind CSS IntelliSense），他会提示你所有的样式，配合这个开发，畅享丝滑。 - 安装
tailwindcss(https://tailwindcss.com/docs/installation/using-postcss)。
npm install -D tailwindcss postcss autoprefixer
- 在项目中使用
// 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文件exportdefault (mode, command) => { returndefineConfig({ css: { postcss: { plugins: [ require("tailwindcss"), require("autoprefixer"), ] } } })} // 5.使用,和正常的class一样的使用方法<pclass='text-blue-400'>就是这样的用法啦</p>
总结
开发起来确实很顺畅，少写了很多很多的样式，除非是UI指定的样式需要写一些，其他的基本样式就没有怎么写过。减少了太多的css时间，更多的时间留在业务逻辑以及项目框架等上面去了。我看谁还不用这个tailwindcss！
