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

问题描述

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

I created a custom color on tailwind in next js. On localhost the defined color appears fine, but when I deploy to vercel the color doesn't appear.

这是本地主机的图片

vercel 生产

tailwind.config.js

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

ButtonColor/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;

这种情况有什么解决方案吗?谢谢.

Any solutions for this case? thanks.

推荐答案

你不能使用 字符串连接 来创建 CSS 类名，因为 PurgeCSS 不知道在构建过程中保留您的自定义类.

You can't use string concatenation to create CSS class names because PurgeCSS won't know to preserve your custom classes during the build process.

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

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

Alternatively, you can enable SCSS in Next.js and create a custom global SCSS file. In that file, define your styles using tailwindcss directives while purposely not wrapping your styles in the @layer directive. Not using the @layer directive tells tailwind to not purge those classes at build. You will need to manage the purging of these classes yourself.

global.scss

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

这篇关于为什么在NextJS生产阶段没有定义tailwind中的自定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！