Tailwind CSS 主页
  1. 入门
  2. 使用 Play CDN 试用 Tailwind CSS

安装

Play CDN

使用 Play CDN 在浏览器中尝试 Tailwind，无需任何构建步骤。Play CDN 仅用于开发目的，不适合生产环境。

  1. 将 Play CDN 脚本添加到您的 HTML

    将 Play CDN 脚本标签添加到 HTML 文件的 <head> 中，并开始使用 Tailwind 的实用程序类来设置内容的样式。

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

  2. 尝试自定义您的配置

    编辑 tailwind.config 对象以 自定义您的配置，使用您自己的设计令牌。

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline text-clifford">
    Hello world!
  </h1>
</body>
</html>

  3. 尝试添加一些自定义 CSS

    使用 type="text/tailwindcss" 添加支持所有 Tailwind CSS 功能的自定义 CSS。

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
    }
  </style>
</head>
<body>
  <div class="lg:content-auto">
    <!-- ... -->
  </div>
</body>
</html>

  4. 尝试使用第一方插件

    使用 plugins 查询参数启用第一方插件，例如表单和排版。

    index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>

接下来阅读什么

熟悉一些使 Tailwind CSS 与编写传统 CSS 不同的核心概念。

  • 实用优先基础

    使用实用程序优先的工作流程从一组受限的原始实用程序构建复杂的组件。

  • 响应式设计

    使用响应式修饰符构建完全响应的用户界面，以适应任何屏幕尺寸。

  • 悬停、焦点和其他状态

    使用条件修饰符在悬停、焦点等交互状态下设置元素的样式。

  • 暗黑模式

    使用暗模式修饰符直接在您的 HTML 中为您的网站优化暗模式。

  • 重复使用样式

    通过创建可重用的抽象来管理重复并保持项目的可维护性。

  • 自定义框架

    自定义框架以匹配您的品牌并使用您自己的自定义样式进行扩展。