如何在HTML中使用TailwindCSS，无需Node.js、NPM、Yarn等工具？

下面提供两种可靠的无包管理工具方案，解决你遇到的生效问题：

方法1：使用Tailwind官方CDN（快速测试/开发用） #

这是最便捷的方式，直接在HTML中引入CDN链接即可，无需任何本地工具。注意生产环境不推荐，因为会加载全量Tailwind样式，体积较大。

具体实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Tailwind CDN Demo</title>
    <!-- 核心Tailwind CSS CDN链接 -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 可选：自定义Tailwind配置（比如主题色、字体等） -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: '#165DFF',
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 可选：自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
        }
    </style>
</head>
<body>
    <div class="bg-brand text-white p-6 rounded-lg text-shadow">
        测试CDN引入的Tailwind样式
    </div>
</body>
</html>

排查CDN不生效的问题： #

• 确保使用的是最新的CDN链接：https://cdn.tailwindcss.com（旧版v2的链接已经不再维护）
• 检查自定义样式的type属性必须是text/tailwindcss，否则Tailwind无法解析
• 清除浏览器缓存，避免旧资源干扰

方法2：在线生成精简版Tailwind CSS（生产环境用） #

如果需要体积更小的自定义样式，可通过Tailwind在线工具生成专属CSS文件，无需本地包管理：

1. 打开Tailwind Play在线编辑器（无需注册），配置你的主题、工具类，编写测试代码验证样式
2. 点击编辑器右上角的「Export」按钮，下载生成的tailwind.css文件
3. 将下载的CSS文件放到你的项目目录中，在HTML中用普通<link>标签引入：

<link rel="stylesheet" href="./path/to/tailwind.css">

这种方式生成的CSS只包含你实际用到的样式，体积远小于CDN全量包，适合生产环境。

关于Tailwind Material的说明 #

Tailwind Material的HTML版本依赖NPM的话，直接忽略即可——上述两种官方方案完全可以满足你在纯HTML项目中使用Tailwind的需求，无需额外依赖。

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