在Tailwind CSS中添加流体排版代码失效，如何解决？

你的问题出在Tailwind的基础样式层机制上——@tailwind base会注入默认的html { font-size: 16px; }等样式，直接写在外面的自定义CSS可能被Tailwind的默认规则覆盖，或者没有被正确纳入Tailwind的样式优先级体系里。

解决方法很简单，把你的流体排版样式放到@layer base块中，让Tailwind将其整合到基础样式层：

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

@layer base {
  html {
    font-size: calc(100vw / 1920 * 10px);
  }

  body {
    font-size: 3rem;
  }
}

额外优化建议 #

如果想让Tailwind的内置文本尺寸类（比如text-sm、text-lg）也遵循你的流体比例，可以在tailwind.config.js里自定义字体大小，完全基于rem映射设计稿的px值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"], // 根据你的项目文件类型调整
  theme: {
    extend: {
      fontSize: {
        'xs': '1.2rem',  // 对应设计稿12px
        'sm': '1.4rem',  // 对应14px
        'base': '3rem',  // 你的body默认字号
        'lg': '3.6rem',  // 对应36px
        'xl': '4.8rem',  // 对应48px
        // 按你的设计比例继续添加其他尺寸
      },
    },
  },
  plugins: [],
}

修改完成后，记得重启Tailwind的开发服务或者重新编译CSS，然后检查浏览器元素面板，确认html的font-size已经是你定义的calc计算值，而不是默认的16px。

内容的提问来源于stack exchange，提问作者Taste of Leaving