Tailwind CSS 2.0 可以让你少写很多 class-JavaScript中文网-JavaScript教程资源分享门户

什么是 Tailwind CSS？

Tailwind CSS 是一种基于原子化的 CSS 模块化方式，它的出发点是让开发者可以使用简单的 class 名称取代 CSS 的复杂布局。通俗来讲，Tailwind CSS 可以让你在开发过程中避免写出重复而又难以记忆的 CSS 样式表。

Tailwind CSS 2.0 有哪些优势？

Tailwind CSS 2.0 新增了很多新功能，主要包括以下两点：

可以取代 CSS 的重复样式

<div class="bg-red-500 p-4 rounded-lg"></div>

在这个例子中，类名 bg-red-500 是设置背景颜色，p-4 是设置上下左右的内边距为 4px，rounded-lg 是设置圆角半径。这些 class 名称可以取代 CSS 的复杂布局，并且可以用于组件的设计和开发中。

需要少写很多 class 名称

传统的 CSS 开发过程需要编写非常多的 class 名称，而 Tailwind CSS 可以让你做到精简命名，减少代码复写的机会。

比如，这是一个实现居中的样式表：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

与此相对应地，Tailwind CSS 2.0 提供了以下用于实现类似效果的 class 名称：

<div class="flex justify-center items-center"></div>

这样就解决了传统 CSS 开发过程中大量的代码复写问题。

如何使用 Tailwind CSS？

使用 Tailwind CSS 需要先安装它，目前有两种安装方式：

使用 CDN

Tailwind CSS 在官网上提供了 CDN 链接，让你可以直接使用该库的最新版本，但需要在开发中使用 CDN 的方式引入。

使用 npm 安装

在使用推荐的安装方式时，只需在项目中安装 Tailwind CSS，并在 CSS 文件中引入即可：

npm install tailwindcss

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

总结

Tailwind CSS 2.0 是一种基于原子化的 CSS 模块化方式，可以大大减少重复复杂的 CSS 样式表编写。与传统 CSS 开发相比，Tailwind CSS 使用精简代码，能够提供更好的开发体验。如果你希望减少代码冗长，并希望能够专注于组件的设计和开发，那么 Tailwind CSS 2.0 绝对是你应该尝试的工具之一。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6477dc42968c7c53b0430d58