From "No CSS" to "Compiled Successfully"

Troubleshooting Tailwind + Create-React-App on macOS (iCloud folder)

We hit three independent problems that stacked into one nasty red screen.
Below is a walk-through of the root causes and the steps that fixed each one.

---

1. File-ownership chaos after using sudo

Symptoms

• npm and npx threw EACCES / "permission denied" errors.
• The Tailwind CLI couldn't be found (sh: tailwind: not found).

Cause

The first install was run with sudo, so everything inside:

~/.npm          # global package cache
node_modules/   # project dependencies

became root-owned.
Subsequent non-sudo commands couldn't overwrite those files.

Fix

# give your user ownership of the global cache
sudo chown -R $USER:$(id -gn) ~/.npm

# give your user ownership of the whole repo
cd <repo-root>
sudo chown -R $USER:$(id -gn) .

# reinstall dependencies without sudo
cd frontend
rm -rf node_modules package-lock.json
npm install

---

2. Tailwind v4 vs. Create-React-App v5

Symptoms

CRA compiled until PostCSS hit this error:

Error: It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.
The PostCSS plugin has moved to a separate package...

Cause

Tailwind CSS v4 splits its PostCSS layer into @tailwindcss/postcss and removes the old tailwindcss plugin entry-point.
CRA v5's internal Webpack config still does:

postcss-loader → plugins: { tailwindcss: {}, ... }

so it always require('tailwindcss'), triggering the error.

Fix options

Option A (what we tried first): keep Tailwind v4 and patch PostCSS config.
This works in Vite/ejected setups, but CRA continues to hard-require tailwindcss, so the build still fails.

Option B (chosen solution): downgrade to Tailwind v3, fully compatible with CRA v5.

# remove v4 packages
npm uninstall tailwindcss @tailwindcss/cli @tailwindcss/postcss

# add v3
npm install -D tailwindcss@3.4.4

---

3. PostCSS configuration reset

For Tailwind 3 the classic config works:

// frontend/postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Your src/index.css should contain:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

4. Final steps & verification

1. Free port 3000:

   lsof -ti:3000 | xargs kill -9
   

2. Start the dev server:

   npm start
   

3. Browser shows the styled UI, terminal prints "Compiled successfully!"

---

Take-aways

1. Never run npm install with sudo inside a project folder.
2. CRA v5 + Tailwind v4 are incompatible out of the box; use Tailwind v3 or switch to Vite/Next/etc.
3. When Mac ownership errors appear, reclaim with sudo chown -R $USER . and reinstall dependencies.
4. Keep postcss.config.js minimal—CRA only reads it at server start-up.

With those tweaks the Orin Nano dev kit now serves a fully styled React interface powered by Flask system-stats on the back-end. Happy coding!