Tailwind CSS 无需书写 CSS！只需关注HTML，即可快速构建美观的网站

这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。

Tailwind CSS 是一个实用的、高度可定制的 CSS 框架，它提供了一系列的样式类，用于快速构建网页布局。与传统的 CSS 方法相比，Tailwind CSS 的优点在于它提供了大量的预定义样式类，可以直接在 HTML 元素中使用，从而减少了编写 CSS 的需求。

以下是一个使用 Tailwind CSS 构建的简单 HTML 示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Example</title>
    <!-- 引入 Tailwind CSS -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <header class="bg-blue-500">
        <nav class="container mx-auto px-6 py-4 flex items-center justify-between">
            <div class="text-white">
                <a class="text-2xl no-underline" href="#">Tailwind CSS Site</a>
            </div>
            <div class="text-white">
                <a href="#" class="text-base no-underline hover:text-gray-100">Home</a>
                <a href="#" class="text-base px-2 no-underline hover:text-gray-100">About</a>
                <a href="#" class="text-base px-2 no-underline hover:text-gray-100">Contact</a>
            </div>
        </nav>
    </header>
    <main class="container mx-auto py-10">
        <div class="w-full md:w-3/5 xl:w-1/2">
            <h1 class="text-5xl font-bold text-gray-900 leading-tight">Welcome to Tailwind CSS</h1>
            <p class="text-2xl text-gray-600">Build responsive, statically-generated, customisable websites with Tailwind CSS.</p>
        </div>
    </main>
    <footer class="bg-gray-900 text-white">
        <div class="container mx-auto py-4">
            <div class="text-center">
                Copyright © 2023 Tailwind CSS Site
            </div>
        </div>
    </footer>
</body>
</html>

在这个示例中，我们使用了 Tailwind CSS 预定义的一些样式类来构建了一个包含头部、导航、主体内容和底部的简单网页布局。这个过程省去了大量自定义 CSS 的时间，使得开发者能够更快地完成网页设计。

Tailwind CSS 无需书写 CSS！只需关注HTML，即可快速构建美观的网站

评论已关闭

推荐阅读