Next.js Discord

Discord Forum

Incomplete CSS Rendering while deploying on vercel

Answered
Peruvian Inca Orchid posted this in #help-forum
Open in Discord
Peruvian Inca OrchidOP
The only CSS file in my project which's globals.css is not processed completely because of which the styles are not being displayed properly.
By running it locally, everything works fine (using npm run dev as well as npm run build, npm start).
Please help me out..
Answered by James4u
your directory was "Components" and in your tailwind config, it was "components"
View full answer

51 Replies

Peruvian Inca OrchidOP
this is the final output of the above:
https://amanjaiswal-git-main-ajais980s-projects.vercel.app
James4u
some of the chunks are processed
npm run build & npm run start should be the same as production build on vercel
can you share your tailwind.config.js?
@James4u can you share your tailwind.config.js?
Peruvian Inca OrchidOP
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: {},
  },
  plugins: [
    require('tailwind-scrollbar')
  ],
};
export default config;
@James4u `npm run build & npm run start` should be the same as production build on vercel
Peruvian Inca OrchidOP
but this gives me the perfect output, when locally done
Peruvian Inca OrchidOP
@James4u can you pls help :sadjoe:
@James4u can you share your workspace directory?
Peruvian Inca OrchidOP
you mean the whole source code?
or the tree layout
James4u
tree layout - your project directory structure
want to see if your tailwind config is covering all of your pages and components
I guess it should be as nothing is broken in the dev but anyway
@James4u tree layout - your project directory structure
Peruvian Inca OrchidOP
Portfolio
│   .gitignore
│   next-env.d.ts
│   next.config.ts
│   package-lock.json
│   package.json
│   postcss.config.js
│   README.md
│   tailwind.config.ts
│   tsconfig.json
│
├───@types
│   └───splidejs
│           index.d.ts
│
├───app
│       globals.css
│       layout.tsx
│       page.tsx
│
├───Components
│       About.tsx
│       BackgroundCircles.tsx
│       ContactMe.tsx
│       Header.tsx
│       Hero.tsx
│       Projects.tsx
│       Skills.tsx
│
└───public
        ffa.png
        pfp.jpeg
        serum.png
Peruvian Inca OrchidOP
yeah
James4u
so let's do this
rename your "Components" => "my-components" and also change your tailwind config "components" => "my-components"
and then commit and push your changes
Peruvian Inca OrchidOP
ok wait
Peruvian Inca OrchidOP
@James4uis this okay?
James4u
yeah
first of all, check if it's working fine on your local
@James4u first of all, check if it's working fine on your local
Peruvian Inca OrchidOP
💀 bro wtf
it worked
https://www.amanjaiswal.me/
damn
but how
and why
James4u
okay let me explain
to conclude, avoid using camel casing, I would recommend snake casing
@Peruvian Inca Orchid and why
James4u
btw, didn't you notice what was the issue?
@James4u btw, didn't you notice what was the issue?
Peruvian Inca OrchidOP
nope
James4u
it was the casing
James4u
your directory was "Components" and in your tailwind config, it was "components"
Answer
James4u
it worked on your local but didn't work in your server
Peruvian Inca OrchidOP
:pikachu_shocked: oh yes I noticed it just now
James4u
that was why some of your tailwind classnames were applied
you can mark solution if it helped you!
Peruvian Inca OrchidOP
lemme change it back to Components
James4u
??? why?
@James4u ??? why?
Peruvian Inca OrchidOP
to see if it works again or not lol
James4u
use "components"
Peruvian Inca OrchidOP
yes using it now in lowercase only
James4u
the reason we didn't direclty rename "components" from "Components" is becasue github won't notice it
Peruvian Inca OrchidOP
hm
@James4u the reason we didn't direclty rename "components" from "Components" is becasue github won't notice it
Peruvian Inca OrchidOP
thanks a lot brother for giving your time and helping me
:pray: