Question 46086 in CSS Question posted in
Some basic documentation can be found here.

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

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    Put these lines in postcss.config.js:

    module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search