背景
TailwindCSS作为一种现代化的CSS框架，以其高度的定制性和灵活性受到前端开发者的青睐。结合当前技术栈来参考，特别适用于Vite和Vue框架的组合。
借此，近期新项目的需求是做一套公司官网前端界面，于是就尝试先做一套个人介绍的前端站点给大家分享使用心得，总体来说酷酷好用！对于本人来说写更多的语义化css不如原子化用着方便、效率高且易懂，对于喜欢语义化开发方式的友友们来说无疑是见了KFC走不动的那种噢。
总之，前端css框架有多种，比如现在流行的ElementPlus、UnoCss、AntDesign等各有各的优缺点，满足业务需求的就是一个好的框架，相对于有完整业务设计体系的公司来说可能不太会接受这套框架系统，相对于新生代公司，没有自己的一套成熟业务体系来说，从零部署，这时候Tailwind的优势就展现出来了。
按照设计稿一比一的还原出来就是很棒的作品！
项目的搭建
部署基本的框架是很简单的，安装tailwind CSS 的方法很多，包括官方的CLI工具，PostCSS，CND，另外各种开发框架也会有自己的提供方式，链接在此：tailwindcss.com/docs/instal…
除此之外，开发当中可以加入一款vscode中的插件：Tailwind CSS IntelliSense，智能的代码提示，编写代码路上的得力助手。
marketplace.visualstudio.com/items?itemN…
Tailwind CSS 主张让你无需离开 HTML 即可快速构建网站，并有许多非常非常实用的优点：
- 对 class 极致的封装，最大程度提高复用性
- 易扩展的的各种自定义配置
- 构建时清除未引用的 css 样式，解决生产环境 CSS 冗余的问题
- 卓越的响应式开发体验
- 多层级的选择、函数、指令、布局、动画、扩展插件的使用等等
项目大致结构
从项目初期的·pnpm create vite·创建项目，配置完一些常用的插件，就是布局，目前没有做多种自定义布局可供使用，PC端和移动端均采用上下布局，但各有各的不同样式，说到这里其实就是运用到Tailwind的特性。
<template>
<div class="max-w-7xl mx-auto flex flex-col relative">
<myHeader tabbar-height="lg:h-[60px]" />
<div class="md:mt-[50px] max-sm:pb-[50px] ">
<router-view />
<div>
<a href="">
备案：xxxxx
</a>
</div>
</div>
</div>
<footer
class="block md:hidden fixed bottom-0 left-0 right-0 rounded-t-3xl border border-[#383838] bg-[#121212] bg-opacity-80 backdrop-blur-md backdrop-opacity-90">
<nav class="flex justify-around py-4 text-xs">
<router-link to="/index" class="text-gray-300 hover:text-white">主页</router-link>
<router-link to="/home" class="text-gray-300 hover:text-white">关于</router-link>
<router-link to="/ceshi" class="text-gray-300 hover:text-white">作品</router-link>
<router-link to="/ceshi" class="text-gray-300 hover:text-white">博客</router-link>
</nav>
</footer>
</template>
上方片段代码中，是包含了两端（电脑端、移动端）的适配，通过Tailwind的原子化css，控制哪些元素在某个断点处的隐藏和显示，在某些断点下呈现什么样式，非常便携。
PC端首页界面如图所示：
移动端首页界面如图所示：
来自居多大牛的评价汇总
| 来自居多大牛的评价汇总 | |
|---|---|
| Q：可维护性比较差，多人共同完成的项目还要去维护，调试这得多复杂！ | |
| A: 起初也并不接受这样的开发方式，后期封装组件、布局的调整会造成很多问题，不过，Tailwind作者考虑到了这个问题，可以直接在css in js里面的theme值去自定义主题等 | |
| C：uno也不错的，tailwind的增强版，不过没有特别的颠覆所以估计用户量赶不上 | |
| D:之前在公司的一个项目上推荐了 tailwindcss 在分享会上大家的第一反应也是”nonono”，觉得有学习成本，不好维护之类的问题。然而在和组长一起的强推（直接提交了加了 tailwindcss 的 merge上去）和几次代码 review 后，很快哈，我也没怎么天天强推，大家都很熟练的用起来了，维护也根本不是事儿，甚至有小伙伴自发把原来的写的模块用 tailwind 重构了。大家的一致感觉“维护起来真方便” |
预览
由于时间的关系，个人介绍博客页面初步轮廓构成，后期还有更多的业务功能总结在其中，如有创意可以关注公众号【小李的李li】分享，共同创作下去。
