如何在 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