如何在没有 npm 的情况下使用 tailwindcss？

Question

我刚开始前端开发，想使用框架让它变得更简单。 所以，我发现了 Tailwindcss。 但是，tailwindcss 要求我的服务器具有 node.js 和 npm 才能安装它，但我无法真正在我的服务器上安装这些软件包。 这就是为什么我想问您是否可以在不安装的情况下使用框架，例如 Tailwindcss 或 React。 后来我发现了一个名为“skypack”的网站，所有这些包都可以在不安装的情况下使用。 现在，在我想安装 Tailwindcss 的 HTML 文件中，我写了以下内容：

    <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script type="module">
        import tailwindcss from 'https://cdn.skypack.dev/pin/tailwindcss@v3.1.8-diwqGRTxzuOsx0Oh1GvI/mode=imports/optimized/tailwindcss.js';

    </script>
    <div class="bg-sky-400 aspect-square"><p>test paragraph</p></div>

  </body>
</html>

遗憾的是，css 未应用于该段落。 我是不是导入错了？ skypack 是否有效？ 还有没有其他方法可以在没有 npm 的情况下实施框架吗？

谢谢！

Answer 1

您可以使用顺风 CDN

将以下行添加到 HTML 页面的<head></head>标记中

<head>    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>

Answer 2

出于开发和/或测试目的，您可以使用 tailwindcss 的“播放 CDN”选项。 您可以在以下位置找到相关说明：

https://tailwindcss.com/docs/installation/play-cdn

对于生产用途，您真的需要按照此处的说明进行操作：

https://tailwindcss.com/docs/installation

你会在你的台式机/笔记本电脑或任何你在本地开发的地方而不是在你的服务器上这样做。 然后运行 CLI 构建过程。 该过程将生成您实际包含在 HTML 中的 CSS 文件。

您不需要在您的服务器上安装 Node.js 和 npm。 您只需要在您的开发机器上使用它，然后将生成的文件上传到您的服务器（或者在代码准备好投入生产时部署它）。

免责声明：我不是使用 tailwindcss 甚至 Node.js 的专家，我是在手工编写 CSS/JS/HTML 多年之后才开始接触它的。