tailwindcss

TailwindCSS本身是一个PostCSS插件，在使用时，仅需要根据样式来书写类名，便可以实现任意的样式组合。公司的css解决方案便是使用的winidcss加less，真的香，可能上手的话，需要一点点的适应时间

结合自己的使用体验的话，我觉得最大的优势在于，不用再去为取类名而苦恼了，写起来真的很爽，劣势也比较明显，有那么一点不好的维护

官网https://www.tailwindcss.cn/docs/installation

安装

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

配置文件的话两个

1. postcss.config.js文件，这里的配置主要是添加tailwindcss的插件。
2. tailwind.config.js文件，主要进行扫描规则、主题、插件等配置。

正常使用(宽5rem，高5rem，背景色：#50d71e)

 <div class="w-20 h-20bg-[#50d71e]"> Hello world! </div>

也能实现一些伪类效果 如hover:

<div class="w-20 h-20bg-[#50d71e] hover:w-30"> Hello world! </div>

实现复杂的效果的话还是需要使用自定义类的。

tailwindcss也能有效减少css的打包体积，项目打包后，一般css不会超过10kb。不过，一般开发中，其实更推荐使用winidcss，拥有更快的打包体积！