Ngrok与TailwindCSS配置使用记录

一、Ngrok 的使用#

在开发过程中，我需要将本地服务映射到公网，借助 Ngrok 实现内网穿透真是解了燃眉之急。具体步骤如下：

1. 下载安装
   打开 Ngrok Windows 下载页面，选择与你系统匹配的最新版本进行下载。下载后根据官方文档完成基本配置。

2. 使用命令映射端口
   配置完成后，在命令行中输入

   1
   ngrok http <你的服务端口>

   这样就能将本地服务端口通过 Ngrok 映射到公网，非常方便。

小贴士： 在配置过程中，可能会遇到认证或端口映射问题，查阅官网文档或相关社区讨论往往能帮助你快速解决问题。

二、tailwindcss 的项目创建与配置#

使用 tailwindcss 进行前端样式开发也经历了一些摸索，这里整理了几种常用的项目创建方式和配置注意事项：

1. 项目创建方式
   我常用的有两种方法：

   • 使用 Vite 创建项目：
     执行命令：

     1
     npm create vite@latest

     然后根据提示选择你需要的框架（React、Vue 等）。
   • 直接使用各框架的创建工具：
     • Vue 项目：npm create vue@latest
     • React 项目：npx create-next-app@latest

2. tailwindcss 的配置

   • 如果你使用的是 Vite 项目，可以参考 TailwindCSS 使用 Vite 安装文档 来进行配置。注意，这里的文档基于最新的 tailwindcss-v4 配置。
   • 坑点提示：
     • 如果在配置过程中出现问题，比如提示需要安装 Microsoft 的一些运行文件，可以参考 TailwindCSS GitHub 讨论 的相关说明。
     • tailwindcss-v4 下直接运行 npx tailwindcss init 可能会报错，因为这是 v3 的命令。详细的配置步骤建议参考 v3 版的安装指南。
   • 对于其他框架的项目，请参照 TailwindCSS 官方框架指南 进行相应配置。

3. 推荐实践
   综合经验，我建议：

   • 使用 Vite 快速创建项目，体验轻量高效。
   • 采用 pnpm 来安装依赖包，这样更节省磁盘空间且安装速度快。
   • 根据最新的 tailwindcss-v4 配置文件进行调整，确保使用的是最新功能和最佳实践。