NextJs postcss.config error with Tailwind CSS

Question

I'm trying to deploy my NextJs Application on O2Switch and Cpanel. I have a Tailwind config for this app. Here you can see my Tailwind setup files:

tailwind.config.js

    /** @type {import('tailwindcss').Config} */

     const { fontFamily } = require('tailwindcss/defaultTheme')

     module.exports = {
    content: [
      // Or if using `src` directory:
      "./src/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    darkMode: 'class',
    theme: {
    extend: {
      fontFamily: {
        mont: ['var(--font-mont)', ...fontFamily.sans],
      },
      colors: {
        dark: "#1b1b1b",
        light: "#f5f5f5",
        primary: "#B63E96", // 240,86,199
        primaryDark: "#58E6D9", // 80,230,217
      },
      animation: {
        'spin-slow': "spin 8s linear infinite"
      },
      backgroundImage: {
        circularLight:
        "repeating-radial-gradient(rgba(0,0,0,0.4) 2px,#f5f5f5 5px,#f5f5f5 100px)",

      circularDark:
          "repeating-radial-gradient(rgba(255,255,255,0.5) 2px,#1b1b1b 8px,#1b1b1b 100px)",

      circularLightLg:
          "repeating-radial-gradient(rgba(0,0,0,0.4) 2px,#f5f5f5 5px,#f5f5f5 80px)",

      circularDarkLg:
          "repeating-radial-gradient(rgba(255,255,255,0.5) 2px,#1b1b1b 8px,#1b1b1b 80px)",

      circularLightMd:
          "repeating-radial-gradient(rgba(0,0,0,0.4) 2px,#f5f5f5 5px,#f5f5f5 60px)",

      circularDarkMd:
          "repeating-radial-gradient(rgba(255,255,255,0.5) 2px,#1b1b1b 6px,#1b1b1b 60px)",

      circularLightSm:
          "repeating-radial-gradient(rgba(0,0,0,0.4) 2px,#f5f5f5 5px,#f5f5f5 40px)",

      circularDarkSm:
          "repeating-radial-gradient(rgba(255,255,255,0.5) 2px,#1b1b1b 4px,#1b1b1b 40px)",
      }
    },
    screens: {
      "2xl": { max: "1535px" },
      // => @media (max-width: 1535px) { ... }
  
      xl: { max: "1279px" },
      // => @media (max-width: 1279px) { ... }
  
      lg: { max: "1023px" },
      // => @media (max-width: 1023px) { ... }
  
      md: { max: "767px" },
      // => @media (max-width: 767px) { ... }
  
      sm: { max: "639px" },
      // => @media (max-width: 639px) { ... }
  
      xs: { max: "479px" },
      // => @media (max-width: 479px) { ... }
      },
     },
      plugins: [],
     }

postcss.config.js

    module.exports = {
     plugins: {
      tailwindcss: {},
      autoprefixer: {},
     },
    }

src/styles/globals.css

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

src/pages/_app.js

    import '@/styles/globals.css'
    import { Montserrat } from "next/font/google"

     const montserrat = Montserrat({
       subsets: ["latin"],
       variable: "--font-mont"
     });

package.json

    {
      "name": "test",
      "version": "0.1.0",
      "private": false,
      "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint"
     },
     "dependencies": {
      "eslint": "8.36.0",
      "eslint-config-next": "13.2.4",
      "framer-motion": "^10.6.0",
      "next": "13.2.4",
      "react": "18.2.0",
      "react-dom": "18.2.0",
      "sharp": "^0.32.0"
     },
      "devDependencies": {
      "autoprefixer": "^10.4.14",
      "postcss": "^8.4.21",
      "tailwindcss": "^3.3.1"
     }
    }

And now my problem : On my Cpanel, I'm importing in my sub-domain the git repo of my project, then I use "Setup Node.js App" to create the environment.

Using a "PuTTY" terminal, I run npm install. All is OK. Then I try npm run build and I get this error:

The only way to avoid this problem is to delete my postcss.config.js file. But without this file Tailwind is disabled and my website looks absolutely horrible.

I'm stuck on this for 2 days. Have you got any idea? (On my Cpanel I'm using the highest node version possible, v16.19 (v18 is not working, I don't know why).

Ed Lucas · Answer 1 · 2023-05-09T20:15:41.623

0

It looks like you might be missing a closing double-quote at the end of line 2 of src/pages/_app.js. It should be:

import { Montserrat } from "next/font/google"

You may also need to change your import path from

import '@/styles/globals.css'

to

import '@styles/globals.css'

edited May 09 '23 at 20:15

answered Apr 24 '23 at 00:23

Ed Lucas

5,955
4
30
42

That's a mistake when i wrote here, but you right. Anyway, it doesn't solve my issue ^^ – Karl May 08 '23 at 19:23
You should edit your question and fix it there at least. – Ed Lucas May 09 '23 at 20:03
I added another possible fix for your import path. – Ed Lucas May 09 '23 at 20:16

NextJs postcss.config error with Tailwind CSS

1 Answers1