如何在Next.js生产环境中去除HTML类名中的空白字符？

因为你格式化代码时将类名拆分行编写，导致生产环境输出的HTML中类名出现多余空白字符，以下是几种简单有效的解决方法：

• 使用clsx工具拼接类名
  这是Tailwind官方推荐的类名组合方式，能自动去除多余空格，同时支持条件类名。

  1. 安装依赖：

     npm install clsx
     # 或 yarn add clsx
     

  2. 代码示例：

     import clsx from 'clsx';
     
     export default function MyComponent() {
       return (
         <div className={clsx(
           "text-center",
           "font-medium",
           "text-gray-800"
         )}>
           示例内容
         </div>
       );
     }
     

  不管你怎么格式化代码结构，clsx都会输出无多余空格的类名字符串。

• 使用prettier-plugin-tailwindcss优化格式化
  这个插件不仅能自动排序Tailwind类名，还能避免格式化时产生多余空格，让代码规整的同时不影响生产环境输出。

  1. 安装依赖：

     npm install -D prettier-plugin-tailwindcss
     

  2. 在项目根目录的.prettierrc（或.prettierrc.json）中添加配置：

     {
       "plugins": ["prettier-plugin-tailwindcss"]
     }
     

  之后用Prettier格式化代码时，className会被自动整理成紧凑且规范的格式。

注意：类名之间的单个空格是CSS语法要求的，正常情况下不影响样式渲染，上述方法主要解决的是多个连续空白字符的问题。

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