Next.js Tailwind deploy rendering unstyled in production, potential issue with style purging in tailwindconfig

Support
, ,
1

Site name: https://oliviahuntcello.netlify.app/

I think this might have something to with my content prop in my tailwindconfig and the purging of styles, here it is:

import typographyPlugin from '@tailwindcss/typography'
import { type Config } from 'tailwindcss'

import typographyStyles from './typography'

export default {
  content: [
    './src/**/**/*.tsx', 
  './src/**/*.tsx',     
  './src/**/*.tsx',
  './public/**/*.html',
  './components/**/*.tsx',
  './pages/**/*.tsx'],
  darkMode: 'selector',
  plugins: [typographyPlugin],
  theme: {
    fontSize: {
      xs: ['0.8125rem', { lineHeight: '1.5rem' }],
      sm: ['0.875rem', { lineHeight: '1.5rem' }],
      base: ['1rem', { lineHeight: '1.75rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '2rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '3.5rem' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    },
    typography: typographyStyles,
  },
} satisfies Config

here are my logs:

Deploy log
Preview




Minimize log
Initializing
Complete
5:21:20 PM: Build ready to start
5:21:21 PM: build-image version: fcb0c1b3ada6d25c1cb58e8bc514f5f23cc14f15 (focal)
5:21:21 PM: buildbot version: b01fe4bfba24ebbf2be94776e35d0c0d9decd607
5:21:22 PM: Building without cache
5:21:22 PM: Starting to prepare the repo for build
5:21:22 PM: No cached dependencies found. Cloning fresh repo
5:21:22 PM: git clone --filter=blob:none https://github.com/ladderdesigns/oliviahuntcello.com
5:21:22 PM: Preparing Git Reference refs/heads/main
5:21:24 PM: Starting to install dependencies
5:21:24 PM: Python version set to 3.8
5:21:24 PM: Attempting Ruby version 2.7.2, read from environment
5:21:24 PM: Using Ruby version 2.7.2
5:21:25 PM: Started restoring cached go cache
5:21:25 PM: Finished restoring cached go cache
5:21:26 PM: go version go1.19.13 linux/amd64
5:21:26 PM: Using PHP version 8.0
5:21:27 PM: Downloading and installing node v20.11.0...
5:21:27 PM: Downloading https://nodejs.org/dist/v20.11.0/node-v20.11.0-linux-x64.tar.xz...
5:21:28 PM: Computing checksum with sha256sum
5:21:28 PM: Checksums matched!
5:21:30 PM: Now using node v20.11.0 (npm v10.2.4)
5:21:30 PM: Enabling Node.js Corepack
5:21:30 PM: Started restoring cached build plugins
5:21:30 PM: Finished restoring cached build plugins
5:21:30 PM: Started restoring cached corepack dependencies
5:21:30 PM: Finished restoring cached corepack dependencies
5:21:30 PM: No npm workspaces detected
5:21:30 PM: Started restoring cached node modules
5:21:30 PM: Finished restoring cached node modules
5:21:31 PM: Installing npm packages using npm version 10.2.4
5:21:44 PM: added 601 packages, and audited 602 packages in 13s
5:21:44 PM: 275 packages are looking for funding
5:21:44 PM:   run `npm fund` for details
5:21:44 PM: found 0 vulnerabilities
5:21:44 PM: npm packages installed
5:21:44 PM: Successfully installed dependencies
5:21:44 PM: Starting build script
5:21:45 PM: Detected 1 framework(s)
5:21:45 PM: "next" at version "14.0.4"
5:21:45 PM: Section completed: initializing
Building
Complete
5:21:46 PM: Netlify Build                                                 
5:21:46 PM: ────────────────────────────────────────────────────────────────
5:21:46 PM: ​
5:21:46 PM: ❯ Version
5:21:46 PM:   @netlify/build 29.33.2
5:21:46 PM: ​
5:21:46 PM: ❯ Flags
5:21:46 PM:   baseRelDir: true
5:21:46 PM:   buildId: 65c03810f775d9c8d09d7f10
5:21:46 PM:   deployId: 65c03810f775d9c8d09d7f12
5:21:46 PM: ​
5:21:46 PM: ❯ Current directory
5:21:46 PM:   /opt/build/repo
5:21:46 PM: ​
5:21:46 PM: ❯ Config file
5:21:46 PM:   No config file was defined: using default values.
5:21:46 PM: ​
5:21:46 PM: ❯ Context
5:21:46 PM:   production
5:21:46 PM: ​
5:21:46 PM: ❯ Installing plugins
5:21:46 PM:    - @netlify/plugin-nextjs@4.41.3
5:21:58 PM: ​
5:21:58 PM: ❯ Using Next.js Runtime - v4.41.3
5:21:59 PM: ​
5:21:59 PM: @netlify/plugin-nextjs (onPreBuild event)                     
5:21:59 PM: ────────────────────────────────────────────────────────────────
5:21:59 PM: ​
5:21:59 PM: No Next.js cache to restore.
5:21:59 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
5:21:59 PM: ​
5:21:59 PM: (@netlify/plugin-nextjs onPreBuild completed in 54ms)
5:21:59 PM: ​
5:21:59 PM: Build command from Netlify app                                
5:21:59 PM: ────────────────────────────────────────────────────────────────
5:21:59 PM: ​
5:21:59 PM: $ npm run build
5:21:59 PM: > tailwindui-template@0.1.0 build
5:21:59 PM: > next build
5:22:00 PM: ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
5:22:00 PM:    ▲ Next.js 14.0.4
5:22:00 PM:    Creating an optimized production build ...
5:22:06 PM:  ✓ Compiled successfully
5:22:06 PM:    Linting and checking validity of types ...
5:22:10 PM:    Collecting page data ...
5:22:12 PM:    Generating static pages (0/15) ...
5:22:13 PM:    Generating static pages (3/15)
5:22:13 PM:    Generating static pages (7/15)
5:22:13 PM:    Generating static pages (11/15)
5:22:13 PM:  ✓ Generating static pages (15/15)
5:22:13 PM:    Finalizing page optimization ...
5:22:13 PM:    Collecting build traces ...
5:22:18 PM: Route (app)                                 Size     First Load JS
5:22:18 PM: ┌ ○ /                                       5.88 kB        99.5 kB
5:22:18 PM: ├ ○ /_not-found                             0 B                0 B
5:22:18 PM: ├ ○ /about                                  667 B          94.3 kB
5:22:18 PM: ├ ○ /articles                               3.44 kB        92.1 kB
5:22:18 PM: ├ λ /articles/the-art-of-cello-bowing       3.43 kB        85.3 kB
5:22:18 PM: ├ λ /articles/the-resonance-of-sharp-notes  3.43 kB        85.3 kB
5:22:18 PM: ├ ○ /contact                                181 B          88.8 kB
5:22:18 PM: ├ λ /feed.xml                               0 B                0 B
5:22:18 PM: ├ ○ /lessons                                662 B          94.3 kB
5:22:18 PM: ├ ○ /projects                               393 B            94 kB
5:22:18 PM: ├ ○ /thank-you                              138 B            82 kB
5:22:18 PM: └ ○ /uses                                   181 B          88.8 kB
5:22:18 PM: + First Load JS shared by all               81.9 kB
5:22:18 PM:   ├ chunks/938-97a4c5fe53c20fb7.js          26.7 kB
5:22:18 PM:   ├ chunks/fd9d1056-e9a01193b1822c33.js     53.3 kB
5:22:18 PM:   ├ chunks/main-app-99645ed85d33f049.js     220 B
5:22:18 PM:   └ chunks/webpack-d3261d7ee3a60fb2.js      1.68 kB
5:22:18 PM: ○  (Static)   prerendered as static content
5:22:18 PM: λ  (Dynamic)  server-rendered on demand using Node.js
5:22:18 PM: ​
5:22:18 PM: (build.command completed in 18.5s)
5:22:18 PM: ​
5:22:18 PM: @netlify/plugin-nextjs (onBuild event)                        
5:22:18 PM: ────────────────────────────────────────────────────────────────
5:22:18 PM: ​
5:22:18 PM: Moving static page files to serve from CDN...
5:22:18 PM: Moved 20 files to CDN
5:22:18 PM: You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable.
5:22:18 PM: Netlify configuration property "redirects" value changed to [
5:22:18 PM:   { from: "/_next/static/*", to: "/static/:splat", status: 200 },
5:22:18 PM:   {
5:22:18 PM:     from: "/_next/image*",
5:22:18 PM:     query: { url: ":url", w: ":width", q: ":quality" },
5:22:18 PM:     to: "/_ipx/w_:width,q_:quality/:url",
5:22:18 PM:     status: 301
5:22:18 PM:   },
5:22:18 PM:   { from: "/_ipx/*", to: "/.netlify/builders/_ipx", status: 200 },
5:22:18 PM:   {
5:22:18 PM:     from: "/api/*",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/*",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200,
5:22:18 PM:     conditions: { Cookie: [Array] },
5:22:18 PM:     force: true
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/_next/data/piWXAyrVofKyk1BsQGnbJ/_not-found.json",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200,
5:22:18 PM:     force: false
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/_not-found",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200,
5:22:18 PM:     force: false
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/_next/data/piWXAyrVofKyk1BsQGnbJ/articles/the-art-of-cello-bowing.json",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200,
5:22:18 PM:     force: false
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/articles/the-art-of-cello-bowing",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200,
5:22:18 PM:     force: false
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/_next/data/piWXAyrVofKyk1BsQGnbJ/articles/the-resonance-of-sharp-notes.json",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200,
5:22:18 PM:     force: false
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/articles/the-resonance-of-sharp-notes",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200,
5:22:18 PM:     force: false
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/_next/data/piWXAyrVofKyk1BsQGnbJ/feed.xml.json",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200,
5:22:18 PM:     force: false
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/feed.xml",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200,
5:22:18 PM:     force: false
5:22:18 PM:   },
5:22:18 PM:   {
5:22:18 PM:     from: "/*",
5:22:18 PM:     to: "/.netlify/functions/___netlify-handler",
5:22:18 PM:     status: 200
5:22:18 PM:   }
5:22:18 PM: ].
5:22:18 PM: ​
5:22:18 PM: (@netlify/plugin-nextjs onBuild completed in 151ms)
5:22:18 PM: ​
5:22:18 PM: Functions bundling                                            
5:22:18 PM: ────────────────────────────────────────────────────────────────
5:22:18 PM: ​
5:22:18 PM: Packaging Functions from .netlify/functions-internal directory:
5:22:18 PM:  - ___netlify-handler/___netlify-handler.js
5:22:18 PM:  - ___netlify-odb-handler/___netlify-odb-handler.js
5:22:18 PM:  - _ipx/_ipx.js
5:22:18 PM: ​
5:22:35 PM: ​
5:22:35 PM: (Functions bundling completed in 17s)
5:22:35 PM: ​
5:22:35 PM: Edge Functions bundling                                       
5:22:35 PM: ────────────────────────────────────────────────────────────────
5:22:35 PM: ​
5:22:35 PM: Packaging Edge Functions from .netlify/edge-functions directory:
5:22:35 PM:  - rsc-data
5:22:37 PM: ​
5:22:37 PM: (Edge Functions bundling completed in 2.4s)
5:22:37 PM: ​
5:22:37 PM: @netlify/plugin-nextjs (onPostBuild event)                    
5:22:37 PM: ────────────────────────────────────────────────────────────────
5:22:37 PM: ​
5:22:38 PM: Next.js cache saved.
5:22:38 PM: ​
5:22:38 PM: (@netlify/plugin-nextjs onPostBuild completed in 261ms)
5:22:38 PM: ​
5:22:45 PM: (Netlify Build completed in 58.3s)
5:23:05 PM: Section completed: building
5:23:08 PM: Finished processing build request in 1m46.921s
Deploying
Complete
5:22:38 PM: Deploy site                                                   
5:22:38 PM: ────────────────────────────────────────────────────────────────
5:22:38 PM: ​
5:22:38 PM: Starting to deploy site from ".next"
5:22:38 PM: Calculating files to upload
5:22:38 PM: 22 new files to upload
5:22:38 PM: 2 new functions to upload
5:22:45 PM: Section completed: deploying
5:22:45 PM: Site deploy was successfully initiated
5:22:45 PM: ​
5:22:45 PM: (Deploy site completed in 6.8s)
Cleanup
Complete
5:22:45 PM: Netlify Build Complete                                        
5:22:45 PM: ────────────────────────────────────────────────────────────────
5:22:45 PM: ​
5:22:45 PM: Caching artifacts
5:22:45 PM: Started saving node modules
5:22:45 PM: Finished saving node modules
5:22:45 PM: Started saving build plugins
5:22:45 PM: Finished saving build plugins
5:22:45 PM: Started saving corepack cache
5:22:45 PM: Finished saving corepack cache
5:22:45 PM: Started saving pip cache
5:22:45 PM: Finished saving pip cache
5:22:45 PM: Started saving emacs cask dependencies
5:22:45 PM: Finished saving emacs cask dependencies
5:22:45 PM: Started saving maven dependencies
5:22:45 PM: Finished saving maven dependencies
5:22:45 PM: Started saving boot dependencies
5:22:45 PM: Finished saving boot dependencies
5:22:45 PM: Started saving rust rustup cache
5:22:45 PM: Finished saving rust rustup cache
5:22:45 PM: Started saving go dependencies
5:22:45 PM: Finished saving go dependencies
5:23:05 PM: Build script success
5:23:06 PM: Uploading Cache of size 349.1MB
5:23:08 PM: Section completed: cleanup
Post-processing
Complete
5:22:45 PM: Skipping form detection
5:22:45 PM: Post processing - header rules
5:22:45 PM: Starting post processing
5:22:45 PM: Site is live ✨
5:22:45 PM: Post processing - redirect rules
5:22:45 PM: Post processing done
5:22:45 PM: Section completed: postprocessing
2

Are you certain this is a Netlify issue? Does this work locally when you run next build && next start?

3

hey @hrishikesh yes it does build locally, and it appears styled on my dev server. To test I deployed the same build on vercel and it builds fine and is styled (same node version and same environment variables). I’m kinda spinning gears on why it isn’t working on Netlify because I really want to take advantage of Netlify forms. Thanks for the help

4

As far as I can see, Tailwind is not processed during your Next.js build process for some reason: oliviahuntcello.netlify.app/_next/static/css/fa33de4a4a682e52.css. In that file you can see that Tailwind is left unprocessed. Why? That depends on your setup and it’s not something that Netlufy can cause or control.

With that being said, I checked the Next.js docs: Styling: Tailwind CSS | Next.js (nextjs.org) and I see this: oliviahuntcello.com/src/app/layout.tsx at main · ladderdesigns/oliviahuntcello.com (github.com), going to the Tailwind file shows me this: oliviahuntcello.com/src/styles/tailwind.css at main · ladderdesigns/oliviahuntcello.com (github.com) which looks like an incorrect way to use Tailwind. The docs say:

@tailwind base;
@tailwind components;
@tailwind utilities;

But you have:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import './prism.css';
@import 'tailwindcss/utilities';
5

Hi Hrishikesh actually I facing the same issue and I am using this approach:
@tailwind base;
@tailwind components;
@tailwind utilities;

@jseanpatel how did you fix the issue in your web? I am seeing that now it looks good!.
https://oliviahuntcello.netlify.app

Kind regards

6

Based on the previous discussion, this wasn’t a Netlify issue, but a Next.js/Tailwind issue. Are your styles building locally (next build, not dev server!)? If so, could you start by sharing a site name?