Piny使用教程

打开VS Code编辑器，进入扩展商店，搜索Piny插件，点击安装按钮完成插件安装，重启VS Code让插件生效。

打开本地存储的Astro、React或Next.js项目，确保项目已经配置好Tailwind CSS依赖，等待项目索引加载完成。

打开需要编辑的组件文件，点击VS Code侧边栏的Piny插件图标，唤起可视化编辑面板，等待面板渲染完成组件预览。

在预览面板中点击选中需要调整样式的元素，在右侧的样式调整面板中修改对应样式属性或添加Tailwind类名，查看实时预览效果。

调整完成后，Piny会自动将所有变更同步到本地项目的源文件中，保存文件后即可在项目运行环境中查看最终效果。