I am using Tailwind 3.3.2 with Next.js 13.4.4. On my website.
I didn't implement dark mode, and everything was working fine for me.
I tested it on both laptops and mobile devices using various browsers (Chrome, Firefox, etc.), and everything was working as expected(light mode), even when the system was in dark mode.

我使用的是TailWind 3.3.2和Next.js 13.4.4。在我的网站上。我没有实现黑暗模式，一切对我来说都运行得很好。我在笔记本电脑和移动设备上使用不同的浏览器(Chrome、Firefox等)进行了测试，一切正常(灯光模式)，即使系统处于黑暗模式也是如此。

But when I tested it on the Samsung browser, I found that it displayed the website in dark mode (my phone was in dark mode), but this issue did not occur with Chrome or Mozilla.

但当我在三星浏览器上测试它时，我发现它在黑暗模式下显示网站(我的手机处于黑暗模式)，但这个问题在Chrome或Mozilla上没有出现。

In tailwind.config.js file I have

在Teswind.config.js文件中，我有

model.exports = {
 darkmode: 'class'
}

and before I've tried

在我尝试之前

model.exports = {
 darkmode: false
}

And none of them worked for me.
If anyone has experienced this issue before, I would appreciate any help.

但他们都不为我工作。如果任何人以前经历过这个问题，我将不胜感激。

Thanks.

谢谢。

It might have been the cause of @media queries

这可能是@媒体查询的原因

@media (prefers-color-scheme: dark) {
  background: #000; //dark theme
}

But in your case, this doesn't appear to be the issue since it works fine and displays in light-mode on other browsers even when the device system preference is dark-mode.

但在你的情况下，这似乎不是问题，因为它运行良好，在其他浏览器上以亮模式显示，即使在设备系统首选为暗模式时也是如此。

This is probably caused due to the browser setting in Samsung browser which overrides your styles.

这可能是因为三星浏览器中的浏览器设置会覆盖您的样式。

In your Samsung browser settings, search for options related to Dark Theme and try switching it off. Hope this solves your issue.

在您的三星浏览器设置中，搜索与黑暗主题相关的选项，并尝试将其关闭。希望这能解决你的问题。

I would like to share the solution I found, and I would appreciate any help if anyone has a different way of solving the issue I had since Samsung browser didn't respect my Tailwind code. I had to find a different way to force my approach.

我想分享我找到的解决方案，如果有人有不同的方法来解决我的问题，我将不胜感激，因为三星浏览器不尊重我的TailWind代码。我必须找到一种不同的方式来强迫我的方法。

I found navigator.userAgent.

我找到了navigator.userAgent。

Then using useState I did:

然后使用useState，我做到了：

const [isSamsungBrowser, setIsSamsungBrowser] = useState(false);

Then I used useEffect to run a checking function on every reload:

然后，我使用useEffect在每次重新加载时运行检查函数：

useEffect(() => {
setIsSamsungBrowser(navigator.userAgent.includes("Samsung"));}, []);

The last part was to conditionally render the content based on isSamsungBrowser status:

最后一部分是根据isSamsungBrowser状态有条件地呈现内容：

{isSamsungBrowser ? (
      ""
    ) : (
      <div className="absolute -bottom-[1px] w-full">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
          <path
            fill="#ffffff"
            fillOpacity="1"
            d="M0,192L48,192C96,192,192,192,288,208C384,224,480,256,576,272C672,288,768,288,864,256C960,224,1056,160,1152,138.7C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
          ></path>
        </svg>
      </div>
    )}