如何在不依赖Node.js的情况下使用tailwindcss进行开发
众所周知，在当下的现代前端开发中，Node.js基本上已经成为了不可或缺的工具，无论是使用React还是Vue，或者使用其他的框架进行开发，都要依赖Node.js开发环境，但是对于没有用到Node.js的老项目，或者不想使用现代前端框架的项目，仍然i需要使用普通Javascript进行开发。幸运的是，一些好用的框架除了提供依赖Node.js的版本外，也提供了不依赖Node.js的独立版本。在这篇文章中，我们主要来看一下如何在不依赖Node.js的情况下使用tailwindcss这个著名的css框架进行前端开发。
注意，在写下本篇文章的时候，我使用的是tailwindcss V4.2版本，对于之前的V3版本，使用方式可能略有不同，这里只针对V4.2版本。
Tailwindcss这个名字相信大家已经毫不陌生了，许多前端框架内置推荐的css框架就是它，同时也是大模型最钟爱的前端框架之一，在大模型的加持下，不用半天就可以开发出精美的前端界面。在互联网上并不缺乏对于这个框架的详细介绍，在这里我就不赘述了，让我们直接进入正题。
Tailwindcss提供了两种不依赖Node.js的使用方式，一种是通过CDN链接直接在HTML文件中引入，这种方式用起来最方便，但是文档中写道：
Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not intended for production.
翻译过来也就是说这种使用方式只适合开发，不适合用于正式的生产环境，一般情况下，可以使用这种方式进行开发，而在生产环境中使用第二种方式部署。
第二种方式是通过安装一个叫做 tailwindcss CLI的程序来使用，方法也比较简单，下面我们主要介绍一下这种使用方式。
注意：在Node.js环境下也可以通过npm安装来使用这种方式，直接 npm install tailwindcss @tailwindcss/cli即可，这里就不多说啦。
首先我们要在tailwindcss的官方仓库下载我们需要的版本：
https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.1
这里根据使用的操作系统来选择，我选择Windows版本下载。
下载之后是一个独立的exe文件， 我们可以把它放在任意的目录下，接下来在我们的HTML目录下创建一个css文件，比如input.css，在其中写入以下内容：
@import "tailwindcss";
最后在命令行内执行：
tailwindcss-windows-x64.exe -i input.css -o output.css
就可以看到目录下多出了一个output.css文件，接下来在我们的HTML文件中直接引入这个css文件，就可以直接使用tailwindcss了。
如果你需要优化过后的css文件，那么就加上-m参数：
tailwindcss-windows-x64.exe -i input.css -o output.css -m
我们来看一下效果，这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="output.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="flex h-screen bg-gray-100 font-sans">
<aside class="hidden md:flex flex-col w-64 bg-indigo-900 text-white">
<div class="p-6 text-2xl font-bold border-b border-indigo-800">
Logo
</div>
<nav class="flex-1 px-4 py-6 space-y-2">
<a href="#" class="block px-4 py-2 bg-indigo-800 rounded-lg">控制面板</a>
<a href="#" class="block px-4 py-2 hover:bg-indigo-800 rounded-lg transition">用户管理</a>
<a href="#" class="block px-4 py-2 hover:bg-indigo-800 rounded-lg transition">数据分析</a>
<a href="#" class="block px-4 py-2 hover:bg-indigo-800 rounded-lg transition">设置</a>
</nav>
</aside>
<div class="flex-1 flex flex-col overflow-hidden">
<header class="flex items-center justify-between px-8 py-4 bg-white shadow-sm">
<h1 class="text-xl font-semibold text-gray-800">控制面板</h1>
<div class="flex items-center space-x-4">
<span class="text-gray-600">欢迎回来, 管理员</span>
<div class="w-10 h-10 rounded-full bg-indigo-500 border-2 border-white shadow-md"></div>
</div>
</header>
<main class="flex-1 overflow-y-auto p-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<p class="text-sm text-gray-500 uppercase font-bold">总收入</p>
<p class="text-3xl font-semibold text-gray-800 mt-1">$24,500</p>
<span class="text-green-500 text-sm">↑ 12% 较上月</span>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<p class="text-sm text-gray-500 uppercase font-bold">活跃用户</p>
<p class="text-3xl font-semibold text-gray-800 mt-1">1,205</p>
<span class="text-green-500 text-sm">↑ 5.4% 较上月</span>
</div>
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
<p class="text-sm text-gray-500 uppercase font-bold">待办事项</p>
<p class="text-3xl font-semibold text-gray-800 mt-1">18</p>
<span class="text-red-500 text-sm">需要处理</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div class="p-6 border-b border-gray-500/10 font-bold text-gray-700">最近订单</div>
<table class="w-full text-left border-collapse">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase">客户</th>
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase">状态</th>
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase">日期</th>
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<tr>
<td class="px-6 py-4">张三</td>
<td class="px-6 py-4"><span
class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded-full">已支付</span>
</td>
<td class="px-6 py-4 text-gray-600">2026-03-14</td>
<td class="px-6 py-4 text-indigo-600 hover:underline cursor-pointer">详情</td>
</tr>
<tr>
<td class="px-6 py-4">李四</td>
<td class="px-6 py-4"><span
class="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">待审核</span>
</td>
<td class="px-6 py-4 text-gray-600">2026-03-13</td>
<td class="px-6 py-4 text-indigo-600 hover:underline cursor-pointer">详情</td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
</body>
</html>这是实现效果 ：
这里需要注意的是，input.css文件必须和HTML文件在同一目录下，这样CLI工具才能扫描到，如果不在同一目录下，需要在input.css中手动指定扫描目录：
@import "tailwindcss";
@source "../templates/*.html"
这样CLI工具就会扫描templates目录中所有的html文件，并生成对应的css。
综上所述，在我们开发的过程中，使用CDN链接是最方便的做法，而在实际的生产环境中，就需要使用CLI程序手动生成css文件，以达到最佳的使用效果。
评论
发表评论