VS Code - node js issue globals.css not detects in layout.tsx

[vishuenc-afk]

Select Topic Area

Question

Body

I am trying to build sample e-commerce website. I am using VS Code Version: 1.107.1

ElectronBuildId: 12895514 Chromium: 142.0.7444.175 Node.js: 22.21.1 V8: 14.2.231.21-electron.0 OS: Darwin arm64 25.1.0 but when I use default globals.css it works fine as localhost:port response is good however When i try to custom one globals.css it wont detect at all instead throws error as below - I have tailwindCSS postCSS included in VC Code.

Error evaluating Node.js code
CssSyntaxError: tailwindcss: /Users/01/shopstore/src/app/assets/styles/globals.css:1:1: Can't resolve '/app/assets/styles/globals.css' in '/Users/01/shopstore/src/app/assets/styles'
[at Input.error (turbopack:///[project]/shopstore/node_modules/postcss/lib/input.js:135:16)]
[at Root.error (turbopack:///[project]/shopstore/node_modules/postcss/lib/node.js:146:32)]

[TheCHARIITH]

It seems like there is an issue with how the path to your globals.css is being resolved. The error suggests that the file at /app/assets/styles/globals.css cannot be found or resolved correctly. Here's a possible solution to fix this:

Steps to resolve:

1. Check File Path:

   • Double-check that the path to globals.css is correct. Make sure the file exists in the specified location: /Users/01/shopstore/src/app/assets/styles/globals.css.
   • If you're using a relative path, ensure you're referencing it correctly from your main file.

2. Check TailwindCSS Configuration:

   • In your tailwind.config.js, ensure that the content paths are correctly set to include your CSS files:

     module.exports = {
       content: [
         "./src/**/*.{html,js,ts,jsx,tsx}",
         "./src/app/assets/styles/**/*.css", // Ensure this path includes your globals.css
       ],
       theme: {
         extend: {},
       },
       plugins: [],
     };

3. CSS Import:

   • In your JavaScript or main entry file, import the globals.css correctly:

     import './assets/styles/globals.css';

4. PostCSS Configuration:

   • Ensure that your postcss.config.js is set up correctly to work with Tailwind:

     module.exports = {
       plugins: [
         require('tailwindcss'),
         require('autoprefixer'),
       ],
     };

5. Electron and Webpack:

   • If you're using Electron with a custom build setup, make sure Webpack or any other bundler is correctly handling your CSS files. In some cases, you might need to adjust the Webpack configuration to include styles from your specific directories.

6. Restart VS Code:

   • After making changes to the configuration files or paths, restart VS Code and your development server to ensure the updates are applied.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[GloriousMir]

This error usually happens because Tailwind/PostCSS cannot resolve the CSS file path, not because of the CSS content itself. From the error message:

Can't resolve '/app/assets/styles/globals.css'

the key issue is the absolute path starting with /app.

In a Next.js / Vite / modern frontend setup, CSS imports should normally use relative paths, not absolute filesystem paths.

What is likely happening

Your file structure probably looks something like this:

shopstore
 └─ src
     └─ app
         └─ assets
             └─ styles
                 └─ globals.css

But somewhere you are importing it like this:

@import '/app/assets/styles/globals.css';

or in JS/TS:

import '/app/assets/styles/globals.css'

This makes the bundler search from the project root, which fails.

Fix

Use a relative path instead.

If your file is inside src/app/layout.tsx or similar, use:

import './assets/styles/globals.css'

or

import '../assets/styles/globals.css'

depending on the location.

Also check your globals.css

A valid Tailwind global file should look like this:

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

If you customized it, make sure these directives still exist.

Another thing to verify

Check your tailwind.config.js content paths:

content: [
  "./src/**/*.{js,ts,jsx,tsx}",
]

If Tailwind cannot scan the files, styles won't generate.

[SIMARSINGHRAYAT]

This is a common Next.js/Tailwind CSS import issue. Quick fix:

Solution 1: Import in _app.tsx or layout.tsx

// In your layout.tsx or _app.tsx
import './globals.css';

Solution 2: Check next.config.js
Ensure CSS loader is configured:

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    });
    return config;
  },
};

Solution 3: Check Tailwind Configuration

• Verify tailwind.config.js includes the CSS file
• Check postcss.config.js has Tailwind plugin

Solution 4: Troubleshooting

1. Clear .next folder: rm -rf .next
2. Restart VS Code
3. Restart dev server: npm run dev

Root Cause:
ElectronBuilder issue with CSS resolution in development mode. VS Code's IntelliSense often shows false errors while the app actually works fine locally.

Your localhost build works because the CSS loads correctly at runtime, even if VSCode shows error.

Quick Win:
If it works on localhost, ignore the VSCode error - it's likely a linting/IntelliSense issue, not actual code error.