Tailwind CSS中sm:text-2xl异常覆盖其他样式问题求助

• 核心问题是属性语法错误：第二个div的id属性错误地包含了本该属于className的样式规则（text-black text-xl），导致浏览器无法正确解析样式类，进而引发样式覆盖异常。
• 额外注意：你可能混淆了Tailwind响应式前缀逻辑——sm:text-2xl是给宽度≥640px的屏幕用的，若要针对**小屏幕（宽度<640px）**调整文本大小，应该用max-sm:text-2xl。

修正后的代码：

import React from "react";

export const Home = () => {
  return (
    <div className="flex flex-col w-screen justify-evenly items-center mt-16">
      <div
        id="details-main-1"
        className="flex flex-col items-center justify-evenly text-slate-900 text-6xl"
      >
        Welcome to the <span className="text-slate-300"> Home Page</span>
      </div>
      <div 
        id="details-main-2" 
        className="text-black text-4xl max-sm:text-2xl"
      >
        hello
      </div>
      <div id="details-main-3"></div>
    </div>
  );
};

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