TailwindCSS 在部署时未正确实施

Question

我最近开始了一个使用

npm create vite@latest my-project -- -- template react

的项目，如Vite指南中所述。到目前为止，我在本地主机上运行的开发项目进展顺利。然而，当我现在尝试在 Vercel 中部署它时，一些 TailwindCSS 样式以及一些图像没有被实现。

例如：

src\assets\css\login.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%;
        }
    }
}

当我将其部署在 Vercel 中时，具有

@apply

Tailwind 样式的样式并未实现。以及

background-image: url('../images/backgrounds/techno-blue-hexagonal-wave.jpg');

，其中图像位于除

assets

之外的同一

/assets/images

文件夹中。以下是我在 TailwindCSS 指南中遵循的 TailwindCSS 和 PostCSS 的配置。

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"
  }
}

对于我可能出错的地方或者我是否遗漏了什么有什么想法吗？我的 css 位于

src\assets\css\

文件夹中，我使用的图像位于

src\assets\images\

文件夹中。我希望有人能帮忙。

Answer 1

在 CSS 文件的顶部，您需要导入 Tailwind 的指令。

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

/* The rest of your CSS code */

Tailwind 文档说：

将 Tailwind 指令添加到您的 CSS

将 Tailwind 每个层的 @tailwind 指令添加到您的 主要 CSS 文件。