如何通过运行时字符串实现Tailwind CSS类的定位？

你遇到的核心问题是Tailwind CSS的编译机制限制——它是在编译时扫描代码里的静态类名生成CSS，你动态拼接的top-[${topOffset}%]这类运行时才会生成的类名，编译阶段根本检测不到，自然不会生成对应的样式规则，所以静态写能生效，动态拼接就不行。这和hook、异步没有直接关系。

方案1：使用内联样式（最推荐） #

直接通过style属性设置运行时计算的位置值，绕开Tailwind的编译限制：

{timeRecord.clockedTimes.map((time, index) => {
         let date = new Date(time.start);
         let topOffset = getTopOffset(date).toFixed(4);
                
         return (
                  <div 
                    className="absolute outline outline-red-400 w-1/2 left-1/2"
                    style={{ top: `${topOffset}%` }}
                  >
                     top-[${topOffset}%]
                  </div>
         )
})}

方案2：保留Tailwind语法（仅适用于有限范围的动态值） #

如果一定要用Tailwind的语法，你需要确保编译时能扫描到所有可能的类名。但如果topOffset是完全无规律的运行时数值，这个方法不现实；如果数值是某个固定范围内的离散值，可以提前把所有可能的类名写在代码注释里，让Tailwind检测到：

/* 提前列出所有可能用到的top类名，让Tailwind编译时生成 */
/* top-[10%] top-[20%] top-[30%] ... */

{timeRecord.clockedTimes.map((time, index) => {
         let date = new Date(time.start);
         let topOffset = getTopOffset(date).toFixed(4);
         let stringOffset = `top-[${topOffset}%]`;
         let className = `absolute ${stringOffset} outline outline-red-400 w-1/2 left-1/2`;
                
         return (
                  <div className={className} >
                     {stringOffset}
                  </div>
         )
})}

这个方法只适合数值有限的场景，通用情况下还是内联样式更靠谱。

不需要用hook来设置className字符串，你的问题本质不是状态管理或异步问题，而是Tailwind的编译逻辑导致动态类名无法被识别。

内容的提问来源于stack exchange，提问作者CrabBucket