Next.js Discord

Discord Forum

NextJS + Tailwind

Unanswered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I just finished from my project and so I went to publish my project for production but realized something was completely off. Tailwind is working in developer mode (npm run dev) but it's not working in production. Any ideas?

57 Replies

Standard Chinchilla
What are the errors
@Standard Chinchilla What are the errors
West African LionOP
No errors really
Standard Chinchilla
What isn’t working
West African LionOP
Tailwind
Standard Chinchilla
I get that lol
West African LionOP
It's working just fine in development but not in production
Standard Chinchilla
What the elements are not styled?
West African LionOP
I can show you a comparison if you want
Standard Chinchilla
Sure
Also when did you start your project. Maybe you need to update
West African LionOP
My project started at Feb 1
Standard Chinchilla
Okay try “npm run build” then “npm run start”
Also make sure you have autoprefixer files and that there are no errors in tailwind config
West African LionOP
postcss config file
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Tailwind config file
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;
I get some kind of error btw when I use npm run dev

âš  For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
uncaughtException [Error: EPERM: operation not permitted, open 'C:\Users\pc\Desktop\Portfolio\my-blog\.next\trace'] {
  errno: -4048,
  code: 'EPERM',
  syscall: 'open',
  path: 'C:\\Users\\pc\\Desktop\\Portfolio\\my-blog\\.next\\trace'
}
Standard Chinchilla
This might have something to do with it:
https://nextjs-forum.com/post/1210676735113175120
West African LionOP
I fixed the error of sharp
Still didn't fix the tailwind issue
Standard Chinchilla
can you see another error G
@Standard Chinchilla can you see another error G
West African LionOP
no further errors
both build and start work just fine
Standard Chinchilla
jeez
try updating tailwind and postprefixer
It might help
West African LionOP
how you do so
Standard Chinchilla
not sure what the bug can be
npm update
West African LionOP
alright
@Standard Chinchilla npm update
West African LionOP
I updated and pushed again
guess what
it doesn't work 😂
Standard Chinchilla
haha
Did you try turning it off and on again
West African LionOP
turning off what?
Standard Chinchilla
It
everything
West African LionOP
yeah
im gonna do something insane
make a new next js project and move files
West African LionOP
still doesn't work
Standard Chinchilla
haha yep that's the only reasonable solution
fuck
West African LionOP
cursed
Standard Chinchilla
Maybe you have a dependency that is messing things up
West African LionOP
West African LionOP
yeah I tried a lot of things it doesn't really work
it's so weird
West African LionOP
@Standard Chinchilla
I fixed it
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};
export default config;


My components folder is capitalized which explains why I had an error
the answer was right in front of my eyes
lol
Standard Chinchilla
Hahaha
Good shit brotha
It’s always the obvious things that are the hardest to solve 😂😄😅
Original message was deleted
Yassaaa
if its fixed then you should mark it as done 🙂