如何在 CodePen 中使用 Tailwind CSS
介绍
Tailwind CSS 是一个基于原子类的 CSS 框架，它提供了很多实用的类来快速构建页面，如 margin、padding、text-color 等等，可以大大提高前端开发效率。在 CodePen 中使用 Tailwind CSS，可以极大地加快前端开发速度。
开始
首先要在 CodePen 上创建一个新的项目，然后打开设置界面，进入 CSS 标签页。
我们需要在 CSS 标签页中添加 Tailwind CSS 的 CDN 文件，这可以通过在 HTML 标签中添加以下链接来实现：
----- ---------------- ---------------------------------------------------------
添加完 CDN 文件后，就可以开始使用 Tailwind CSS 的类来快速构建页面了。
实例
我们以创建一个简单的登录页面为例。首先，我们要在 HTML 中添加所需的元素：
---- ----------- -------- ------------ -------------- ----------
--- --------------- --------- -------------
----- ----------- -------- ------
------ ----------- ------------- --------------- ---------- ---- ---- ----- ------------------
------ --------------- ------------- --------------- ---------- ---- ---- ----- -----------------
------- ------------- ------------------ ----------------- ---------- --------- ---- -----------------------
-------
------然后，我们可以看到使用了很多 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