使用 CDN 安装 Tailwind CSS

Tailwind CSS 是一个高度可定制的 CSS 框架，它提供了一组独特的类名，可以帮助你快速构建出美观和高度可定制的界面。

在安装 Tailwind CSS 时，你可以选择使用官方提供的 CDN，这样只需要几个简单的步骤就可以开始使用 Tailwind CSS。

步骤 1：在 HTML 文件中添加 Tailwind CSS CDN

首先，在你的 HTML 文件中添加下面的代码，这会将 Tailwind CSS 从 CDN 引入你的项目中：

<link rel="stylesheet" href="https://cdn.tailwindcss.com/dist/tailwind.min.css">

这将从 Tailwind CSS 的 CDN 中加载最新版本的 CSS 文件，并将它们应用于你的 HTML 文档。

步骤 2：使用 Tailwind CSS 类名

接下来，你可以开始使用 Tailwind CSS 提供的类名，这些类名可以实现非常丰富的样式。你可以在你的 HTML 文档中添加这些类名，或者在 JavaScript 中使用它们来动态地添加样式。

例如，为了将一个按钮转换成蓝色、圆形和具有取消阴影效果的按钮，你可以这样写：

<button class="bg-blue-500 rounded-full shadow-lg">Click me</button>

步骤 3：自定义 Tailwind CSS 样式

最后，你可以通过编辑你的 tailwind.config.js 文件来自定义 Tailwind CSS 样式。在这个文件中，你可以定制主题、字体、间距、边框、阴影、高度、宽度等等各种属性，以使 Tailwind CSS 完全适应你的项目需求。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#0076FF',
        'brand-red': '#FF2851'
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    }
  },
  variants: {},
  plugins: []
}

这是一个简单的 tailwind.config.js 文件示例，它定义了两个自定义颜色以及两个自定义间距。你可以根据自己的需要进行定制。

以上就是使用 CDN 安装 Tailwind CSS 的步骤，祝你成功使用 Tailwind CSS！