Nextjs/tailwindcss: className内の値を動的に代入すると適応されたりされなかったりする

Question

実現したいこと

下のように四角をabsoluteを使って動的に配置したいです。
アニメーションをする関係で、flexやgridは使いたくありません

発生している問題・分からないこと

下のようにすべてが　top-0 left-0 のところに集まってしまいます

エラーメッセージ

エラーは特に出ていません。

該当のソースコード

//page.tsx

import Block from "./component/Block";

export default function Home() {
  const lists = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 
  return (
    <main className="p-2">
      <div className="w-80 h-80 relative bg-zinc-600 overflow-visible ">
        {lists.map((n) => (
          <Block
            num={n}
            position={` top-${
              Math.floor(n / 3) === 0 ? 0 : Math.floor(n / 3) + "/3"
            } 
            left-${n % 3 === 0 ? 0 : (n % 3) + "/3"}`}
          />
        ))}
      </div>
    </main>
  );
}

//component/Block.tsx

import React from "react";

const Block = ({ num, position }: { num: number; position: string }) => {
  return (
    <div className={`w-1/3 aspect-square p-1 absolute ${position}`}>
      <div className="w-full h-full bg-lime-500 ">{num}</div>
    </div>
  );
};

export default Block;

//global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  overflow: hidden;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Blockの positionを動的に設定するのではなく一度、top-0,top-1/3,top-2/3 と left-0,left-1/3,left-2/3 をrun devした状況でそれぞれ一回ずつ保存した後にpositionに動的な値を設定すると期待通りに表示されます。しかし、サーバを停止してもう一度run devするとまたすべてがtop-0 left-0 のところに集まってしまいます。
このコードだけではなく、たまにこういうことが起きてしまいます。これはなぜでしょうか。

補足

nextjsは14.2.3

Answer 1

ドキュメントに書いてるある通りでtailwindは実際に使われてるcssしかビルド後のファイルに含めない。
動的に指定するとtailwindからは認識されない。
https://tailwindcss.com/docs/content-configuration#dynamic-class-names

常に含めたいcssならtailwind.config.jsのsafelistで指定する。
https://tailwindcss.com/docs/content-configuration#safelisting-classes

module.exports = {
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}

Comments

[dedede914]

ありがとうございました！！

Answer 2

https://zenn.dev/link/comments/6b26acaf84d977 こちらでコメントしたのを自己転載します。

---

CSS 変数を使えば、動的 / 静的の間をうまく取り持つことができるので、Tailwind でもその方法が使えると思います！

Emotion ドキュメント | Best Practice より "Advanced: CSS variables with style" の章

import { useState } from "react";

function App() {
  const [color, setColor] = useState<string>("#000000");
  const [isHover, setIsHover] = useState<boolean>(false);
  return (
    <div className="p-4">
      <p
        className={`hover:bg-[var(--bg-color-hover)]`} 
        style={{ "--bg-color-hover": color }}
      >
        Hover Me
      </p>
// 以下略

ちなみに、style Prop に CSS 変数を入れようとすると型チェックで弾かれるので、以下のような d.ts ファイルによる拡張が必要です。

import type * as CSS from 'csstype';

declare module 'csstype' {
  interface Properties {
    // CSS 変数を許可
    [index: `--${string}`]: string | number;
  }
}