#Incomplete CSS Rendering while deploying on vercel

54 messages · Page 1 of 1 (latest)

quiet lodge
#

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..

grand fernBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

quiet lodge
#

Incomplete CSS Rendering while deploying on vercel

pliant storm
#

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?

quiet lodge
# pliant storm can you share your tailwind.config.js? 
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;
quiet lodge
quiet lodge
#

@pliant storm can you pls help sadjoe

pliant storm
quiet lodge
#

or the tree layout

pliant storm
#

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

quiet lodge
# pliant storm tree layout - your project directory structure 
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```
pliant storm
quiet lodge
#

yeah

pliant storm
#

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

quiet lodge
#

ok wait

#

@pliant stormis this okay?

image.png
pliant storm
#

yeah

#

first of all, check if it's working fine on your local

quiet lodge
#

it worked

#

damn

#

but how

#

and why

pliant storm
#

okay let me explain

#

to conclude, avoid using camel casing, I would recommend snake casing

pliant storm
quiet lodge
pliant storm
#

it was the casing

#

your directory was "Components" and in your tailwind config, it was "components"

#

it worked on your local but didn't work in your server

quiet lodge
#

pikachu_shocked oh yes I noticed it just now

pliant storm
#

that was why some of your tailwind classnames were applied

pliant storm
#

you can mark solution if it helped you!

quiet lodge
#

lemme change it back to Components

pliant storm
#

??? why?

quiet lodge
pliant storm
#

use "components"

quiet lodge
#

yes using it now in lowercase only

pliant storm
#

the reason we didn't direclty rename "components" from "Components" is becasue github won't notice it

quiet lodge
#

hm

quiet lodge
grand fernBOT