介绍
Tailwind CSS 是一个基于原子类的 CSS 框架，它提供了很多实用的类来快速构建页面，如 margin、padding、text-color 等等，可以大大提高前端开发效率。在 CodePen 中使用 Tailwind CSS，可以极大地加快前端开发速度。
开始
首先要在 CodePen 上创建一个新的项目，然后打开设置界面，进入 CSS 标签页。
我们需要在 CSS 标签页中添加 Tailwind CSS 的 CDN 文件，这可以通过在 HTML 标签中添加以下链接来实现：
<link rel="stylesheet" href="https://cdn.tailwindcss.com/dist/tailwind.min.css">
添加完 CDN 文件后，就可以开始使用 Tailwind CSS 的类来快速构建页面了。
实例
我们以创建一个简单的登录页面为例。首先，我们要在 HTML 中添加所需的元素：
<div class="flex flex-col items-center justify-center h-screen">
<h1 class="text-3xl font-bold mb-8">登录</h1>
<form class="flex flex-col w-80">
<input type="text" class="border border-gray-500 rounded-lg px-4 py-2 mb-4" placeholder="用户名">
<input type="password" class="border border-gray-500 rounded-lg px-4 py-2 mb-4" placeholder="密码">
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 rounded-lg">登录</button>
</form>
</div>然后，我们可以看到使用了很多 Tailwind CSS 的类，如 flex、justify-center、text-3xl、border、rounded-lg 等等。
通过这些类，我们可以很方便地实现各种样式。比如使用 flex 和 justify-center 来使元素居中；使用 text-3xl 来设置标题的字体大小；使用 border 和 rounded-lg 来设置输入框的边框和圆角；使用 bg-blue-500 和 text-white 来设置按钮的背景颜色和字体颜色。
结论
在 CodePen 中使用 Tailwind CSS，可以大大提高前端开发效率，同时，Tailwind CSS 的语法和类的命名规则也是非常直观和易于理解的。希望本文能给你带来启示，让你开始使用 Tailwind CSS 进行更快速、高效的前端开发。
完整代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-----------------
----- ---------------- ---------------------------------------------------------
-------
------
---- ----------- -------- ------------ -------------- ----------
--- --------------- --------- -------------
----- ----------- -------- ------
------ ----------- ------------- --------------- ---------- ---- ---- ----- ------------------
------ --------------- ------------- --------------- ---------- ---- ---- ----- -----------------
------- ------------- ------------------ ----------------- ---------- --------- ---- -----------------------
-------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6706627bd91dce0dc85c97db