为什么NextJS生产阶段没有定义tailwind中的自定义颜色 [英] Why is the custom color in tailwind not defined in NextJS production stage

问题描述

我在下一个 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: [],
}

ButtonColor/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 指令告诉 tailwind 在构建时不要清除这些类.您需要自己管理这些类的清除.

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中的自定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！