Tailwind CSS 是一种现代的 CSS 框架，它被生产力、可定制性和易于使用所特色。该框架通过提供具有语义的类来定义样式，以减少手动编写 CSS 的需要。本文将介绍如何使用 Tailwind CSS 去快速打造一个扁平化 UI 的网站。
扁平化 UI 是什么？
扁平化 UI 是不包含繁琐设计元素的新型网站的设计风格。这种设计风格注重网站的简洁性，并放弃了过去常见的阴影、渐变、倒影和其他 3D 运动等设计元素。
通过去掉这些阴影、渐变等元素，扁平化 UI 就能更好地适应现在越来越流行的响应式设计风格，并且使得网站更为干净、明亮和容易使用。
什么是 Tailwind CSS？
Tailwind CSS 是一款 CSS 框架，它提供了一系列 Web 设计常用的样式类。这些类使开发者能够轻松地创建出令人惊艳的网站样式，而无需写大量的 CSS 代码。
Tailwind CSS 支持多种和屏幕尺寸有关的预定义类。这使得开发者能够结合不同的样式和尺寸以创造出完美的 UI。
Tailwind CSS 安装
安装 Tailwind CSS 很简单，可以通过 npm 或者 yarn 安装，如下：
npm install tailwindcss
或者
yarn add tailwindcss
如何使用 Tailwind CSS 创建扁平化 UI
开始使用 Tailwind CSS 前，我们需要创建一个名为 tailwind.css 的文件，并在其中添加以下内容：
@tailwind base; @tailwind components; @tailwind utilities;
这些指令会告诉 Tailwind CSS 要从哪里获取样式，以及如何将它们组合在一起。
接下来，我们需要安装 postcss 和 autoprefixer，因为 Tailwind CSS 的使用需要这两个工具的支持。这里我们使用 npm 安装。
npm install postcss autoprefixer
安装后，我们可以创建一个 postcss.config.js 文件，内容如下：
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}接下来我们就可以把 Tailwind CSS 应用到我们的网站中了。我们可以在任何一个 HTML 文件中添加以下内容：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Flat UI Site</title>
<link href="tailwind.css" rel="stylesheet" />
</head>
<body>
<header class="bg-red-500 p-5">
<h1 class="text-white text-2xl">Flat UI Site</h1>
</header>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-500 p-10">
<h2 class="text-lg font-bold text-white">About Us</h2>
<p class="text-gray-100 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget tortor pellentesque, elementum arcu eu, laoreet neque. Sed ut urna euismod, bibendum libero eu, facilisis augue. Nulla facilisi. Etiam magna dui, feugiat sit amet metus vitae, lacinia dictum tortor.</p>
</div>
<div class="bg-gray-400 p-10">
<h2 class="text-lg font-bold text-white">Services</h2>
<ul>
<li class="text-gray-100 mt-2">Web Design</li>
<li class="text-gray-100 mt-2">Web Development</li>
<li class="text-gray-100 mt-2">SEO</li>
</ul>
</div>
</div>
<footer class="fixed bottom-0 bg-black text-white w-full p-3">
<p class="text-center">© 2022 Flat UI Site. All Rights Reserved.</p>
</footer>
</body>
</html>这个示例 HTML 文件展示了如何利用 Tailwind CSS 在网站中使用扁平化 UI 样式。通过添加 Tailwind CSS 的样式类，我们可以轻松地指定背景色、字体大小、边距和排列方式等信息，从而快速创建出一个干净的 web 页面。
总结
这篇文章介绍了如何使用 Tailwind CSS 来创建一个扁平化 UI 的 web 网站。通过使用 Tailwind CSS 提供的样式类，我们可以轻松地创建出各种类型的界面，而无需写大量的 CSS 代码。希望这篇文章能为您带来指导意义和学习帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6545f47c7d4982a6ebfacdce