Tailwind 更新在本地服务器上未显示(NextJS、Mac OS M1、Safari)

huangapple go评论124阅读模式
英文:

Tailwind updates not showing on local server (NextJS, mac-os m1, Safari)

问题

I'm using Tailwind for a personal project with NextJS, but the updates of styles get bugged. Like a lot. It's around 50/50 chance that Tailwind will apply the style to the component, or I have to restart the dev server, update tailwind config, reset the localhost URL in the browser and do lots of random things until it works again.

I'm not using any plugins for Tailwind, and I don't think any external thing is causing this (since it's a fresh project of mine and I've had similar issues before).

Here's my package.json if that might help:

{
  "name": "badmood111",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.6",
    "@types/node": "18.13.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "next": "13.1.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.4",
    "tailwindcss": "^3.2.7"
  }
}

Note: I tried googling a fix and all I found was to create a .env file and add "TAILWIND_MODE=watch" and "NODE_ENV=development", but that didn't help.

英文:

I'm using Tailwind for a personal project with NextJS, but the updates of styles get bugged. Like a lot. It's around 50/50 chance that Tailwind will apply the style to the component, or I have to restart the dev server, update tailwind config, reset the localhost url in the browser and do lots of random things until it works again.

I'm not using any plugins for Tailwind, and I don't think any external thing is causing this (since it's a fresh project of mine and I've had similar issues before).

Here's my package.json if that might help:

{
  "name": "badmood111",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.6",
    "@types/node": "18.13.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.34.0",
    "eslint-config-next": "13.1.6",
    "next": "13.1.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "prettier": "^2.8.4",
    "prettier-plugin-tailwindcss": "^0.2.4",
    "tailwindcss": "^3.2.7"
  }
}

Note: I tried googling a fix and all I found was to create a .env file and add "TAILWIND_MODE=watch" and "NODE_ENV=development", but that didn't help.

答案1

得分: 1

我解决这个问题的方法当然是在本地主机上关闭我的广告拦截扩展程序。这解决了我遇到的每个实时重新加载问题。

如果你遇到这个问题,很可能是某个扩展程序在造成这个问题。JS工具在处理可能引起这个问题的其他问题方面做得相当不错。

英文:

My solution to this issue was of course to turn my ad-blocker extension off on localhost. This fixed every live-reload issue I was having.

If you're having this problem, chances are it's an extension doing it. JS tooling is getting quite good at handling the other issues that might cause this.

答案2

得分: 0

没有解决方案适用于我,但通过浏览互联网,我注意到所有遇到这个问题的人都在使用Mac电脑...

尝试在Chrome上而不是Safari上运行本地服务器,它可以正常工作。

英文:

No solution worked for me, but by scrolling the internet I noticed that all of the people experiencing this issue were using Mac computers...

Tried running the local server on Chrome instead of Safari and it works

答案3

得分: 0

将以下内容放入 postcss.config.js 文件中:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
英文:

Put these lines in postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

huangapple
  • 本文由 发表于 2023年3月10日 01:45:52
  • 转载请务必保留本文链接:https://go.coder-hub.com/75688264.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定