TailwindCSS不响应屏幕尺寸求助：文本无法按断点居中

• 问题原因：你的tailwind.config.js中content字段为空数组，Tailwind的JIT编译模式仅会生成项目文件中实际用到的样式类，空数组导致Tailwind未扫描任何文件，sm:text-center这个响应式类没有被编译生成，所以样式不生效。

• 修复步骤：

  1. 更新tailwind.config.js的content字段，指定项目中包含Tailwind类的文件路径。对于React项目，通常配置为：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    presets: [],
    darkMode: 'media', // or 'class'
    theme: {
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
      // 其余配置项...
    }
  }
  

  2. 可在容器上显式指定默认左对齐（Tailwind默认文本左对齐，若有其他样式干扰可添加）：

  function App() {
    return (
      <div className="text-left sm:text-center">
        <h1>Hello</h1>
      </div>
    );
  }
  
  export default App;
  

  3. 重启开发服务器，让Tailwind重新扫描文件并生成对应样式。

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