React中Tailwind CSS自定义断点失效问题求助

在React网站实现响应式布局时，自定义了Tailwind断点mc对应1024px，但使用mc:flex类时，无论屏幕尺寸是否超过1024px，flex布局均未生效。期望屏幕宽度≥1024px时启用flex布局，否则不启用。

相关代码 #

tailwind.config.js #

/** @type {import('tailwindcss).Config} */
module.exports = {
  content: [
    "./src/Components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    screens: {
      'md': '720px',
      // => @media (min-width: 720px) { ... }

      'mc': '1024px',
      // => @media (min-width: 1024px) { ... }

      'mb': '1920px',
      // => @media (min-width: 1920px) { ... }
    },

    extend: {},
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'primary': '#FF7E00',
      'secondary': '#A8A8A8',
      'orange': '#FF7E00',
      'gray': '#A8A8A8',
      'slate': '#CBD5E1',
      'white': '#ffffff',
      'black': '#000000',
      'red'  : '#FF0000',
      'yellow'  : '#FFFF00',
      'green'  : '#00FF00',
    },
  },
  plugins: [],
}

App.js #

import { useEffect } from "react";
import "./App.css";
import Nav from "./Components/Nav";
import Hero from "./Components/Hero";
import FeaturesHeader from "./SectionHeaders/Features";
import MainFeatures from "./Data/MainFeaturesCard";
import Card from "./Components/Card";
import ModulesHeader from "./SectionHeaders/Modules";
import InvisibleCard from "./Components/InvisibleCard";
import Modules from "./Data/Modules";
import Modules2 from "./Data/Modules2";
import ClientsHeader from './SectionHeaders/Clients';
import Clients from './Data/Clients';
import TestimonialsHeader from './SectionHeaders/Testimonials';
import TestimonialsCard from './Components/TestimonialsCard';
import Testimonials from './Data/Testimonials';
import About from "./Components/About";
import Contact from './Components/Contact';

function App() {
  useEffect(() => {
    document.title = "BuildFolks";
  });

  return (
    <div>
      <span>
        <Nav />
        <Hero />
        <br />
        <br />
        <span id="features">
          <FeaturesHeader />
          <div className="mc:flex">
            {MainFeatures.map((data) => (
              <Card data={data} key={data.title} />
            ))}
          </div>
        </span>
        <span id="modules">
          <ModulesHeader />
          <div className="mc:flex">
            {Modules.map((data) => (
              <InvisibleCard data={data} key={data.title} />
            ))}
          </div>
          <div className="mc:flex">
            {Modules2.map((data) => (
              <InvisibleCard data={data} key={data.title} />
            ))}
          </div>
        </span>
        <span id="clients">
          <ClientsHeader />
          <div className="mc:flex">
            {Clients.map((data) => (
              <Card data={data} key={data.imageUrl} />
            ))}
          </div>
        </span>
        <span id="testimonials">
          <TestimonialsHeader />
          <div className="mc:flex">
            {Testimonials.map((data) => (
              <TestimonialsCard data={data} key={data.title} />
            ))}
          </div>
        </span>
        <span id="about">
          <About />
        </span>
        <span>
          <Contact />
        </span>
      </span>
    </div>
  );
}

export default App;

Card.js #

import React from "react";

function Card({ data }) {
  return (
    <span className="">
      <div class="justify-center">
        <div class="p-6 rounded-lg shadow-lg bg-white min-w-[380px]">
          <img src={data.imageUrl} alt={data.imageAlt} />
          <h5 class="text-gray-900 text-xl leading-tight font-medium mb-2">
            {data.title}
          </h5>
          <p class="text-gray-700 text-base mb-4">
            {data.description}
          </p>
        </div><br/>
      </div>
    </span>
  );
}

export default Card;

问题原因及解决方法 #

1. Tailwind未扫描到App.js中的自定义类
   当前tailwind.config.js的content配置仅包含./src/Components/**/*.{js,jsx,ts,tsx}，但mc:flex类写在src根目录的App.js中，Tailwind无法扫描到该类，因此不会生成对应的响应式CSS。
   修改content配置，加入App.js或覆盖整个src目录：

   content: [
     "./src/**/*.{js,jsx,ts,tsx}", // 扫描src下所有文件
   ],
   

2. React组件中错误使用class属性
   Card组件中使用了原生HTML的class属性，React中应使用className，虽然这不是flex不生效的直接原因，但属于React规范错误，建议统一修改：

   <div className="justify-center">
     <div className="p-6 rounded-lg shadow-lg bg-white min-w-[380px]">
       {/* ...其他内容 */}
     </div><br/>
   </div>
   

3. 重启开发服务器
   修改tailwind.config.js后，需要重启React开发服务器，让Tailwind重新扫描文件并生成新的样式。

修改完成后，当屏幕宽度≥1024px时，带有mc:flex的容器会自动启用flex布局，小于该尺寸时则保持默认布局。

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