React.js 变量未使用 tailwind css 在 css 中呈现

Question

import React from "react";
import carousel from "../assets/index";
import Image from "next/image";

const threeD = () => {
    const length = carousel.length;
    const cardWidth = 288;
    const cardsGap = 4;
    const circumference = length * cardWidth + (length - 1 * 4);
    return (
        <div className={`carouselBox`}>
            <div
                className={`flex gap-[${cardsGap}px] w-[${circumference}px] h-[${circumference}px]`}
            >
                {carousel.map((item, index) => (
                    <Image
                        key={index}
                        src={item}
                        alt="yhello"
                        className={`w-[${cardWidth}px] card`}
                    />
                ))}
            </div>
        </div>
    );
};

export default threeD;

这是我的代码，我想要变量的宽度和高度，但它没有渲染请建议我任何解决方案。

const [cardWidth, setCardWidth] = useState(288)

我已经使用了 useState 钩子，但它没有从变量中获取宽度，有什么解决方案吗

Answer 1

Tailwind 在运行时不会生成类。这意味着

w-[${someVariable}px]

不起作用。为什么不直接在

width

上使用

<Image />

属性呢？

import React from "react";
import carousel from "../assets/index";
import Image from "next/image";

const threeD = () => {
    const length = carousel.length;
    const cardWidth = 288;
    const cardsGap = 4;
    const circumference = length * cardWidth + (length - 1 * 4);
    return (
        <div className={`carouselBox`}>
            <div
                className={`flex gap-[${cardsGap}px] w-[${circumference}px] h-[${circumference}px]`}
            >
                {carousel.map((item, index) => (
                    <Image
                        key={index}
                        src={item}
                        alt="yhello"
                        className="card"
                        width={cardWidth}
                    />
                ))}
            </div>
        </div>
    );
};

export default threeD;

Answer 2

Tailwind CSS 不会直接解释类字符串中的动态值。 Tailwind 在构建时使用静态类名来生成 CSS，因此动态计算的值（例如 ${cardsGap}px 或 ${cardWidth}px）将不起作用。修复方法如下： 如果您使用动态类，请使用内联CSS

import React from "react";
import carousel from "../assets/index";
import Image from "next/image";

const threeD = () => {
    const length = carousel.length;
    const cardWidth = 288;
    const cardsGap = 4;
    const circumference = length * cardWidth + (length - 1 * 4);
    return (
        <div className={`carouselBox`}>
            <div
                 **style{{gap:`${cardsGap}px`}}**
                className={`flex w-[${circumference}px] h-[${circumference}px]`}
            >
                {carousel.map((item, index) => (
                    <Image
                        key={index}
                        src={item}
                        alt="yhello"
                        className={`w-[${cardWidth}px] card`}
                    />
                ))}
            </div>
        </div>
    );
};

export default threeD;