React背景颜色切换器无输出问题：页面空白求助

页面空白原因 #

你的代码里div使用了Tailwind的w-full和h-screen类，但如果没有正确配置Tailwind CSS，这些类不会生效，div就没有高度和宽度，导致页面看起来是空白的。另外当前代码也缺少颜色切换的交互逻辑，只有初始背景色的设置。

修复步骤 #

1. 确保Tailwind正确配置 #

如果是Create React App项目，需完成以下配置：

• 安装依赖：npm install tailwindcss postcss autoprefixer
• 生成配置文件：npx tailwindcss init -p，并修改tailwind.config.js的内容路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 在src/index.css中导入Tailwind基础样式：

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

2. 添加颜色切换交互逻辑 #

修改App组件，添加按钮实现切换功能：

import { useState } from "react"

function App() {
  const [color, setColor] = useState("olive")
  const colorList = ["red", "blue", "green", "purple", "orange"]

  const switchColor = () => {
    // 随机选取与当前颜色不同的新颜色
    let newColor
    do {
      newColor = colorList[Math.floor(Math.random() * colorList.length)]
    } while (newColor === color)
    setColor(newColor)
  }

  return (     
    <div 
      className="w-full h-screen flex items-center justify-center duration-200"
      style={{backgroundColor: color}}
    >
      <button 
        onClick={switchColor}
        className="px-6 py-3 bg-white/80 rounded-lg font-medium shadow-md hover:bg-white transition"
      >
        切换背景色
      </button>
    </div>   
  )
}

export default App

3. 验证效果 #

配置完成并修改代码后，启动项目，页面会显示初始橄榄绿色背景，点击按钮即可随机切换背景色，duration-200配置的过渡动画也会生效。

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