Vue项目中Tailwind渐变背景样式不生效，排查遗漏配置

我通过vue create命令创建Vue项目，在src/main.js中引入含Tailwind指令的./assets/styles.css。在src/components/HelloWorld.vue设置h-screen flex布局容器，内部两个w-1/2的div：一个用bg-gradient-to-r from-green-500 to-blue-900实现渐变背景，另一个通过自定义.bg-beige类设米色背景。但页面未呈现预期的半渐变半米色效果，logo显示正常，请问遗漏了什么配置或步骤？

1. 未完成Tailwind CSS的核心配置 #

vue create生成的项目默认不集成Tailwind，仅引入含指令的CSS文件不足以让Tailwind生效，必须完成以下配置：

• 安装依赖：在项目根目录执行

  npm install -D tailwindcss postcss autoprefixer
  

• 生成配置文件：

  npx tailwindcss init -p
  

• 修改tailwind.config.js，指定要扫描的文件路径，确保Vue组件被覆盖：

  module.exports = {
    content: [
      "./index.html",
      "./src/**/*.{vue,js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

2. 自定义类的定义位置错误 #

如果.bg-beige是自定义类，必须放在Tailwind指令之后定义，避免被Tailwind的样式覆盖：

/* src/assets/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.bg-beige {
  background-color: #f5f5dc;
}

3. 布局容器受默认样式干扰 #

检查并清除父元素的默认边距：

• 修改HelloWorld.vue的容器：

  <template>
    <div class="h-screen flex m-0 p-0">
      <div class="w-1/2 bg-gradient-to-r from-green-500 to-blue-900"></div>
      <div class="w-1/2 bg-beige"></div>
    </div>
  </template>
  

• 检查App.vue是否有额外边距，必要时清除：

  <template>
    <div id="app" class="m-0 p-0">
      <HelloWorld />
    </div>
  </template>
  

4. 未重启开发服务器 #

修改Tailwind配置或全局样式后，必须重启Vue开发服务器，确保新配置生效。

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