为什么在NextJS生产阶段没有定义tailwind中的自定义颜色

Question

我在下一个 js 中为顺风创建了一个自定义颜色。在 localhost 上，定义的颜色看起来不错，但是当我部署到 vercel 时，颜色没有出现。

这是本地主机的图片

vercel 生产

tailwind.config.js

const colors = require('tailwindcss/colors');

module.exports = {
  purge: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: {
        DEFAULT: '#23232D'
      },
      white: colors.white,
      gray: {
        DEFAULT: '#A1A1A1',
      },
      ...
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

按钮颜色/index.js

import PropTypes from 'prop-types';
import { motion } from 'framer-motion';

function ButtonColor({ color, isOpen, onClick }) {

  const variants = {
    open: { width: '100%' },
    closed: { width: '50%' },
  }

  return (
    <motion.div
      className={`bg-${color} h-6 cursor-pointer`}
      onClick={onClick}
      animate={isOpen ? "open" : "closed"}
      variants={variants}
    >
    </motion.div>
  )
}

ButtonColor.propTypes = {
  color: PropTypes.string.isRequired,
  isOpen: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
}

export default ButtonColor;

这种情况有什么解决方案吗？谢谢。

Answer 1

您不能使用 string concatenation 创建 CSS 类名，因为 PurgeCSS 不知道在构建过程中保留您的自定义类。

 className={`${color === 'red' ? 'bg-red' : 'bg-blue'} h-6 cursor-pointer`}

或者，您可以在 Next.js 中启用 SCSS 并创建一个 custom global SCSS 文件。在该文件中，使用 tailwindcss directives 定义您的样式，同时故意不在 @layer 指令中包装您的样式。不使用 @layer 指令会告诉 Tailwind 在构建时不要清除这些类。您需要自己管理这些类的清除。

global.scss

button {
  @apply h-6;
  @apply cursor-pointer;
  &.red{
    @apply bg-red-700 dark:bg-red-900;
    @apply text-white;
    @apply hover:bg-red-800 dark:hover:bg-red-800;
  }
  &.gray {
    @apply bg-gray-300 dark:bg-gray-600;
    @apply text-gray-900 dark:text-gray-200;
    @apply hover:bg-gray-400 dark:hover:bg-gray-500;
  }
}

 <motion.button className={`bg-${color}`} ...

旁注 - motion.div 应该是 motion.button