React + Vite + TailwindCSS application is not building

Question

I was working on migration my application from CRA to Vite.

Project is using React, Tailwind, SCSS, TS and Vite. After migration application works well with all Tailwind styles locally. It is also possible to build the application locally. The problem is with building application in the CI/CD process.

Old TailwindCSS configuration:

postcss.config.js
tailwind.config.js
tailwind.css

New TailwindCSS configuration for Vite which was applied to the project - https://tailwindcss.com/docs/installation/using-vite 1. package.json

2. vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import tailwindcss from '@tailwindcss/vite';
import { configDefaults } from 'vitest/config';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      src: path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
  },
  test: {
    globals: true,
    environment: 'jsdom',
    exclude: [...configDefaults.exclude, 'e2e/*'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html', 'lcov'],
      reportsDirectory: 'coverage',
      reportOnFailure: true,
    },
  },
});

3. tailwind.css

@import 'tailwindcss';

Problem to solve

vite v6.3.5 building for development...
transforming...
✓ 73 modules transformed.
✗ Build failed in 1.17s
error during build:
[vite:css] Failed to load PostCSS config (searchPath: /home/vsts/work/1/s): [ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/vsts/work/1/s/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/home/vsts/work/1/s/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///home/vsts/work/1/s/postcss.config.js?t=1747035485705:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:263:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:540:24)
    at async req$3 (file:///home/vsts/work/1/s/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:11658:13)
    at async Object.search (file:///home/vsts/work/1/s/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:11400:23)
file: /home/vsts/work/1/s/src/styles/index.scss

For my internal styles I am using index.scss file but for tailwind styles I've created tailwind.css file. Both of them are imported to the same parent component. Previously I had that postCss config file but now I don't have it so I don't know why this error occurs. Any ideas?

I checked what happens in the building process and I found something like:

The problem occurs before Pull Request to the dev branch. First many conditions need to be passed. One of them is pre-build check and in that step the problem occurs. In that step I check if it;s possible to install all dependencies and build application. If not, it's not possible to finish the PR — Kuba Bujak
– Kuba Bujak, Commented May 12 at 8:10
index.scss - Just a note here that TailwindCSS v4 officially does not support preprocessors, so any issues arising from this will not be addressed. See more: Deprecated: Sass, Less and Stylus preprocessors support — rozsazoltan
– rozsazoltan, Commented May 12 at 8:19
Yes I know about this index.scss, that's why I've splitted my styles to tailwind.css file and my styles to index.scss. — Kuba Bujak
– Kuba Bujak, Commented May 12 at 8:31
I checked it twice and the config is removed as well as dependencies in the package.json. I've run the build locally with flag --debug and I see that still I have some dependencies: vite:config css: { vite:config transformer: 'postcss', vite:config preprocessorMaxWorkers: 0, vite:config devSourcemap: false vite:config }, vite:config json: { namedExports: true, stringify: 'auto' }, vite:config builder: undefined, — Kuba Bujak
– Kuba Bujak, Commented May 12 at 8:49

rozsazoltan · Accepted Answer · 2025-05-12 08:22:26Z

0

Solution #1 - Vite with TailwindCSS (without PostCSS)

Starting with TailwindCSS v4, PostCSS is no longer needed if you're using Vite. If you're not using PostCSS for anything else, you should remove the postcss.config.js file and the related dependency.

npm uninstall postcss postcss-import autoprefixer

Solution #2 - PostCSS with TailwindCSS (with Vite)

If you're using a PostCSS plugin that's independent of TailwindCSS, it's recommended to avoid using the TailwindCSS Vite plugin and instead use TailwindCSS through PostCSS as well.

npm uninstall autoprefixer @tailwindcss/vite
npm install tailwindcss @tailwindcss/postcss postcss

postcss.config.mjs (important: use mjs instead of js)

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// ...

export default defineConfig({
  plugins: [react()],
  // ...
}

edited May 12 at 8:22

answered May 12 at 8:10

rozsazoltan

18.1k7 gold badges49 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kuba Bujak May 12 at 8:12

I've already removed postcss.config.js and package-lock.json. Then I've installed all dependencies again the problems still occurs

rozsazoltan May 12 at 8:25

vite.dev/guide/features#postcss & tailwindcss.com/docs/upgrade-guide#using-postcss

Trenton McKinney · Accepted Answer · 2025-05-14 16:50:50Z

0

After a few hours spent on investigations, I found source of the problem.

Configuration is OK but the problem is inside CI/CD. Locally that works fine, but in the CI/CD there are two versions at once - with CRA configuration and Vite configuration. I can see my updated and new files, but all deleted files still are visible inside pipeline. Even if I've removed postcss.config.js and rest of these old configs, they are still taken from the dev branch to which I am trying to merge my changes.

edited May 14 at 16:50

Trenton McKinney

63.2k41 gold badges169 silver badges212 bronze badges

answered May 13 at 12:50

Kuba Bujak

551 silver badge8 bronze badges

Collectives™ on Stack Overflow

React + Vite + TailwindCSS application is not building

2 Answers 2

Solution #1 - Vite with TailwindCSS (without PostCSS)

Solution #2 - PostCSS with TailwindCSS (with Vite)

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution #1 - Vite with TailwindCSS (without PostCSS)

Solution #2 - PostCSS with TailwindCSS (with Vite)

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related