如何在反应中默认启用顺风暗模式？

【问题标题】：How can I make the tailwind dark mode enabled by default in react?如何在反应中默认启用顺风暗模式？
【发布时间】：2022-01-26 11:54:02
【问题描述】：

例如，如果新用户第一次访问该站点，则应使用 darkMode: 'class' 选项默认启用暗模式。

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

你在正确的轨道上。设置darkMode: 'class' 后，您需要将class="dark" 应用于要应用暗模式的元素。

https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

【讨论】：

【解决方案2】：

此链接上的完整解决方案： https://en.taishikato.com/posts/how-to-implement-dark-mode-with-tailwind-css

@media (prefers-color-scheme: dark) {
  .dark\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    .dark\:container {
      max-width: 640px;
    }
  }
  .
  .

import React from 'react';
import './tailwind.css';

function App() {
  return (
    <div className="App dark:bg-black dark:text-white">

【讨论】：