Tailwind CSS home page
  1. Getting Started
  2. 使用体验 CDN 试用 Tailwind CSS

安装

Play CDN

使用体验 CDN 直接在浏览器中试用 Tailwind，无需任何构建步骤。 体验 CDN 专为开发目的而设计，并不是生产的最佳选择。

  1. 将体验 CDN 脚本添加到你的 HTML

    将体验 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,container-queries"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>

接下来要阅读什么

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

  • 工具优先的基础

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

  • 响应式设计

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

  • 悬停、聚焦、以及其他状态

    使用条件修饰符为交互状态（如悬停、聚焦等）中的元素设置样式。

  • 夜间模式

    使用夜间模式修饰符直接在 HTML 中针对夜间模式优化你的网站。

  • 重用样式

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

  • 自定义框架

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

TailwindCSS v3 中文网