相关疑难解决方法(0)

我正在将 Vue3 与 TailwindCSS 结合使用，并希望创建一个具有动态grid-cols-{n}类的网格。我知道 TailwindCSS 默认情况下最多支持 12 列，但我无法自定义主题，因为列的数量完全是动态的。

给出以下纯 HTML / Js 示例

const amountOfItemsPerRow = 16;

const container = document.getElementById("container");

for (let i = 0; i < amountOfItemsPerRow; i++) {
  const item = document.createElement("div");
  item.innerText = i;
  container.appendChild(item);
}

container.classList.add(`grid-cols-${amountOfItemsPerRow}`); // this doesn't work if the value is greater than 12

<script src="https://cdn.tailwindcss.com"></script>

<div id="container" class="grid"></div>

amountOfItemsPerRow如果小于或等于 12，此代码可以正常工作，否则 CSS 就会损坏。

我是否必须编写代码来设置纯 CSS 来解决此问题，或者是否有动态 Tailwind 解决方案？

另一种方法：

根据我尝试替换该行的文档

container.classList.add(`grid-cols-${amountOfItemsPerRow}`);

和

container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`);

提出一种“本地”方法，但这没有帮助。

我在下一个 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 …