如何在Create React App中使用Tailwind CSS设置body标签样式

以下几种方法都能有效设置body的背景样式：

方法1：使用Tailwind的@layer base包裹自定义样式 #

Tailwind的@tailwind base会重置默认HTML元素样式，直接编写的body样式优先级不足。把你的body样式放到@layer base中，就能让它被Tailwind正确合并，不会被覆盖：

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

@layer base {
  body {
    background-color: aqua;
  }
}

方法2：直接给body添加Tailwind类 #

你有两种方式添加Tailwind类：

• 在根组件（比如App.js）里通过useEffect动态添加：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    document.body.classList.add('bg-aqua');
  }, []);

  return (
    // 你的组件内容
  );
}

export default App;

• 直接在public/index.html的body标签上手动添加：

<body class="bg-aqua">
  <!-- 页面其他内容 -->
</body>

方法3：提升样式优先级（不推荐） #

如果要保留原写法，可以用!important强制提升优先级，但这种方式会破坏样式优先级逻辑，尽量少用：

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

body {
  background-color: aqua !important;
}

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