对于 WSL2 上的 Tailwind，热重载无法正常工作答案

【问题标题】：Hot reload not working properly for Tailwind on WSL2对于 WSL2 上的 Tailwind，热重载无法正常工作
【发布时间】：2022-04-20 23:23:25
【问题描述】：

刚刚使用 Remix 和 TailwindCSS 开始了一个新的个人项目。原始 Remix 安装一切正常，但是当我添加 Tailwind 时 css 热重载被破坏。应用添加的第一个类，但不应用下一个。

我认为它一定与 WSL2（Linux 的 Windows 子系统）有关，因为它在我的 linux 笔记本电脑上运行良好。

我的配置正是Remix documentation 上描述的配置。

环境

WSL2 with Ubuntu 20.04
node: v16.13.2 (also tried with v17.4.0)
npm: v8.4.0

app/root.tsx

...
import tailwindStylesUrl from "./tailwind.css";

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: tailwindStylesUrl,
    },
  ];
};
...

tailwind.config.js

module.exports = {
  content: ["./app/**/*.{ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

package.json

...
"scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch",
    "postinstall": "remix setup node",
    "start": "remix-serve build"
  },
  "dependencies": {
    "@remix-run/react": "^1.1.3",
    "@remix-run/serve": "^1.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remix": "^1.1.3"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.1.3",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "concurrently": "^7.0.0",
    "tailwindcss": "^3.0.17",
    "typescript": "^4.1.2"
  },
...

控制台

$ npm run dev

> dev
> concurrently "npm run dev:css" "remix dev"

[0]
[0] > dev:css
[0] > tailwindcss -o ./app/tailwind.css --watch
[0]
[1] (node:16121) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
[1] (Use `node --trace-warnings ...` to show where the warning was created)
[1] (node:16121) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
[1] Watching Remix app in development mode...
[1] ???? Built in 258ms
[1] Remix App Server started at http://xxx.xx.xxx.xx:3000
[0]
[0] Rebuilding...
[0] Done in 117ms.
[1] ???? File changed: app/tailwind.css
[1] ???? Rebuilding...
[1] ???? Rebuilt in 48ms
[0]
[0] Rebuilding...
[0] Done in 14ms.
[1] ???? File changed: app/root.tsx
[1] ???? Rebuilding...
[1] ???? Rebuilt in 51ms

谢谢你的帮助？？？？

【问题讨论】：

您的项目是否位于/mnt/c（或任何其他 Windows 驱动器下？
不，我所有的项目文件都直接在wsl中。
@NotTheDr01ds 我遇到了这个问题，VS Code 已连接到 WSL。我的项目也在/mnt/c/Users/MyUsername/project
@Cyrus 在这种情况下，您可能看到与this answer 相同的根本原因。 VSCode 可能不会为 Tailwind 触发它；我只是不确定。该答案中的至少选项 #2（移动项目）或 #4（使用 WSL1）应该有效。
@NotTheDr01ds 就是这样！也许您应该将此添加为下一个人的答案

标签： tailwind-css wsl-2 hot-reload remix.run

【解决方案1】：

你可以试试把它添加到tailwind.config：

{
safelist: process.env !== 'production' ? [
   {
     pattern: /.*?/,
   },
 ] : [],
}

【讨论】：

感谢您的回答。看来问题是由我的 VSCode 设置引起的（未启用 WSL 远程）。

【解决方案2】：

不理想，但我找到了出路。如果我使用 tailwind 作为 postcss 插件，文件会正确地热重载。 ?‍♀️

编辑：我想我发现了问题所在。我没有注意到我的 VSCode 不再运行 WSL 远程。自从我重新激活它后，一切正常。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

对于那些遇到此问题的人，热重载功能在 WSL2 中不起作用的一个可能原因（尽管根据 cmets，它不是针对该特定用户）是该项目存储在 Windows 驱动器上，而不是比在 WSL2 ext4 文件系统中。

目前，9P 文件系统驱动器上的 WSL2 不支持热重载使用的 Linux API inotify（例如，装载到 WSL2 中的 Windows 驱动器）。

通常至少有三种解决方案：

将项目文件移动到 WSL2 中的 ext4 文件系统中，例如，/etc/home/<username>/src 或 /etc/home/<username>/projects。此文件系统支持 inotify。
使用 WSL1 -- 大多数 Web 开发不需要 WSL2 的本机 Linux 内核功能，并且在 WSL1 下也能正常工作（有时更好）。您可以通过运行 wsl --set-version <distroname> 1 从 WSL2 切换到 WSL1，不过我建议先备份（通过 wsl --export），以防转换出现问题。
正如 OP 在这种情况下所做的那样，通过 VSCode 和 “Remote - WSL” 扩展访问项目。因为一旦他们纠正了 “WSL - Remote” 扩展的问题，它又开始为 OP 工作，我仍然怀疑 inotify 可能是根本原因。

【讨论】：