在网站访问时，可能会出现一些错误提示页面，其中最常见的就是“404”页面。这个页面是在用户访问服务器上不存在的页面时自动生成的。一个好的"404"页面可以让用户觉得网站的质量很高。在这篇文章中，我们将使用 TailwindCSS 来创造一个美观的 "404" 页面。
什么是 TailwindCSS
TailwindCSS 是一种非常流行的 CSS 框架，它的目标是帮助开发者快速构建出美观的网站。TailwindCSS 的特点是通过定义一批 CSS 类来构建 CSS 样式，开发者不必手写 CSS，从而提高了开发效率。TailwindCSS 还可根据设计系统的色彩和颜色应用一致的主题和品牌风格。
创建 404 页面
我们将在本地创建一个名为 404.html 的文件，并在其中编写 HTML 代码。我们可以使用 TailwindCSS 的类来创建美观的样式。这里有一份我们将要使用的初始代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>404 Error</title>
</head>
<body class="bg-gray-100">
<div class="w-full h-screen flex flex-col justify-center items-center">
<h1 class="text-4xl font-bold mb-4 text-gray-800">404</h1>
<p class="text-gray-600 mb-8">Oops! The page you’re looking for could not be found.</p>
<a href="/" class="bg-gray-800 text-white py-2 px-3 rounded hover:bg-gray-700 transition-colors duration-300">Go home</a>
</div>
</body>
</html>这段代码中，我们使用了 bg-gray-100 的 TailwindCSS 类来设置背景颜色。我们使用了 w-full 和 h-screen 的类来把页面撑满整个浏览器。我们还使用了 flex 和 flex-col 的类来设置了一个垂直排列的 flexbox 布局，在布局中使用了 justify-center 和 items-center 来居中显示内容。
标题使用了 text-4xl 和 font-bold 类来设置字体大小和粗细，段落使用了 text-gray-600 类来设置颜色。我们使用了一个 a 标签来创建一个链接，这个链接将页面返回到首页。这个链接也使用了很多类来调整样式，如 bg-gray-800 用于设置背景颜色等。
自定义样式
我们可以使用 TailwindCSS 的文档来找到需要更改页面样式的类名，然后在 404.html 文件中使用这些类来自定义页面样式。我们可以通过添加和修改这些 TailwindCSS 的类来创造出更美观的 404 页面。以下是我们添加了更多样式以后的样子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>404 Error</title>
</head>
<body class="bg-blue-500">
<div class="w-full h-screen flex flex-col justify-center items-center">
<h1 class="text-5xl font-bold text-white mb-4">Oops!</h1>
<h2 class="text-3xl text-white mb-8">Page not found</h2>
<a href="/" class="bg-white text-blue-500 py-2 px-3 rounded hover:bg-blue-100 hover:text-blue-500 transition-colors duration-300">Return home</a>
</div>
</body>
</html>我们修改了背景颜色为 bg-blue-500，标题的字体大小为 text-5xl，并且改变了字体颜色成为白色。我们也变更了副标题为 "Page not found"，同时我们也修改了链接的颜色和悬停时的样式。所有这些都是通过增加和修改 TailwindCSS 的类来完成的。
总结
在这篇文章中，我们学习了如何使用 TailwindCSS 来创建一个美观的 404 页面。我们介绍了 TailwindCSS 的优势以及如何从一个最基本的页面开始创建一个更复杂的页面。我们还演示了如何自定义页面样式，并找到了需要使用的 TailwindCSS 类名。这些技术有助于您创建自己的美观页面，同时也可以提高您的前端技能水平。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a773b8add4f0e0ff08cc16