v4 Upgrade Issues in Monorepo/Micro frontend stack - Vue/Vite/TS/NX

[Dawdre]

Current architecture for v3 Tailwind

• all micro frontends have their own postcss.config.js, tailwind.config.js and vite.config.mts config files
• uses NX repo management
• uses https://single-spa.js.org/

nx-microfrontend-monorepo/
├── apps/                                    # 🏗️ Microfrontend Applications
│   ├── shell/                              # 🎯 Root Single-SPA orchestrator
│   │   ├── src/
│   │   │   ├── main.ts
│   │   ├── index.html                     # Entry point with MFE routes
│   │   ├── vite.config.mts
│   │   └── project.json
│   │
│   ├── css/                               # 🎨 CSS Microfrontend (Tailwind monolith)
│   │   ├── src/
│   │   │   └── main.ts                    # Single-SPA CSS lifecycle
│   │   ├── vite.config.mts
│   │   └── project.json
│   │
│   ├── sidebar/                           # 🧭 Navigation microfrontend
│   │   ├── src/
│   │   │   └── main.ts
│   │   ├── vite.config.mts
│   │   └── project.json
│   │
│   ├── docs/                              # 📚 Documents microfrontend
│   │   ├── src/
│   │   │   └── main.ts
│   │   ├── vite.config.mts
│   │   └── project.json
│   │
│   └── others/
│
├── modules/                               # 📦 Shared Libraries & Business Logic
│   ├── shared/                           # 🔄 Cross-cutting concerns
│   │   ├── ui/                           # 🎨 Design System & UI Components
│   │   │   ├── src/
│   │   │   │   └── index.ts              # Component exports
│   │   │   ├── assets/
│   │   │   │   ├── base.scss             # 🎯 Global CSS entry point
│   │   │   │   ├── corporate-palette/      # 🎨 Auto-generated design colors
│   │   │   │   │   ├── palette.css
│   │   │   │   │   ├── palette.cjs
│   │   │   │   │   └── palette.mjs
│   │   │   │   ├── presets/              # PrimeVue theme presets
│   │   │   │   │   └── lara/
│   │   │   │   ├── color-overrides.css
│   │   │   │   └── tippy.css
│   │   │   ├── tailwind.config.js        # 🎨 Shared Tailwind config
│   │   │   └── package.json
│   │   │
│   │   ├── utils/                        # 🛠️ Utility functions
│   │   │   ├── src/
│   │   │   │   └── Helpers/
│   │   │   │       └── DataUtils.ts
│   │   │   └── package.json
│   │   │
│   │   ├── constants/                    # 📊 Application constants
│   │   │   ├── src/
│   │   │   │   └── sentry.ts             # Error tracking configuration
│   │   │   └── package.json
│   │   │
│   │   └── stores/                       # 🗃️ Pinia state management
│   │       ├── src/
│   │
│   ├── module1/                   # ⚡ Module 1 domain logic/service
│   │   ├── src/
│   │   └── package.json
│   │   └── project.json
│   │
│   ├── module2/                       # 🏗️ Module 2 domain logic/service
│   │   ├── src/
│   │   └── package.json
│   │   └── project.json
│
├── tools/                                # 🔧 Development & Build Tools
│   ├── storybook/                        # 📖 Component documentation
│   │   ├── .storybook/
│   │   │   └── main.ts
│   │   ├── vite.config.mts
│   │   ├── project.json
│   │   └── README.md
│
├── documentation/                        # 📚 Project documentation
│
├── dist/                                 # 🏭 Build output
│   └── apps/
│       ├── shell/
│       ├── css/
│       │   └── app.css                  # 🎯 Generated global CSS
│       ├── others/
│
├── node_modules/                         # 📦 Dependencies
├── .nx/                                  # 🔧 NX cache & workspace data
├── nx.json                               # ⚙️ NX workspace configuration
├── package.json                          # 📦 Root package.json
├── pnpm-lock.yaml                        # 🔒 Lock file
├── tsconfig.base.json                    # 📝 Base TypeScript config
├── vite-aliases.config.ts                # 🔗 Global aliases
├── vitest-common-setup.ts                # 🧪 Test setup
├── .eslintrc.cjs                         # 📏 ESLint config
├── .gitignore
└── README.md

{
  "dependencies": {
    "pinia": "^2.2.1",
    "primevue": "^4.3.3",
    "single-spa": "^6.0.1",
    "single-spa-layout": "^2.2.0",
    "single-spa-vue": "^3.0.0",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "vue": "^3.5.13",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
    "@nx/cypress": "19.4.2",
    "@nx/devkit": "19.4.2",
    "@nx/eslint": "19.4.2",
    "@nx/eslint-plugin": "19.4.2",
    "@nx/js": "19.4.2",
    "@nx/playwright": "19.4.2",
    "@nx/storybook": "^19.5.7",
    "@nx/vite": "19.4.2",
    "@nx/vue": "19.4.2",
    "@nx/web": "19.4.2",
    "@nx/workspace": "19.4.2",
    "@vitejs/plugin-vue": "^5.1.2",
    "@vue/eslint-config-prettier": "9.0.0",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "^2.4.6",
    "autoprefixer": "10.4.13",
    "nx": "19.4.2",
    "postcss": "8.4.41",
    "tailwindcss": "3.2.7",
    "typescript": "5.8.2",
    "vite": "~5.4.0", // this is quite out of date!!!
    "vite-plugin-dts": "~2.3.0",
    "vite-plugin-single-spa": "^0.6.1",
    "vite-plugin-vue-devtools": "^7.3.7",
    "vitest": "1.6.0",
    "vue-tsc": "^2.2.8"
  }
}

// apps/css/vite.config
export default defineConfig(({ command }) => ({
  base: command === 'build' ? '/apps/css/' : '/',
  root: __dirname,
  cacheDir: '../../node_modules/.vite/apps/css',

  resolve: {
    alias: companyMonorepoAliases,
  },

  server: {
    port: servePort,
    host: 'localhost',
  },

  preview: {
    port: servePort,
    host: 'localhost',
  },

  plugins: [
    nxViteTsPaths(),
    // this is where I will add the new tailwind vite plugin

    // (1 of 2) In development, we serve CSS as a single-spa app to enable HMR.
    command === 'serve'
      ? vitePluginSingleSpa({
          type: 'mife',
          serverPort: servePort,
          spaEntryPoints: 'src/main.ts',
          projectId: '@company/css',
        })
      : null,

    // (2 of 2) In development, we serve CSS as a single-spa app to enable HMR.
    command === 'serve'
      ? {
          name: 'tailwind-jit-hmr',
          enforce: 'post',
          async handleHotUpdate({ file, server }) {
            const extensions = ['.vue', '.ts', '.js', '.tsx', '.jsx'];
            if (extensions.some((ext) => file.endsWith(ext))) {
              // Trick Vite into thinking base.scss changed, so it does a CSS HMR update
              const baseScssId = path.resolve(
                __dirname,
                '../../modules/shared/ui/assets/base.scss'
              );
              const baseScssModule =
                server.moduleGraph.getModuleById(baseScssId);

              if (baseScssModule) {
                return [baseScssModule];
              }
            }

            // If it's not a file we care about, or we can't find base.scss in the module graph, do nothing
            return [];
          },
        }
      : null,
  ],

  // When building, we need to output a CSS file that can be consumed by the shell app.
  build: {
    outDir: '../../dist/apps/css',
    emptyOutDir: true,

    lib: {
      name: '-',
      entry: path.resolve(
        __dirname,
        '../../modules/shared/ui/assets/base.scss'
      ),
    },
    rollupOptions: {
      output: {
        assetFileNames: 'company.css',
      },
    },
  },
}));

// apps/shell/vite.config.mts
export default defineConfig(({ mode }) => {
  return {
  // other config
    plugins: [
     {
        name: 'transform-shell-html',
        transformIndexHtml(html) {
          const dev = process.env.NODE_ENV === 'development';

          let injectDevCss = '';
          let injectProdCss = '';

          if (dev) {
            injectDevCss = '<application name="@company/css"></application>';
          } else {
            injectProdCss =
              '<link rel="stylesheet" href="/apps/css/company.css" />';
          }

          return html
            .replace('<company:inject-dev-css />', injectDevCss)
            .replace('<company:inject-prod-css />', injectProdCss);
        },
      },
   }
]
});

v4 upgrade steps

I am seeing NO errors whatsoever, both compilation and runtime. It all seems to be failing silently. My local dev environment runs fine but my app is now completely unstyled. The browser is not loading any tailwind related CSS at all it seems.

• attempted to the use the upgrade tool but it didn't appear to find my base.scss and simply upgrade the dependencies. The only changes added were in package.json
• followed https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool manual steps for Vite
• installed and added the tailwindcss/vite in my app/css/vite.config.mts (we have an entire microfrontend for serving our monolithic CSS for dev, for hot reload reasons)
• delete/uninstall everything postcss entirely
• no longer use tailwind.config.js and use @theme inside my base.scss (I also tried the @config '../tailwind.config.js approach)
• I also tried using @import 'tailwindcss' source('../../*') and multiple @source declarations all mimicking what was in my content: [] in the old tailwind JS config. Still no luck
• I also tried moving my master stylesheet into the same microfrontend where the vite config and tailwindcss/vite plugin lives. Which does to me make more sense (I am brand new to this codebase). This also didn't appear to work BUT I did see a compile error - @import 'tailwindcss' module could not be found. Not entirely sure what that tells me apart from the obvious.

I have read hours worth of issues and discussions on this topic and feel like I have exhausted my options. My conclusion is that my particular setup is still expecting a CSS in JS pipeline and that v4 has changed their philosophy in bringing everything back to CSS first (which I do like FYI).

I am sure you can appreciate this would be very difficult to replicate in a repo, so I hope I have given enough context and someone in a similar situation has some lessons learned or tips. Thanks in advance

[Dawdre]

Update

• Bricked node_modules and pnpm lock
• pnpm install @tailwindcss/vite and added to apps/css/vite.config.mts plugins: [tailwindcss()]
• deleted ALL tailwind.config.js files in my entire monorepo (which I didn't do before, only commented out code)

I am now seeing a new error, some progress 🤔

css: Error: Failed to resolve entry for package "tailwindcss". The package may have incorrect main/module/exports specified in its package.json.
css:   code: 'ERR_RESOLVE_PACKAGE_ENTRY_FAIL'
css: Node.js v24.1.0

[ankittchauhann]

I am getting this error while building the app using vite.
/src/styles.css doesn't exist at build time, it will remain unchanged to be resolved at runtime