最近，总有朋友问我搞的那个叫“lipi”的玩意儿到底是今天我就来好好说道说道我整个折腾的过程。

最初的念头

话说我也是被项目里那些乱七八糟的东西搞得头都大了。你知道的，有时候一个项目时间一长，东加一点西改一块，就跟个大杂烩似的，维护起来那叫一个费劲。特别是界面这块，一会儿是这个库，一会儿又是那个手写的样式，看得我眼花缭乱。

我就琢磨着，不行，我得搞个清爽点的东西，至少自己用起来顺手，看起来也舒服。刚好那段时间我关注到一些新的前端技术，比如，还有那个叫shadcn/ui的组件库，以及一直很火的TailwindCSS。我就想，能不能把这些整合起来，搭个自己用着顺手的架子？这个念头一出来，就给它取了个代号，叫“lipi”。没啥特别意思，就是顺口。

开始动手

说干就干，我第一步就是把环境搭起来。

• ：这个没啥说的，直接用官方的脚手架 `create-next-app`，几条命令下去，基础的项目结构就出来了。选它主要是看中它的路由、服务端渲染这些特性，感觉以后扩展起来方便。
• TailwindCSS：这个我之前就用过，原子化的CSS写起来确实效率高。在*项目里集成也很简单，跟着官方文档走，初始化配置文件，然后在全局CSS里引入它的基础样式，基本上就搞定了。



• shadcn/ui：这个是重点。它不是那种传统的组件库，你不是安装一个大包，而是通过命令行工具把需要的组件一个个“复制”到你的项目里。这样做的好处是，组件代码完全在你掌控之中，想怎么改就怎么改，非常灵活。我先是运行了它的初始化命令，配置了下路径什么的。然后试着装了几个常用的组件，比如按钮（Button）、对话框（Dialog）、输入框（Input）。

折腾过程中的小插曲

装shadcn/ui的时候，一开始我还纳闷，怎么装个组件还得跑命令，后来才明白它的设计哲学。它会帮你把组件的原始代码（基于Radix UI和Tailwind CSS）直接放到你的项目目录下，比如 `components/ui`。这样一来，这些组件就跟自己写的一样，想调整样式或者逻辑都特别方便，不用担心被库的更新给覆盖掉或者得用各种`!important`去覆盖样式。

然后就是把这些东西串起来用。比如我做了个简单的表单页面，用了shadcn的Input和Button，然后用TailwindCSS来调整布局和一些细节样式。整个过程下来，感觉代码写起来特别清爽，没有太多冗余的东西。想改个按钮颜色，直接在组件的类名里加个Tailwind的类就行，不用去翻好几层CSS文件。

我还特意试了下*的App Router，这玩意儿跟以前的Pages Router比起来，感觉更现代一些，组件化的思维更彻底。虽然一开始有点不习惯，但用顺了之后发现组织代码确实清晰不少。

目前的效果

现在这个“lipi”项目，就是一个基于、shadcn/ui和TailwindCSS搭建起来的前端开发模板，或者说是一个小型的实践项目。它帮我把这些技术栈整合到了一起，形成了一个我觉得用起来很高效、灵活，而且界面看起来也还挺美观的工作环境。

虽然目前功能还很简单，就是几个示例页面和组件，但我自己平时要做个小工具或者验证个什么想法，直接在这个基础上改改就能快速上手，省了不少重复搭建环境的功夫。感觉就像给自己配了一套顺手的工具箱，用起来得心应手。

后续我可能还会慢慢往里面加点东西，比如状态管理、数据请求封装什么的，让它更完善一些。反正，这就是我折腾“lipi”的整个过程，希望能给大家一点小小的参考。