Piny

什么是Piny？

Piny 是一个强大的可视化编辑器，可直接在 Visual Studio Code、Cursor 和 Windsurf 中运行。它支持 Tailwind CSS、Astro、React 和 Next.js。所有编辑都直接在代码中进行，确保没有抽象层、没有云服务和锁定。这使得开发人员能够以可视化的方式编辑代码，导航组件，并在没有特殊库或额外设置的情况下简化样式。Piny 旨在提供速度和控制，可以与编码助手一起或独立使用，兼容任何 React 或 Next.js 项目。

如何使用 Piny？

要使用 Piny，请首先直接从您首选 IDE 的扩展市场（例如 VS Code Marketplace）安装 Piny 扩展。安装完成后，右键单击代码中的任意位置，选择 "在 Piny 中编辑"即可开始使用可视化工具进行样式编辑。Piny 适用于 Astro、React 或 Next.js 项目。

Piny 的核心功能

可视化 Tailwind 控件
Tailwind 类检查器
在任何地方编辑 Tailwind 类
组件导航
AI 驱动的拖放
可视化选择
同时编辑多个元素
浏览整个项目
导入自定义 Tailwind 主题

Piny 的使用案例

#1 使用 Tailwind CSS 进行可视化样式设计
#2 以有序的树状结构管理复杂的 Tailwind 样式
#3 在字符串、变量和非 React/Astro 代码中编辑 Tailwind 类
#4 快速跳转组件并关联相关的预览路由
#5 使用 AI 辅助拖放可视化构建 UI
#6 同时选择和样式化多个元素
#7 在整个项目中探索和导航组件
#8 使用自定义 Tailwind 配置自定义可视化控件