可以使用 CodeSandbox 或 StackBlitz 来现场编写代码，但是这些线上编辑器都有一些问题，这里总结一下。

首先一定要保证梯子正常工作，最好使用专线的梯子；然后就是节点一定要好，反正就是速度一定要快，否则就会卡在网页的验证环节。

code sandbox 和 stackblitz简介

一句话：二者都可以，但是stackblitz要快一些，优先选择它。

这两个都是目前前端开发最主流的浏览器端在线 IDE（集成开发环境）。它们的核心价值是：让你不需要在本地配置 Node.js、环境依赖或克隆代码，点开网页就能直接写代码并看到实时预览。

虽然它们很像，但底层原理和适用场景略有不同。下面为你梳理它们的核心使用方法和选型建议。

1. StackBlitz：速度极快，适合现代前端框架

StackBlitz 最大的特点是采用了他们自研的 WebContainers 技术。简单来说，它直接在你的浏览器里运行了一个 Node.js 环境，而不是在远程服务器上。

核心使用方法

• 秒级开箱： 访问 stackblitz.com，点击 "New Project"，或者直接在浏览器地址栏输入快捷链接。例如输入 node.new、vite.new 或 next.new，就能直接创建一个干净的对应环境项目。
• 本地速度： 因为依赖和编译全在你的浏览器本地（通过 WebAssembly）运行，它的 npm install 和热更新速度快到难以置信，而且即使断网（只要页面没刷新）也能继续运行。
• 一键同步 GitHub： 登录后可以一键把当前在线代码变成一个 GitHub 仓库，或者直接打开现有的开源项目（在 GitHub 仓库 URL 的 github.com 前面加上 pr.new/ 即可直接在 StackBlitz 中打开该仓库）。

2. CodeSandbox：功能强大，适合全栈与团队协作

CodeSandbox 发展得更早，它的传统模式（Sandbox）基于浏览器端的打包器，而其现代模式（Devboxes）则是在云端微型虚拟机上运行。

核心使用方法

• 全栈支持（Devboxes）： 不仅能写前端，因为它是云端虚拟机，你可以运行 Python、Go、Rust、Node.js 后端服务或 PostgreSQL 数据库。
• 多人实时协作： 类似 Google Docs。你可以生成一个分享链接给同事，多个人可以同时在同一个文件里敲代码，看同一个预览画面，非常适合远程面试、结对编程（Pair Programming）或 Debug 答疑。
• VS Code 本地连接： 如果你不习惯网页版编辑器，CodeSandbox 支持通过插件，让你直接用本地的 VS Code 连接到它云端的开发环境里编写代码。

核心功能对比与操作直达

在stackblitz里面，我创建了一个react + tailwindcss项目，但是当我更新了className之后，样式并没有更新；当我重启服务之后npm run dev，样式才显示出来，怎么解决？

没有什么好的解决办法，使用code sandbox更不好，因为里面默认不是使用vite来创建项目的，体验会更慢一点。

只能自己写样式了，我看youtuber面试题那个也是自己写样式的。

1. 可以使用行内样式，虽然看上去代码会乱一些，但是绝对有效：

<div style={{
  backgroundColor: '#3b82f6',
  color: 'white',
  padding: '2rem',
  borderRadius: '12px',
  fontSize: '1.25rem',
  fontWeight: 'bold',
  marginBottom: '1rem'
}}>
  这是标题
</div>

2. 普通 CSS 文件 + className

在 src/index.css 或 App.css 中正常写 CSS：

​x
.card {
  background-color: #3b82f6;
  color: white;
  padding: 2rem;
  border-radius: 12px;
  font-weight: bold;
}
​
.btn-primary {
  background-color: #2563eb;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
}

然后在组件中使用 className="card"。优点：样式热更新通常比 Tailwind 稳定。

3. CSS Modules（适合中大型项目）文件名用 .module.css，然后：

xxxxxxxxxx
import styles from './App.module.css';
​
<div className={styles.card}>...</div>

优先选择第一或者第二种方法。

向面试官解释使用tailwind有问题

I understand you'd like me to use Tailwind CSS. However, I'm experiencing hot reload issues with Tailwind on StackBlitz — changes to className aren't updating in real-time, which is a known limitation of the platform's WebContainer environment. To make the best use of our time and clearly demonstrate the logic and component structure, I'll first implement the UI using inline styles in React. This ensures styles update immediately. Once the functionality is complete, I can replace the inline styles with Tailwind classes if you'd like.

stackblitz里面，我写标签的时候，比如说div，然后按tab键，不能自动闭合标签，可以解决吗？

可以，需要在user settings里面进行配置。

添加以下配置：

xxxxxxxxxx
"html.autoClosingTags": true,
  
// 关键配置：对 JSX / TSX 生效
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
​
// Emmet 配置（推荐一起开启，写标签更快）
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
}

如果记不住，可以只配置这个，也是有效的：

xxxxxxxxxx
"html.autoClosingTags": true,

stackblitz现在默认的是我代码已更新它就重新渲染，怎么设置成保存文件代码之后，它才重新渲染？

需要修改配置，将compile trigger改为save才触发。

stackblitz的热更新有问题，需要这样做

默认使用的是npm run dev来启动项目，但是可以使用npm run dev -- --force来强制 Vite 清空缓存并重新构建项目。