Tailwind CSS home page
  1. 快速入门
  2. 使用 Play CDN 尝试 Tailwind CSS

安装

Play CDN

使用 Play CDN 直接在浏览器中试用 Tailwind，无需任何构建步骤。Play CDN 仅用于开发目的，并非生产的最佳选择。

  1. Add the Play CDN script to your HTML

    Add the Play CDN script tag to the <head> of your HTML file, and start using Tailwind’s utility classes to style your content.

    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. Try customizing your config

    Edit the tailwind.config object to customize your configuration with your own design tokens.

    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. Try adding some custom CSS

    Use type="text/tailwindcss" to add custom CSS that supports all of Tailwind's CSS features.

    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. Try using a first-party plugin

    Enable first-party plugins, like forms and typography, using the plugins query parameter.

    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 的核心概念。

  • Utility-First Fundamentals

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

  • Responsive Design

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

  • Hover, Focus & Other States

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

  • Dark Mode

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

  • Reusing Styles

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

  • Customizing the Framework

    定制框架来匹配您的品牌并使用您自己的自定义风格进行扩展。