Tailwind CSS在卡片组件上失效的问题求助

问题描述 #

卡片组件上的Tailwind CSS样式失效，删除组件内的样式代码并重新添加后，样式可临时正常生效，但重启项目后样式再次失效。已尝试将HTML目录文件添加到tailwind.config.js的content配置项中，问题仍未解决。

预期效果 #

实际效果 #

相关文件内容 #

src/index.css #

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

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

src/app.js #

import { BrowserRouter } from "react-router-dom";
import { HashLink as Link } from "react-router-hash-link";
import Header from "./pages/Header";
import About from "./pages/About";
import Resume from "./pages/Resume";
import Projects from "./pages/projects";
import Contact from "./pages/Contact";
import Card from "./card/card"


function App() {
  return (
    <BrowserRouter>
      <Header/>
      <About/> 
      <Resume/>
      <Card
        img = "./img/resume.png"
        title = "Resume"
        description = "d resume"
        button = "download"
      />
      <Projects/>
      <Contact/>
    </BrowserRouter>
  )
}

export default App;

src/card/card.jsx #

import React from "react";
export default function Card(props) {
  return (
    <div class="min-h-screen bg-orange-100  " className="card"> 
      <div
        class="w-60 p-2 bg-white rounded-xl transform transition-all hover:-translate-y-2 duration-300 shadow-lg hover:shadow-2xl"
        className="card_body"
      >
        <img class="h-40 object-cover rounded-xl" src={props.img} />
        <div class="p-2"></div>
        <h2 class="font-bold text-lg mb-2 " className="card_title">
          {props.title}
        </h2>
        <p class="text-sm text-gray-600" className="card_description">
          {props.description}
        </p>
        <div class="m-2">
          <button
            class="text-white bg-sky-500 px-3 py-1 rounded-md hover:bg-purple-700"
            className="card_btn"
          >
            {props.button}
          </button>
        </div>
      </div>
    </div>
  );
}

tailwind.config.js #

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

解决方案 #

1. 修正React组件的类名属性 #

React中元素的类名属性必须使用className，而非原生HTML的class。当同时写class和className时，React会忽略class属性，导致Tailwind在构建时无法扫描到这些类名，进而将其从最终样式中移除。

修改src/card/card.jsx，将所有class属性合并到className中：

import React from "react";
export default function Card(props) {
  return (
    <div className="card min-h-screen bg-orange-100"> 
      <div
        className="card_body w-60 p-2 bg-white rounded-xl transform transition-all hover:-translate-y-2 duration-300 shadow-lg hover:shadow-2xl"
      >
        <img className="h-40 object-cover rounded-xl" src={props.img} />
        <div className="p-2"></div>
        <h2 className="card_title font-bold text-lg mb-2">
          {props.title}
        </h2>
        <p className="card_description text-sm text-gray-600">
          {props.description}
        </p>
        <div className="m-2">
          <button
            className="card_btn text-white bg-sky-500 px-3 py-1 rounded-md hover:bg-purple-700"
          >
            {props.button}
          </button>
        </div>
      </div>
    </div>
  );
}

2. 清理Tailwind配置的冗余项 #

Tailwind CSS v3已使用content替代v2的purge配置，保留purge会导致配置冲突，删除tailwind.config.js中的purge: ["*"]行：

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

验证 #

修改完成后重启项目，卡片样式应正常显示，且再次重启项目后样式不会失效。

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