Tailwind CSS 安装(CDN)

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

Tailwind CSS 安装

Tailwind CSS 提供了多种安装方式，你可以根据项目需求或个人偏好灵活选择。官方推荐的方式是通过 PostCSS 插件，将其集成到 Webpack、Vite 或 Parcel 等现代构建工具中。这种方案可以充分发挥 Tailwind 的所有特性，包括自定义指令和深度优化等功能。不过，它的配置流程相对复杂，对于刚入门的开发者来说可能有一定门槛。

今天我们要介绍的是另一种更快捷的方法——通过 CDN 链接直接引入。这种方式极其适合原型构建或快速尝鲜，省去了一切复杂的配置流程，让你可以立即上手使用 Tailwind CSS。

通过 CDN 引入 Tailwind CSS

通过 CDN 引入 Tailwind CSS 是目前最快、最简便的使用方式。你只需在 HTML 文件的<head>标签内添加以下<script>标签，即可立即开始使用 Tailwind 的实用类来设计和构建页面。

通过 Tailwind CSS 官方提供的 CDN 库，您可以极速开始使用 Tailwind。地址如下：

<script src="https://cdn.tailwindcss.com"></script>

也可以使用 jsDelivr 的 CDN 库。地址如下：

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.0/dist/tailwind.min.css" rel="stylesheet">

Tailwind CSS 使用实例

✅ 以下是输出了 Hello, world! 的实例：

实例代码运行代码

复制

<!DOCTYPE html>
<html lang="zh">
<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-4xl font-bold text-center text-blue-600 mt-8">Hello Tailwind!</h1>
</body>
</html>

在上面的代码中，我们通过 CDN 引入了 Tailwind CSS，然后使用了一些 Tailwind 的实用类来快速设置标题的样式。

✅ 以下是一个更复杂的实例，通过编辑tailwind.config对象定义了自己的配置信息：

实例代码运行代码

复制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary': '#3B82F6',
                        'secondary': '#10B981',
                        'custom-orange': '#FF7849',
                    },
                    spacing: {
                        '128': '32rem',
                    },
                    fontFamily: {
                        'custom': ['Georgia', 'serif'],
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100 p-8">
    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md p-6">
        <h1 class="text-2xl font-bold text-primary mb-4">自定义配置示例</h1>

        <!-- 使用自定义颜色 -->
        <div class="p-4 bg-primary text-white rounded-lg mb-4">
            <p>主色调 - primary颜色</p>
        </div>

        <div class="p-4 bg-secondary text-white rounded-lg mb-4">
            <p>次要色调 - secondary颜色</p>
        </div>

        <div class="p-4 bg-custom-orange text-white rounded-lg mb-4">
            <p>自定义橙色 - custom-orange颜色</p>
        </div>

        <!-- 使用自定义间距 -->
        <div class="w-128 h-20 bg-blue-200 flex items-center justify-center rounded-lg mb-4">
            <p>自定义128宽度</p>
        </div>

        <!-- 使用自定义字体 -->
        <p class="font-custom text-lg mb-4">
            这是自定义字体样式
        </p>

        <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            使用主色调的按钮
        </button>
    </div>
</body>
</html>

在这个实例中，我们通过配置tailwind.config对象，添加了自定义颜色、间距和字体。然后在 HTML 中使用这些自定义的实用类来构建一个简单的卡片组件。

✅ 以下是使用type="text/tailwindcss"添加自定义 CSS：

实例代码运行代码

复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
        .custom-button {
            @apply px-4 py-2 rounded font-bold;
            background-color: #FF6B35;
            color: white;
        }

        .custom-button:hover {
            background-color: #E85C2A;
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
    <div class="max-w-md mx-auto bg-white p-6 rounded shadow">
        <h1 class="text-xl font-bold mb-4">自定义样式演示</h1>

        <!-- 普通Tailwind按钮 -->
        <button class="px-4 py-2 bg-blue-500 text-white rounded font-bold mb-4">普通按钮</button>

        <br>

        <!-- 自定义样式按钮 -->
        <button class="custom-button">自定义按钮 (橙色)</button>

        <p class="mt-4 text-sm text-gray-600">可以看到自定义按钮使用了特殊的橙色样式</p>
    </div>
</body>
</html>

在这个实例中，我们通过添加一个<style type="text/tailwindcss">标签，定义了一个名为custom-button的自定义类。这个类使用了 Tailwind 的@apply指令来复用一些实用类，并添加了自定义的背景色和悬停效果。

✅ 以下是使用plugins参数可以设置使用的插件，如，forms（表单）和 typography（排版）：

实例代码运行代码

复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            plugins: [
                tailwind.plugins.forms,
                tailwind.plugins.typography,
            ]
        }
    </script>
</head>
<body class="bg-gray-100 p-4">
    <div class="max-w-md mx-auto">
        <!-- 表单插件演示 -->
        <h2 class="text-lg font-bold mb-3">表单插件</h2>
        <input class="block w-full p-2 border rounded mb-4" placeholder="默认输入框">
        <input class="block w-full p-2 border rounded bg-gray-50" placeholder="带样式的输入框">
    </div>
</body>
</html>

在这个实例中，我们通过配置tailwind.config对象，添加了forms和typography插件。然后在 HTML 中使用这些插件提供的样式来美化表单元素。

如果你想使用 PostCSS 进行安装。可以查阅官方文档的 Tailwind CSS 安装指南，里面有针对不同工具的详细说明。

Tailwind CSS 简介

评论区 0

发表评论

教程介绍

Tailwind CSS 开源的 CSS 框架，通过原子化工具类，实现响应式、多状态交互的网页设计。

3 章节

37 阅读

0 评论

Tailwind CSS 安装(CDN)