Tailwind CSS not loading - NextJS

Hello!

Strangely, my Tailwind CSS is not loading on my website. When I had uploaded it before, it worked just fine and for some odd reason, it has stopped. It still works on my local server, but after uploading it, it fails to load. I’ve looked for any answers on this forum, but can’t seem to figure it out.

The site: www.trevormcl.com

The github repo: GitHub - Tactenator/newportfolio-1

Deployment:

8:23:00 PM: Build ready to start
8:23:01 PM: build-image version: d7b3813f01c06610bc1723ff1b22446513ee7941 (focal)
8:23:01 PM: build-image tag: v4.14.3
8:23:01 PM: buildbot version: cb726a7d84489edcdcb2d3f1ed45076ec8d9f569
8:23:02 PM: Fetching cached dependencies
8:23:02 PM: Failed to fetch cache, continuing with build
8:23:02 PM: Starting to prepare the repo for build
8:23:02 PM: No cached dependencies found. Cloning fresh repo
8:23:02 PM: git clone GitHub - Tactenator/newportfolio-1
8:23:03 PM: Preparing Git Reference refs/heads/master
8:23:03 PM: Parsing package.json dependencies
8:23:04 PM: Starting build script
8:23:04 PM: Installing dependencies
8:23:04 PM: Python version set to 2.7
8:23:05 PM: v16.18.0 is already installed.
8:23:05 PM: Now using node v16.18.0 (npm v8.19.2)
8:23:05 PM: Enabling node corepack
8:23:05 PM: Started restoring cached build plugins
8:23:05 PM: Finished restoring cached build plugins
8:23:05 PM: Attempting ruby version 2.7.2, read from environment
8:23:06 PM: Using ruby version 2.7.2
8:23:06 PM: Using PHP version 8.0
8:23:06 PM: No npm workspaces detected
8:23:06 PM: Started restoring cached node modules
8:23:06 PM: Finished restoring cached node modules
8:23:07 PM: Installing NPM modules using NPM version 8.19.2
8:23:11 PM: added 271 packages, and audited 272 packages in 4s
8:23:11 PM: 87 packages are looking for funding
8:23:11 PM: run npm fund for details
8:23:11 PM: found 0 vulnerabilities
8:23:11 PM: NPM modules installed
8:23:11 PM: Creating package sha
8:23:11 PM: Started restoring cached go cache
8:23:11 PM: Finished restoring cached go cache
8:23:11 PM: Installing Go version 1.17 (requested 1.17)
8:23:17 PM: unset GOOS;
8:23:17 PM: unset GOARCH;
8:23:17 PM: export GOROOT=β€˜/opt/buildhome/.gimme/versions/go1.17.linux.amd64’;
8:23:17 PM: export PATH=β€œ/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}”;
8:23:17 PM: go version >&2;
8:23:17 PM: export GIMME_ENV=β€œ/opt/buildhome/.gimme/env/go1.17.linux.amd64.env”
8:23:17 PM: go version go1.17 linux/amd64
8:23:17 PM: Detected 1 framework(s)
8:23:17 PM: β€œnext” at version β€œ12.3.1”
8:23:17 PM: Installing missing commands
8:23:17 PM: Verify run directory
8:23:18 PM: ​
8:23:18 PM: ────────────────────────────────────────────────────────────────
8:23:18 PM: Netlify Build
8:23:18 PM: ────────────────────────────────────────────────────────────────
8:23:18 PM: ​
8:23:18 PM: ❯ Version
8:23:18 PM: @netlify/build 28.1.6
8:23:18 PM: ​
8:23:18 PM: ❯ Flags
8:23:18 PM: baseRelDir: true
8:23:18 PM: buildId: 636317f40ed42000aecff9ac
8:23:18 PM: deployId: 636317f40ed42000aecff9ae
8:23:18 PM: ​
8:23:18 PM: ❯ Current directory
8:23:18 PM: /opt/build/repo
8:23:18 PM: ​
8:23:18 PM: ❯ Config file
8:23:18 PM: No config file was defined: using default values.
8:23:18 PM: ​
8:23:18 PM: ❯ Context
8:23:18 PM: production
8:23:18 PM: ​
8:23:18 PM: ❯ Installing plugins
8:23:18 PM: - @netlify/plugin-nextjs@4.28.4
8:23:27 PM: ​
8:23:27 PM: ❯ Using Next.js Runtime - v4.28.4
8:23:29 PM: ​
8:23:29 PM: ────────────────────────────────────────────────────────────────
8:23:29 PM: 1. @netlify/plugin-nextjs (onPreBuild event)
8:23:29 PM: ────────────────────────────────────────────────────────────────
8:23:29 PM: ​
8:23:29 PM: No Next.js cache to restore.
8:23:29 PM: Netlify configuration property β€œbuild.environment.NEXT_PRIVATE_TARGET” value changed.
8:23:29 PM: ​
8:23:29 PM: (@netlify/plugin-nextjs onPreBuild completed in 16ms)
8:23:29 PM: ​
8:23:29 PM: ────────────────────────────────────────────────────────────────
8:23:29 PM: 2. Build command from Netlify app
8:23:29 PM: ────────────────────────────────────────────────────────────────
8:23:29 PM: ​
8:23:29 PM: $ npm run build
8:23:29 PM: > newportfolio@0.1.0 build
8:23:29 PM: > next build
8:23:29 PM: warn - No build cache found. Please configure build caching for faster rebuilds. Read more: no-cache | Next.js
8:23:29 PM: info - Linting and checking validity of types…
8:23:32 PM: info - Creating an optimized production build…
8:23:36 PM: info - Compiled successfully
8:23:36 PM: info - Collecting page data…
8:23:39 PM: info - Generating static pages (0/8)
8:23:40 PM: info - Generating static pages (2/8)
8:23:40 PM: info - Generating static pages (4/8)
8:23:40 PM: info - Generating static pages (6/8)
8:23:40 PM: info - Generating static pages (8/8)
8:23:40 PM: info - Finalizing page optimization…
8:23:40 PM: Route (pages) Size First Load JS
8:23:40 PM: β”Œ β—‹ / 3.25 kB 93.7 kB
8:23:40 PM: β”œ /_app 0 B 80.1 kB
8:23:40 PM: β”œ β—‹ /404 182 B 80.2 kB
8:23:40 PM: β”œ β—‹ /about 976 B 91.1 kB
8:23:40 PM: β”œ β—‹ /contact 673 B 80.7 kB
8:23:40 PM: β”œ β—‹ /projects 1.61 kB 92 kB
8:23:40 PM: β”œ β—‹ /welcome 528 B 80.6 kB
8:23:40 PM: β”” β—‹ /worked 1.16 kB 86.1 kB
8:23:40 PM: + First Load JS shared by all 82.5 kB
8:23:40 PM: β”œ chunks/framework-ed075df0e0b45174.js 45.5 kB
8:23:40 PM: β”œ chunks/main-e7a7892cb0edc024.js 31 kB
8:23:40 PM: β”œ chunks/pages/_app-c36f6b58903a874a.js 2.84 kB
8:23:40 PM: β”œ chunks/webpack-8fa1640cc84ba8fe.js 750 B
8:23:40 PM: β”” css/ae9cb1673524f806.css 2.43 kB
8:23:40 PM: β—‹ (Static) automatically rendered as static HTML (uses no initial props)
8:23:40 PM: ​
8:23:40 PM: (build.command completed in 11.6s)
8:23:40 PM: ​
8:23:40 PM: ────────────────────────────────────────────────────────────────
8:23:40 PM: 3. @netlify/plugin-nextjs (onBuild event)
8:23:40 PM: ────────────────────────────────────────────────────────────────
8:23:40 PM: ​
8:23:40 PM: { functionsDir: β€˜/opt/build/repo/.netlify/functions-internal’ }
8:23:40 PM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js
8:23:40 PM: Done
8:23:40 PM: Patching /opt/build/repo/node_modules/next/dist/server/next-server.js
8:23:40 PM: Done
8:23:40 PM: Moving static page files to serve from CDN…
8:23:40 PM: Moved 6 files
8:23:40 PM: Using Netlify Edge Functions for image format detection. Set env var β€œNEXT_DISABLE_EDGE_IMAGES=true” to disable.
8:23:40 PM: Netlify configuration property β€œredirects” value changed to [
8:23:40 PM: { from: β€˜/next/static/', to: β€˜/static/:splat’, status: 200 },
8:23:40 PM: {
8:23:40 PM: from: '/_next/image
’,
8:23:40 PM: query: { url: β€˜:url’, w: β€˜:width’, q: β€˜:quality’ },
8:23:40 PM: to: '/ipx/w:width,q
:quality/:url’,
8:23:40 PM: status: 301
8:23:40 PM: },
8:23:40 PM: { from: β€˜/_ipx/', to: β€˜/.netlify/builders/_ipx’, status: 200 },
8:23:40 PM: { from: '/cache/
’, to: β€˜/404.html’, status: 404, force: true },
8:23:40 PM: { from: β€˜/server/', to: β€˜/404.html’, status: 404, force: true },
8:23:40 PM: { from: '/serverless/
’, to: β€˜/404.html’, status: 404, force: true },
8:23:40 PM: { from: β€˜/trace’, to: β€˜/404.html’, status: 404, force: true },
8:23:40 PM: { from: β€˜/traces’, to: β€˜/404.html’, status: 404, force: true },
8:23:40 PM: {
8:23:40 PM: from: β€˜/routes-manifest.json’,
8:23:40 PM: to: β€˜/404.html’,
8:23:40 PM: status: 404,
8:23:40 PM: force: true
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/build-manifest.json’,
8:23:40 PM: to: β€˜/404.html’,
8:23:40 PM: status: 404,
8:23:40 PM: force: true
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/prerender-manifest.json’,
8:23:40 PM: to: β€˜/404.html’,
8:23:40 PM: status: 404,
8:23:40 PM: force: true
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/react-loadable-manifest.json’,
8:23:40 PM: to: β€˜/404.html’,
8:23:40 PM: status: 404,
8:23:40 PM: force: true
8:23:40 PM: },
8:23:40 PM: { from: β€˜/BUILD_ID’, to: β€˜/404.html’, status: 404, force: true },
8:23:40 PM: {
8:23:40 PM: from: β€˜/api/',
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/chillona.png’,
8:23:40 PM: to: β€˜/chillona.png’,
8:23:40 PM: conditions: { Cookie: [Array] },
8:23:40 PM: status: 200
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/favicon.ico’,
8:23:40 PM: to: β€˜/favicon.ico’,
8:23:40 PM: conditions: { Cookie: [Array] },
8:23:40 PM: status: 200
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/me.JPG’,
8:23:40 PM: to: β€˜/me.JPG’,
8:23:40 PM: conditions: { Cookie: [Array] },
8:23:40 PM: status: 200
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/petadventures.png’,
8:23:40 PM: to: β€˜/petadventures.png’,
8:23:40 PM: conditions: { Cookie: [Array] },
8:23:40 PM: status: 200
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/rockpaper.png’,
8:23:40 PM: to: β€˜/rockpaper.png’,
8:23:40 PM: conditions: { Cookie: [Array] },
8:23:40 PM: status: 200
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/vercel.svg’,
8:23:40 PM: to: β€˜/vercel.svg’,
8:23:40 PM: conditions: { Cookie: [Array] },
8:23:40 PM: status: 200
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: '/
’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: conditions: { Cookie: [Array] },
8:23:40 PM: force: true
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/_next/data/dVNLRoARVfavvuFDGkKXM/index.json’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/_next/data/dVNLRoARVfavvuFDGkKXM/about.json’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/about’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/_next/data/dVNLRoARVfavvuFDGkKXM/contact.json’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/contact’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/_next/data/dVNLRoARVfavvuFDGkKXM/projects.json’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/projects’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/_next/data/dVNLRoARVfavvuFDGkKXM/welcome.json’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/welcome’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/_next/data/dVNLRoARVfavvuFDGkKXM/worked.json’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/worked’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200,
8:23:40 PM: force: false
8:23:40 PM: },
8:23:40 PM: {
8:23:40 PM: from: β€˜/*’,
8:23:40 PM: to: β€˜/.netlify/functions/___netlify-handler’,
8:23:40 PM: status: 200
8:23:40 PM: }
8:23:40 PM: ].
8:23:40 PM: ​
8:23:40 PM: (@netlify/plugin-nextjs onBuild completed in 57ms)
8:23:40 PM: ​
8:23:40 PM: ────────────────────────────────────────────────────────────────
8:23:40 PM: 4. Functions bundling
8:23:40 PM: ────────────────────────────────────────────────────────────────
8:23:40 PM: ​
8:23:40 PM: Packaging Functions from .netlify/functions-internal directory:
8:23:40 PM: - ___netlify-handler/___netlify-handler.js
8:23:40 PM: - ___netlify-odb-handler/___netlify-odb-handler.js
8:23:40 PM: - _ipx/_ipx.js
8:23:40 PM: ​
8:23:49 PM: ​
8:23:49 PM: (Functions bundling completed in 8.3s)
8:23:49 PM: ​
8:23:49 PM: ────────────────────────────────────────────────────────────────
8:23:49 PM: 5. Edge Functions bundling
8:23:49 PM: ────────────────────────────────────────────────────────────────
8:23:49 PM: ​
8:23:49 PM: Packaging Edge Functions from .netlify/edge-functions directory:
8:23:49 PM: - ipx
8:23:51 PM: ​
8:23:51 PM: (Edge Functions bundling completed in 2.4s)
8:23:51 PM: ​
8:23:51 PM: ────────────────────────────────────────────────────────────────
8:23:51 PM: 6. @netlify/plugin-nextjs (onPostBuild event)
8:23:51 PM: ────────────────────────────────────────────────────────────────
8:23:51 PM: ​
8:23:51 PM: Next.js cache saved.
8:23:51 PM: ​
8:23:51 PM: (@netlify/plugin-nextjs onPostBuild completed in 280ms)
8:23:51 PM: ​
8:23:51 PM: ────────────────────────────────────────────────────────────────
8:23:51 PM: 7. Deploy site
8:23:51 PM: ────────────────────────────────────────────────────────────────
8:23:51 PM: ​
8:23:51 PM: Starting to deploy site from β€˜.next’
8:23:52 PM: Creating deploy upload records
8:23:52 PM: Creating deploy tree
8:23:52 PM: 19 new files to upload
8:23:52 PM: 3 new functions to upload
8:24:00 PM: Site deploy was successfully initiated
8:24:00 PM: ​
8:24:00 PM: (Deploy site completed in 8.4s)
8:24:00 PM: ​
8:24:00 PM: ────────────────────────────────────────────────────────────────
8:24:00 PM: Netlify Build Complete
8:24:00 PM: Starting post processing
8:24:00 PM: ────────────────────────────────────────────────────────────────
8:24:00 PM: ​
8:24:00 PM: (Netlify Build completed in 41.9s)
8:24:00 PM: Post processing - HTML
8:24:01 PM: Caching artifacts
8:24:01 PM: Started saving node modules
8:24:01 PM: Finished saving node modules
8:24:01 PM: Started saving build plugins
8:24:01 PM: Finished saving build plugins
8:24:01 PM: Started saving pip cache
8:24:01 PM: Finished saving pip cache
8:24:01 PM: Started saving emacs cask dependencies
8:24:01 PM: Finished saving emacs cask dependencies
8:24:01 PM: Started saving maven dependencies
8:24:01 PM: Finished saving maven dependencies
8:24:01 PM: Started saving boot dependencies
8:24:01 PM: Finished saving boot dependencies
8:24:01 PM: Started saving rust rustup cache
8:24:01 PM: Finished saving rust rustup cache
8:24:01 PM: Started saving go dependencies
8:24:01 PM: Post processing - header rules
8:24:01 PM: Finished saving go dependencies
8:24:01 PM: Post processing - redirect rules
8:24:01 PM: Post processing done
8:24:02 PM: Build script success
8:24:03 PM: Uploading Cache of size 177.4MB
8:24:04 PM: Finished processing build request in 1m2.966087985s
8:24:05 PM: Site is live :sparkles:

Any help is greatly appreciated. I do also apologize because I understand this question has been answered multiple times on here, but I just can’t seem to see what the problem is.

If there’s anything else I need to post for more information, please let me know.

Thank you for your help!

Go here: Netlify App, click on Edit, and choose Disable:

1 Like

That did the trick! Thank you so much!

Had exactly the same issue after using component in Nextjs. Just curious whats the reason for this?

Asset Optimization will modify the CSS links in your HTML pages to point to the β€œoptimised” version of those files. Next.js doesn’t expect this and breaks.