Deploying React-Vite Tailwindcss PostCSS

Help
,
1

I have recently started a project using the npm create vite@latest my-project -- -- template react as stated in the https://vite.dev/guide/. So far I have been doing well with the project in development running in localhost. However, when I now tried to deploy it in Vercel, it is showing errors on deployment. I don’t know what type of settings do I need to put in the vercel deployment page or if it has something with my config files in my project.

Here are the config files in my project:
\vite.config.js

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

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

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
  },
};

\package.json

{
  "name": "my-project",
  "private": true,
  "version": "1.0.0",
  "description": "Somethng",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "repository": {
    "type": "git",
    "url": "git-repo"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-brands-svg-icons": "^6.6.0",
    "@fortawesome/free-regular-svg-icons": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "@lordicon/react": "^1.10.0",
    "aos": "^2.3.4",
    "axios": "^1.7.7",
    "js-cookie": "^3.0.5",
    "lottie-web": "^5.12.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.1",
    "react-router-dom": "^6.26.2",
    "react-scroll": "^1.9.0",
    "react-svg": "^16.1.34",
    "sweetalert2": "^11.14.2"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@types/node": "^22.7.5",
    "@types/react": "^18.3.10",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.2",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.11.1",
    "eslint-plugin-react": "^7.37.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.9.0",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.13",
    "vite": "^5.4.8"
  }
}

\eslint.config.js

import js from '@eslint/js';
import globals from 'globals';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: {
        ...globals.browser,
        process: 'readonly',
      },
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    settings: { react: { version: '18.3' } },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
];

Here is the error I am getting in the deployment in vercel:

[15:05:48.597] Running build in Washington, D.C., USA (East) – iad1
[15:05:49.009] Cloning gitlab.com/lng-athens/webportfolio-admin (Branch: master, Commit: eb0abe8)
[15:05:49.379] Previous build cache not available
[15:05:49.939] Cloning completed: 933.029ms
[15:05:50.278] Running "vercel build"
[15:05:51.460] Vercel CLI 37.12.0
[15:05:52.227] Running "install" command: `npm install`...
[15:06:17.402] 
[15:06:17.402] added 386 packages, and audited 387 packages in 25s
[15:06:17.403] 
[15:06:17.403] 128 packages are looking for funding
[15:06:17.403]   run `npm fund` for details
[15:06:17.407] 
[15:06:17.408] 1 low severity vulnerability
[15:06:17.408] 
[15:06:17.408] To address all issues (including breaking changes), run:
[15:06:17.408]   npm audit fix --force
[15:06:17.408] 
[15:06:17.409] Run `npm audit` for details.
[15:06:17.825] 
[15:06:17.826] > admin@1.0.0 build
[15:06:17.826] > vite build
[15:06:17.826] 
[15:06:18.085] e[36mvite v5.4.10 e[32mbuilding for production...e[36me[39m
[15:06:18.141] transforming...
[15:06:18.409] node:internal/process/promises:391
[15:06:18.409]     triggerUncaughtException(err, true /* fromPromise */);
[15:06:18.410]     ^
[15:06:18.411] 
[15:06:18.411] [Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /vercel/path0): [Error] Loading PostCSS Plugin failed: Cannot find module 'cssnano'
[15:06:18.411] Require stack:
[15:06:18.411] - /vercel/path0/postcss.config.js
[15:06:18.411] 
[15:06:18.411] (@/vercel/path0/postcss.config.js)
[15:06:18.411] Error: Loading PostCSS Plugin failed: Cannot find module 'cssnano'
[15:06:18.411] Require stack:
[15:06:18.416] - /vercel/path0/postcss.config.js
[15:06:18.416] 
[15:06:18.416] (@/vercel/path0/postcss.config.js)
[15:06:18.416]     at load (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33631:11)
[15:06:18.416]     at file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33656:16
[15:06:18.417]     at Array.map (<anonymous>)
[15:06:18.417]     at plugins (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33655:8)
[15:06:18.417]     at processResult (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33725:14)
[15:06:18.417]     at file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:33855:14]
[15:06:18.417] 
[15:06:18.417] Node.js v20.18.0
[15:06:18.435] Error: Command "npm run build" exited with 1
[15:06:18.656]

I hope someone could help me.

2

Welcome to the Vercel Community, @lng-athens! :classical_building:

Thank you for providing detailed information about your project!

The main problem seems to be related to your PostCSS configuration and a missing ‘cssnano’ module. Make sure you have the module:

npm install --save-dev cssnano

After installing cssnano, you should update your postcss.config.js to include it for production builds:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
  },
};

Could you give that a go and let us know how you get on?

3

Worked like a charm… However, now I noticed that some css styles is not being implemented. Particulary the ones with the tailwind @apply styling.

e.g.

#app-container {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;

  .content {
    @apply flex items-center justify-center;
    grid-column: auto;
    grid-row: auto;
    background-image: url('../images/backgrounds/techno-blue-hexagonal-wave.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    .login-container {
        @apply justify-center w-full px-4;
        
        .col {
            @apply rounded-md py-4;
            background-color: rgba(0, 0, 0, 0.5);

            .logo {
                @apply mt-3 mb-4 mx-auto w-2/3;
            }

            .form-group {
                @apply px-4 mx-auto;

                .form-label {
                    @apply text-text font-mono text-sm;
                }
    
                .form-control {
                    @apply font-mono;
                }
            }

            .btn-submit {
                @apply text-text font-bold mx-auto mt-8 block px-10;
                background-color: #0d6efd;
            }
        }
    }
  }
}

@media (min-width: 1200px) {
    .login-container {
        .form-group {
            @apply px-0;
            width: 90%;
        }
    }
}

The ones with the @apply is not being implemented when I view the deployed project.

4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.