0

o/

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

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

我的配置正是Remix 文档中描述的配置。

环境

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

应用程序/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: [],
};

包.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

谢谢你的帮助

4

2 回答 2

0

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

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

于 2022-01-29T23:59:08.677 回答
0

您可以尝试将其添加到tailwind.config：

{
safelist: process.env !== 'production' ? [
   {
     pattern: /.*?/,
   },
 ] : [],
}
于 2022-02-09T11:32:44.397 回答