The project seems out of place

[kalchaqui (Kalcha)]

Good morning, could someone guide me with a question, I see the vscode project fine when I run: npm run dev, and when I run: npm run build. and when I do: vercel --prod It uploads it, but everything shows up out of place. What could it be.? I share. thank you!

Dashboard

log:
[21:05:52.151] Running build in Washington, D.C., USA (East) – iad1
[21:05:52.422] Retrieving list of deployment files…
[21:05:52.866] Previous build cache not available
[21:05:52.968] Downloading 32 deployment files…
[21:05:53.870] Running “vercel build”
[21:05:54.437] Vercel CLI 35.1.0
[21:05:54.854] Installing dependencies…
[21:05:58.992] npm warn deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see Request’s Past, Present and Future · Issue #3142 · request/request · GitHub
[21:06:00.117] npm warn deprecated har-validator@5.1.5: this library is no longer supported
[21:06:00.152] npm warn deprecated request@2.88.2: request has been deprecated, see Request’s Past, Present and Future · Issue #3142 · request/request · GitHub
[21:06:03.461] npm warn deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (ReDos Vulnerability Regression Visibility Notice · Issue #797 · debug-js/debug · GitHub)
[21:06:03.614] npm warn deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
[21:06:03.643] npm warn deprecated uuid@2.0.1: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() · V8 for details.
[21:06:03.670] npm warn deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (ReDos Vulnerability Regression Visibility Notice · Issue #797 · debug-js/debug · GitHub)
[21:06:10.463]
[21:06:10.464] added 815 packages in 15s
[21:06:10.464]
[21:06:10.465] 141 packages are looking for funding
[21:06:10.465] run npm fund for details
[21:06:10.488] Detected Next.js version: 13.2.4
[21:06:10.495] Detected package-lock.json generated by npm 7+
[21:06:10.495] Running “npm run build”
[21:06:10.627]
[21:06:10.628] > crowdfunding@0.1.0 build
[21:06:10.628] > next build
[21:06:10.628]
[21:06:11.102] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[21:06:11.103] This information is used to shape Next.js’ roadmap and prioritize features.
[21:06:11.103] You can learn more, including how to opt-out if you’d not like to participate in this anonymous program, by visiting the following URL:
[21:06:11.104] Telemetry | Next.js by Vercel - The React Framework
[21:06:11.104]
[21:06:11.218] info - Linting and checking validity of types…
[21:06:11.373] info - Creating an optimized production build…
[21:06:14.748] Browserslist: caniuse-lite is outdated. Please run:
[21:06:14.748] npx update-browserslist-db@latest
[21:06:14.749] Why you should do it regularly: GitHub - browserslist/update-db: CLI tool to update caniuse-lite to refresh target browsers from Browserslist config
[21:06:14.924]
[21:06:14.925] e[1me[33mwarne[39me[22m - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
[21:06:14.925] e[1me[33mwarne[39me[22m - Content Configuration - Tailwind CSS
[21:06:17.552] Browserslist: caniuse-lite is outdated. Please run:
[21:06:17.552] npx browserslist@latest --update-db
[21:06:17.558] Why you should do it regularly: GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
[21:06:18.048] info - Compiled successfully
[21:06:18.052] info - Collecting page data…
[21:06:24.333] info - Generating static pages (0/3)
[21:06:24.373] undefined
[21:06:24.375] undefined
[21:06:24.375] undefined
[21:06:24.439] info - Generating static pages (3/3)
[21:06:24.446] info - Finalizing page optimization…
[21:06:24.450]
[21:06:24.468] Route (pages) Size First Load JS
[21:06:24.468] ┌ ○ / 588 B 384 kB
[21:06:24.469] ├ /_app 0 B 383 kB
[21:06:24.469] └ ○ /404 181 B 383 kB
[21:06:24.469] + First Load JS shared by all 385 kB
[21:06:24.469] ├ chunks/framework-2c79e2a64abdb08b.js 45.2 kB
[21:06:24.469] ├ chunks/main-0ecb9ccfcb6c9b24.js 27 kB
[21:06:24.469] ├ chunks/pages/_app-00919df5a8e8d19d.js 310 kB
[21:06:24.469] ├ chunks/webpack-dcf4136cb4ed4a3e.js 873 B
[21:06:24.469] └ css/d82a2870bdb991fe.css 1.44 kB
[21:06:24.469]
[21:06:24.469] ○ (Static) automatically rendered as static HTML (uses no initial props)
[21:06:24.469]
[21:06:24.668] Collected static files (public/, static/, .next/static): 3.191ms
[21:06:24.687] Build Completed in /vercel/output [30s]
[21:06:24.782] Deploying outputs…
[21:06:24.783] Injected Vercel Toolbar into the build output, you can disable this in your project settings.
[21:06:25.791]
[21:06:26.064] Deployment completed
[21:06:33.074] Uploading build cache [96.75 MB]…
[21:06:34.386] Build cache uploaded: 1.312s

[amyegan]

Hey @kalchaqui. I’m not sure what you mean by “everything shows up out of place”. Is the CSS not applying as you expect on the deployed site? Is it the file structure that seems wrong?

If you can share a screenshot, that would help me see what you’re seeing.

[kalchaqui (Kalcha)]

@amyegan

Hey @kalchaqui. I’m not sure what you mean by “everything shows up out of place”. Is the CSS not applying as you expect on the deployed site? Is it the file structure that seems wrong?

If you can share a screenshot, that would help me see what you’re seeing

Yes! Is it the file structure that seems wrong,
All the CSS that it applies is fine because I can correctly see everything in order in terminal port:3000 Everything is perfect! But when I take him to Vercel, everything changes.
in the firs image is rigth, it show me the vscode

but en the second image, it show me vercel.

[pawlean (Pauline P. Narvas)]

Could it be related to how you set up your Root Directory?

[kalchaqui (Kalcha)]

Could the error be here, in the location? this is my github

GitHub - Kalchaqui/Project-X-

[kalchaqui (Kalcha)]

Excuse me, what do you recommend I do? Could it be something to do with the project’s CSS or something to do with misplaced folders?

[amyegan]

Thanks for sharing the repo. It looks like the files are all there, but some styles are being excluded from the deployed version when compared with the local build I tried. There may be something wrong with the Tailwind/PostCSS configuration causing it to exclude more than it should.

[kalchaqui (Kalcha)]

Sorry, I don’t understand what I have to do, because if when I run the program I see it fine, I don’t understand what I could change to make it look bad later in Vercel.
Surely something is wrong, but I don’t know what it is, otherwise I will try to do everything again.

[teterabob (Gilberts Ahumada)]

This is your tailwind config file. Your “componentes” folder is actually called “Components”, also the folder “Context”. Rename both as “components” and “context”, that should solve the problem.

In case git doesn’t recognize your changes, try this out

git config core.ignorecase false

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

[kalchaqui (Kalcha)]

I made the changes you mentioned and it works perfectly!!!
Thank you so much!!!