Tailwind Css Brooking On My Next js App

PLEASE help us help you by writing a good post!

  • we need to know your netlify site name. Example: [https://benevolent-souffle-264f94.netlify.app]
    12:16:30 AM: build-image version: 4143c314fbcf8f8db94b5d3f21e69e4d9a6cd853 (focal)
    12:16:30 AM: buildbot version: 4143c314fbcf8f8db94b5d3f21e69e4d9a6cd853
    12:16:30 AM: Fetching cached dependencies
    12:16:30 AM: Starting to download cache of 868.0MB
    12:16:40 AM: Finished downloading cache in 9.546s
    12:16:40 AM: Starting to extract cache
    12:16:45 AM: Finished extracting cache in 5.616s
    12:16:45 AM: Finished fetching cache in 15.309s
    12:16:45 AM: Starting to prepare the repo for build
    12:16:46 AM: Preparing Git Reference refs/heads/master
    12:16:48 AM: Starting to install dependencies
    12:16:48 AM: Python version set to 3.8
    12:16:48 AM: Attempting Ruby version 2.7.2, read from environment
    12:16:48 AM: Using Ruby version 2.7.2
    12:16:49 AM: Started restoring cached go cache
    12:16:49 AM: Finished restoring cached go cache
    12:16:49 AM: go version go1.19.10 linux/amd64
    12:16:49 AM: Using PHP version 8.0
    12:16:50 AM: Started restoring cached Node.js version
    12:16:51 AM: Finished restoring cached Node.js version
    12:16:51 AM: v18.16.0 is already installed.
    12:16:52 AM: Now using node v18.16.0 (npm v9.5.1)
    12:16:52 AM: Enabling Node.js Corepack
    12:16:52 AM: Started restoring cached build plugins
    12:16:52 AM: Finished restoring cached build plugins
    12:16:52 AM: Started restoring cached corepack dependencies
    12:16:52 AM: Finished restoring cached corepack dependencies
    12:16:52 AM: Started restoring cached yarn cache
    12:16:56 AM: Finished restoring cached yarn cache
    12:16:57 AM: No yarn workspaces detected
    12:16:57 AM: Started restoring cached node modules
    12:16:57 AM: Finished restoring cached node modules
    12:16:57 AM: Installing npm packages using Yarn version 1.22.19
    12:16:57 AM: yarn install v1.22.19
    12:16:57 AM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
    12:16:57 AM: [1/4] Resolving packages…
    12:16:57 AM: success Already up-to-date.
    12:16:57 AM: Done in 0.15s.
    12:16:57 AM: npm packages installed using Yarn
    12:16:58 AM: Install dependencies script success
    12:16:58 AM: Starting build script
    12:16:59 AM: Detected 1 framework(s)
    12:16:59 AM: “next” at version “13.4.3”
    12:16:59 AM: Section completed: initializing
    12:17:00 AM: ​
    12:17:00 AM: Netlify Build
    12:17:00 AM: ────────────────────────────────────────────────────────────────
    12:17:00 AM: ​
    12:17:00 AM: ❯ Version
    12:17:00 AM: @netlify/build 29.12.1
    12:17:00 AM: ​
    12:17:00 AM: ❯ Flags
    12:17:00 AM: baseRelDir: true
    12:17:00 AM: buildId: 6480c9689100f00008a08a94
    12:17:00 AM: deployId: 6480c9689100f00008a08a96
    12:17:00 AM: ​
    12:17:00 AM: ❯ Current directory
    12:17:00 AM: /opt/build/repo
    12:17:00 AM: ​
    12:17:00 AM: ❯ Config file
    12:17:00 AM: No config file was defined: using default values.
    12:17:00 AM: ​
    12:17:00 AM: ❯ Context
    12:17:00 AM: production
    12:17:00 AM: ​
    12:17:00 AM: ❯ Using Next.js Runtime - v4.37.4
    12:17:01 AM: ​
    12:17:01 AM: @netlify/plugin-nextjs (onPreBuild event)
    12:17:01 AM: ────────────────────────────────────────────────────────────────
    12:17:01 AM: ​
    12:17:01 AM: Next.js cache restored.
    12:17:01 AM: Netlify configuration property “build.environment.NEXT_PRIVATE_TARGET” value changed.
    12:17:01 AM: ​
    12:17:01 AM: (@netlify/plugin-nextjs onPreBuild completed in 50ms)
    12:17:01 AM: ​
    12:17:01 AM: Build command from Netlify app
    12:17:01 AM: ────────────────────────────────────────────────────────────────
    12:17:01 AM: ​
    12:17:01 AM: $ npm run build
    12:17:02 AM: > website@0.1.0 build
    12:17:02 AM: > next build
    12:17:02 AM: - info Linting and checking validity of types…
    12:17:02 AM: - info Creating an optimized production build…
    12:17:03 AM: warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
    12:17:03 AM: warn - Content Configuration - Tailwind CSS
    12:17:04 AM: - info Compiled successfully
    12:17:04 AM: - info Collecting page data…
    12:17:04 AM: - info Generating static pages (0/4)
    12:17:04 AM: - info Generating static pages (1/4)
    12:17:04 AM: - info Generating static pages (2/4)
    12:17:04 AM: - info Generating static pages (3/4)
    12:17:04 AM: - info Generating static pages (4/4)
    12:17:05 AM: - info Finalizing page optimization…
    12:17:05 AM: Route (pages) Size First Load JS
    12:17:05 AM: ┌ ○ / 383 B 94.9 kB
    12:17:05 AM: ├ └ css/644c25804a6d0cef.css 1.51 kB
    12:17:05 AM: ├ /_app 0 B 73.9 kB
    12:17:05 AM: ├ ○ /404 182 B 74.1 kB
    12:17:05 AM: ├ λ /api/hello 0 B 73.9 kB
    12:17:05 AM: └ ○ /Home/Home 188 B 94.7 kB
    12:17:05 AM: + First Load JS shared by all 75.3 kB
    12:17:05 AM: ├ chunks/framework-2c79e2a64abdb08b.js 45.2 kB
    12:17:05 AM: ├ chunks/main-7c8966651ff4862e.js 27.6 kB
    12:17:05 AM: ├ chunks/pages/_app-7172e87d084d5d88.js 298 B
    12:17:05 AM: ├ chunks/webpack-79b5298ebf233e0b.js 756 B
    12:17:05 AM: └ css/34e82990737d7da2.css 1.39 kB
    12:17:05 AM: λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
    12:17:05 AM: ○ (Static) automatically rendered as static HTML (uses no initial props)
    12:17:05 AM: ​
    12:17:05 AM: (build.command completed in 3.9s)
    12:17:05 AM: ​
    12:17:05 AM: @netlify/plugin-nextjs (onBuild event)
    12:17:05 AM: ────────────────────────────────────────────────────────────────
    12:17:05 AM: ​
    12:17:05 AM: Patching /opt/build/repo/node_modules/next/dist/server/base-server.js
    12:17:05 AM: Done
    12:17:05 AM: Patching /opt/build/repo/node_modules/next/dist/server/next-server.js
    12:17:05 AM: Done
    12:17:05 AM: Moving static page files to serve from CDN…
    12:17:05 AM: Moved 4 files
    12:17:05 AM: You are not using Netlify Edge Functions for image format detection. Set env var “NEXT_FORCE_EDGE_IMAGES=true” to enable.
    12:17:05 AM: Netlify configuration property “redirects” value changed to [
    12:17:05 AM: { from: ‘/next/static/', to: ‘/static/:splat’, status: 200 },
    12:17:05 AM: {
    12:17:05 AM: from: '/_next/image
    ’,
    12:17:05 AM: query: { url: ‘:url’, w: ‘:width’, q: ‘:quality’ },
    12:17:05 AM: to: '/ipx/w:width,q
    :quality/:url’,
    12:17:05 AM: status: 301
    12:17:05 AM: },
    12:17:05 AM: { from: ‘/_ipx/', to: ‘/.netlify/builders/_ipx’, status: 200 },
    12:17:05 AM: {
    12:17:05 AM: from: '/api/
    ’,
    12:17:05 AM: to: ‘/.netlify/functions/___netlify-handler’,
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/favicon.ico’,
    12:17:05 AM: to: ‘/favicon.ico’,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/next.svg’,
    12:17:05 AM: to: ‘/next.svg’,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/vercel.svg’,
    12:17:05 AM: to: ‘/vercel.svg’,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/Images/hero.jpeg’,
    12:17:05 AM: to: ‘/Images/hero.jpeg’,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/Images/images.jsx’,
    12:17:05 AM: to: ‘/Images/images.jsx’,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/Images/video.png’,
    12:17:05 AM: to: ‘/Images/video.png’,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/Videos/bg.mp4’,
    12:17:05 AM: to: ‘/Videos/bg.mp4’,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/Videos/bg1.mp4’,
    12:17:05 AM: to: ‘/Videos/bg1.mp4’,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/Videos/photo.webm’,
    12:17:05 AM: to: ‘/Videos/photo.webm’,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: status: 200
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/',
    12:17:05 AM: to: ‘/.netlify/functions/___netlify-handler’,
    12:17:05 AM: status: 200,
    12:17:05 AM: conditions: { Cookie: [Array] },
    12:17:05 AM: force: true
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/_next/data/uyuoUDTTf6Msfry7-2Ris/index.json’,
    12:17:05 AM: to: ‘/.netlify/functions/___netlify-handler’,
    12:17:05 AM: status: 200,
    12:17:05 AM: force: false
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/’,
    12:17:05 AM: to: ‘/.netlify/functions/___netlify-handler’,
    12:17:05 AM: status: 200,
    12:17:05 AM: force: false
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/_next/data/uyuoUDTTf6Msfry7-2Ris/Home/Home.json’,
    12:17:05 AM: to: ‘/.netlify/functions/___netlify-handler’,
    12:17:05 AM: status: 200,
    12:17:05 AM: force: false
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: ‘/Home/Home’,
    12:17:05 AM: to: ‘/.netlify/functions/___netlify-handler’,
    12:17:05 AM: status: 200,
    12:17:05 AM: force: false
    12:17:05 AM: },
    12:17:05 AM: {
    12:17:05 AM: from: '/
    ’,
    12:17:05 AM: to: ‘/.netlify/functions/___netlify-handler’,
    12:17:05 AM: status: 200
    12:17:05 AM: }
    12:17:05 AM: ].
    12:17:05 AM: ​
    12:17:05 AM: (@netlify/plugin-nextjs onBuild completed in 101ms)
    12:17:05 AM: ​
    12:17:05 AM: Functions bundling
    12:17:05 AM: ────────────────────────────────────────────────────────────────
    12:17:05 AM: ​
    12:17:05 AM: Packaging Functions from .netlify/functions-internal directory:
    12:17:05 AM: - ___netlify-handler/___netlify-handler.js
    12:17:05 AM: - ___netlify-odb-handler/___netlify-odb-handler.js
    12:17:05 AM: - _ipx/_ipx.js
    12:17:05 AM: ​
    12:17:29 AM: ​
    12:17:29 AM: (Functions bundling completed in 23.5s)
    12:17:29 AM: ​
    12:17:29 AM: Edge Functions bundling
    12:17:29 AM: ────────────────────────────────────────────────────────────────
    12:17:29 AM: ​
    12:17:29 AM: ​
    12:17:29 AM: (Edge Functions bundling completed in 372ms)
    12:17:29 AM: ​
    12:17:29 AM: @netlify/plugin-nextjs (onPostBuild event)
    12:17:29 AM: ────────────────────────────────────────────────────────────────
    12:17:29 AM: ​
    12:17:29 AM: Next.js cache saved.
    12:17:29 AM: :test_tube: Thank you for testing “appDir” support on Netlify. For known issues and to give feedback, visit Using the Next 13 `app` directory on Netlify · netlify/next-runtime · Discussion #1724 · GitHub
    12:17:29 AM: ​
    12:17:29 AM: (@netlify/plugin-nextjs onPostBuild completed in 52ms)
    12:17:29 AM: ​
    12:17:29 AM: Deploy site
    12:17:29 AM: ────────────────────────────────────────────────────────────────
    12:17:29 AM: ​
    12:17:29 AM: Starting to deploy site from ‘.next’
    12:17:30 AM: Calculating files to upload
    12:17:30 AM: 5 new files to upload
    12:17:30 AM: 2 new functions to upload
    12:17:38 AM: Section completed: deploying
    12:17:38 AM: Site deploy was successfully initiated
    12:17:38 AM: ​
    12:17:38 AM: (Deploy site completed in 8.8s)
    12:17:38 AM: ​
    12:17:38 AM: Starting post processing
    12:17:38 AM: Netlify Build Complete
    12:17:38 AM: ────────────────────────────────────────────────────────────────
    12:17:38 AM: ​
    12:17:38 AM: (Netlify Build completed in 38.4s)
    12:17:39 AM: Skipping HTML post processing
    12:17:39 AM: Post processing - header rules
    12:17:39 AM: Caching artifacts
    12:17:39 AM: Started saving node modules
    12:17:39 AM: Post processing - redirect rules
    12:17:39 AM: Finished saving node modules
    12:17:39 AM: Started saving build plugins
    12:17:39 AM: Finished saving build plugins
    12:17:39 AM: Post processing done
    12:17:39 AM: Started saving corepack cache
    12:17:39 AM: Finished saving corepack cache
    12:17:39 AM: Started saving yarn cache
    12:17:39 AM: Section completed: postprocessing
    12:17:40 AM: Site is live :sparkles:
    12:17:42 AM: Finished saving yarn cache
    12:17:42 AM: Started saving pip cache
    12:17:42 AM: Finished saving pip cache
    12:17:42 AM: Started saving emacs cask dependencies
    12:17:42 AM: Finished saving emacs cask dependencies
    12:17:42 AM: Started saving maven dependencies
    12:17:42 AM: Finished saving maven dependencies
    12:17:42 AM: Started saving boot dependencies
    12:17:42 AM: Finished saving boot dependencies
    12:17:42 AM: Started saving rust rustup cache
    12:17:42 AM: Finished saving rust rustup cache
    12:17:42 AM: Started saving go dependencies
    12:17:42 AM: Finished saving go dependencies
    12:17:42 AM: Build script success
    12:17:42 AM: Section completed: building
    12:17:46 AM: Uploading Cache of size 867.9MB
    12:17:53 AM: Section completed: cleanup
    12:17:53 AM: Finished processing build request in 1m23.498s

The better the post - the faster the answer.

Hi there, before we can help you, we need a little more information on the issues you are facing.

First, have you looked through this resource? It is a compilation of all of our build and deploy resources. This will be a good starting point.

If you have worked through those guides and are still encountering issues please share the following information:

  • what you have already tried
  • any error messages you have received in your terminal window or in the developer console

No @SamO I did Not Get any Error When I am Building Local Its Works Fine, But When I am Deoloying on Netlify its Breaks the Style

can you share your repo?

@SamO Repo link GitHub - webpixal/ProductPapprazzi

Has this been fixed? I can see the styles without issues.