如何在无Node.js和npm环境下使用TailwindCSS？

当然可以不用Node.js和npm就能用TailwindCSS，给你几个靠谱的方案：

• 直接用Tailwind官方CDN（快速入门）
  这是最简单的方式，直接在HTML里引入CDN链接，就能直接用默认的Tailwind类。缺点是没法自定义主题、没法用自定义工具类，适合快速做原型或者小项目。代码示例：

  <link href="https://cdn.tailwindcss.com" rel="stylesheet">
  

  要是需要简单自定义主题，还能在页面里加个配置脚本：

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#ff4400',
          },
        }
      }
    }
  </script>
  

• 用在线工具生成自定义CSS
  要是需要自定义配置（比如自定义主题、添加插件），可以用Tailwind Play在线编辑器，在里面配置好你的需求，然后导出生成好的完整CSS文件，下载下来直接引入到你的项目里就行，完全不用本地环境。操作步骤大概是：

  • 在左侧配置面板调整主题、添加自定义内容
  • 写完测试完后，点击右上角的“Export”按钮选择导出CSS
  • 把导出的CSS文件放到你的项目里，用<link>标签引入

• 尝试在浏览器中运行Tailwind（进阶，适合小项目）
  你之前尝试用CDN加载模块的方式是可行的，但需要调整代码，因为Tailwind的Node端API和浏览器环境有差异。比如可以用适配后的CDN源加载，然后在浏览器中生成样式。示例代码：

  <script type="module">
    import { default as tailwindcss } from 'https://esm.sh/tailwindcss';
    import { parse } from 'https://esm.sh/postcss';
  
    // 定义你的Tailwind配置
    const config = {
      content: [document.body], // 扫描当前页面的内容
      theme: {
        extend: {},
      },
    };
  
    // 生成CSS
    const css = `@tailwind base; @tailwind components; @tailwind utilities;`;
    const result = await tailwindcss(config)(parse(css));
    // 创建style标签插入到页面
    const style = document.createElement('style');
    style.textContent = result.css;
    document.head.appendChild(style);
  </script>
  

  不过这种方式在页面加载时会有短暂的无样式状态，而且性能不如预生成CSS，只适合小型项目或者测试用。

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