Question 412909 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – TailwindCSS not implementing properly on deployment

I have recently started a project using the npm create vite@latest my-project -- -- template react as stated in the Vite 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, some of the TailwindCSS styles are not being implemented as well as some images.

For example: srcassetscsslogin.css

#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 one with the @apply Tailwind styles is not being implemented when I deployed it in Vercel. As well as the background-image: url('../images/backgrounds/techno-blue-hexagonal-wave.jpg'); where the image is located in the same assets folder except in /assets/images. Here are the configurations I have with TailwindCSS and PostCSS as I followed in the TailwindCSS Guide.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
    './src/pages/**/*.{js,jsx,ts,tsx}',
    './src/components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    colors: {
      primary: '#2a2a2a',
      'primary-rgb': '42, 42, 42',
      secondary: '#39ff14',
      'secondary-rgb': '57, 255, 20',
      tertiary: '#2ed610',
      'tertiary-rgb': '46, 214, 16',
      accent: '#ff0000',
      'accent-rgb': '255, 0, 0',
      background: '#1e1e1e',
      'background-rgb': '30, 30, 30',
      text: '#f5f5f5',
      'text-rgb': '245, 245, 245',
      danger: '#dc3545'
    },
    fontFamily: {
      serif: ['EB Garamond', 'serif'],
      sans: ['Neuton', 'sans-serif'],
      mono: ['Courier Prime', 'monospace'],
      cursive: ['Dancing Script', 'cursive'],
    },
    extend: {},
  },
  plugins: [],
};

postcss.config.js

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

package.json

{
  "name": "myproject",
  "private": true,
  "version": "1.0.0",
  "description": "Something.",
  "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",
    "cssnano": "^7.0.6",
    "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"
  }
}

Any ideas on where I might have gone wrong or if I’m missing something? My css are in the srcassetscss folder and the images I have used are in the srcassetsimages folder. I hope someone could help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Okay good news is I found a work-around with the issue in the images when loading by css. I just moved the images folder to the /public folder that way it can be accessed directly. But the issue with using the @apply styling with Tailwind still persists. Any ideas how to fix this? There is no issue when running it locally through npm run dev and opening it in browser http://localhost:port. But when I deploy it in Vercel or tried to npm run build then npm run preview and open the build preview on browser, the @apply styles are not being implemented.


  2. 0

    At the top of your CSS file, you need to import Tailwind’s directives.

    /* login.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* The rest of your CSS code */

    Tailwind Docs (Step 4) says:

    Add the Tailwind directives to your CSS

    Add the @tailwind directives for each of Tailwind’s layers to your
    main CSS file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search