I’m on my NEXTjs project, while trying to build the application for production env (npm run build):

/home/sudeep/Documents/Web/Expense-tracker/frontend/node_modules/tailwindcss/tailwind.css:1 @tailwind base; 
^ SyntaxError: Invalid or unexpected token 

This is my postcss.config.js

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

And my tailwind.config.ts looks like :

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        darkColor: '#0d1117'
      }
    },
  },
  plugins: [],
};
export default config;

I have also tried it like this :

@import "tailwindcss/base"; 
@import "tailwindcss/components"; 
@import "tailwindcss/utilities";

but the error is still unsolved :

@import "tailwindcss/base"; 
^ SyntaxError: Invalid or unexpected token

Also i have updated the VS CODE ‘s setttings.json file for CSS file associations :

"files.associations": {     
    "*.css": "tailwindcss"   
},

It worked while running npm run build on my local machine but not in the Vercel server while building the application by Vercel itself in production.

Also added ignoreDuringBuilds in next.config.mjs
like this

/** @type {import('next').NextConfig} */ 

const nextConfig = {     
    eslint: {
         ignoreDuringBuilds  : true
     } 
}; 
export default nextConfig;

Please help, I have tried my best till now