纯HTML/CSS项目无需安装npm/npx减小Tailwind CSS文件体积的方法

你当前使用的是Tailwind CSS v2的全量CDN包，内置了所有预设样式类，体积确实在3MB左右，以下是不需要Node.js/npm环境即可压缩体积的可行方案：

方案1：替换为运行时CDN版本 #

直接替换原有全量CSS引入为运行时模式的Tailwind CDN，这类资源只会在浏览器端动态生成你页面实际用到的样式类，初始加载体积仅约15KB，完全解决移动端加载慢的问题。替换示例：

<script src="https://cdn.tailwindcss.com"></script>

该CDN为Tailwind v3版本，兼容绝大多数v2的常用类写法，小型项目使用无压力。

方案2：在线按需裁剪全量CSS #

如果不想切换Tailwind版本，可通过在线PurgeCSS工具手动裁剪冗余样式，操作步骤如下：

• 下载你当前引入的全量Tailwind CSS文件到本地
• 整理项目中所有用到Tailwind类名的HTML、JS代码内容
• 将全量CSS内容和项目代码内容输入到在线PurgeCSS工具中，工具会自动过滤删除所有未被使用的样式类
• 导出裁剪后的CSS文件，最终体积通常只有几KB到几十KB，将该文件放到项目目录中直接本地引入即可

注意：如果项目存在动态拼接生成的Tailwind类名，需要提前把这些动态类名加入到PurgeCSS的保留列表中，避免样式被误删。

方案3：使用精简功能CDN包 #

如果项目仅用到Tailwind的基础样式，不需要响应式变体、深色模式、扩展动画等附加功能，可以选择仅包含核心样式的精简CDN包，体积通常在300KB以内，直接替换原有引入链接即可使用。

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