Tailwind CSS如何帮助您快速构建UI

> Photo by Pankaj Patel on Unsplash

不久前，当我们在我们的项目中开始使用Tailwind CSS时，我在Tailwind CSS上写了一篇文章，解释了它是什么以及它如何不同。您可以在此阅读该帖子。

从那时起，我们几乎没有用CSS写作。在这篇文章中，让我们看起来有一些原因，为什么你可能想要在下一个项目中使用Tailwind。在我们开始之前，您可以访问此页面以在项目中设置Tailwind。随着这种方式。让我们开始吧。

内联响应性

我们需要写入媒体查询的日子已经过去了，以响应我们的UI。使用Tailwind，您可以在类属性本身中响应您的UI。让我们来看看一个例子;以下代码基于屏幕尺寸更改文本大小。

<span class="lg:text-lg sm:text-sm xl:text-xl" >Hello, world!</span>

多么酷啊？通过添加三个CSS类，我们响应了元素的字体大小。

内联伪类

我们还可以将伪类应用于类属性本身的一个元素。例如，假设您希望更改悬停上元素的文本颜色。我们可以通过做来实现这一点：

<span class="text-4xl hover:text-blue-500" >Hello, world!</span>

除了悬停外，还可以使用许多其他伪课程，如焦点，活跃等。阅读更多信息。

内联造型

所有样式都在该元素本身上定义。这意味着当您正在查看一个元素时，您也在看该元素的样式。您不必打开另一个文件。要检查元素如何进行样式，并在许多文件中搜索以查找应用特定样式的位置。让我们来看看一个例子：

<div class="rounded bg-gray-500 p-4" >I'm a card!</div>

如您所见，元素的样式与元素本身有关。这有助于我们避免不必要的查找。这也意味着我们不必创建额外的样式文件。

重复组件

如果您使用Tailwind一段时间，您可能会再次找到一组课程。在这种情况下，您可以使用@apply来组合那个类并创建一个类。例如，我发现自己一次又一次地重复了圆形的BG-Gray-300 P-4，用于卡风格。为避免，我创建了一个名为卡的自定义样式类并应用这些类。以下是如何执行IT：在Tailwind CSS文件中添加以下代码。

.card { @apply rounded bg-gray-300 p-4;}

现在，每当你发现自己申请同一个类时。您可以应用单级卡。

如果您使用的是reflend库，如React或Vue，您可以创建一个名为卡的组件，并在该组件中应用这些样式以避免重复。

以下是反应的一个例子：

const Card: React.FC = ({children}) => { return <div className="rounded bg-gray-300 p-4" >{children}</div>}

了解有关在此处提取组件的更多信息。

定制

到目前为止，我们看过Tailwind的一些很赞的特色。要进一步看，可以根据需要定制所有颜色，大小单位，伪类和响应性断点等。Tailwind附带默认配置。您可以根据需要自由定制。您可以在此阅读更多关于自定义的信息。

清洗不必要的风格

TaiLwind生成大量类，这么多，我可以确定您不会在项目中使用这些样式。这意味着所有未使用的类也与您的应用程序捆绑在一起（为您添加了不必要的额外尺寸）。

为了解决这个问题，我们可以清除我们无法使用的所有样式。TaiLwind配有内心的净化净化。要清除，我们需要在Tailwind Config中添加清除属性并提供所需的文件。例如，下面的配置将查找所有HTML和JSX以搜索已使用的类：

... purge: [ './src/**/*.html', './src/**/*.jsx', ]...

您可以在此处阅读更多有关清除未使用风格的信息。

结论

谢谢你的阅读，我希望我今天帮助你学习新的东西。我使用的例子非常基本，请始终引用文档以获取任何帮助。

如果你喜欢这篇文章，请给它一个拍手。你可以关注我，有更多的帖子。谢谢阅读。

(本文由闻数起舞翻译自Varun Pujari的文章《Six Reasons Why You Should Start Using Tailwind CSS》，转载请注明出处，原文链接：https://codeburst.io/six-reasons-why-you-should-start-using-tailwind-css-402292c50a70)