【翻译】TailwindCSSGettingStartedin15Minutes

时间：2023-04-01 02:15:09 vue.js

翻译自：https://scotch.io/tutorials/get-started-with-tailwind-css-in-15-minutes类构成，不是写好的组件。在使用Tailwind之后，我发现了一件最令人欣慰的事情：不再需要重写CSS样式类在Tailwind主页上，有一个很酷的例子来展示Tailwind是如何工作的。真实案例本文重点介绍Tailwind的一些特性。如果你想直接看一些示例，可以在以下文章中找到它们：重新创建Spotify专辑页面重新创建Google.com主页重新创建TwitterCreationModal一个简单的示例-构建卡片这是一个使用Bootstrap构建的Card组件和构建的卡片与Tailwind组件比较。警告：这可能看起来很奇怪，阅读此示例后您可能会对学习Tailwind失去兴趣。给它一些时间并查看一些实践示例，您将看到使用组合Utils类的强大功能，以及组合优于继承的思想。###Bootstrap卡片：卡片标题Contentgoeshere

Bootstrap版本的Card很容易实现，可定制性很差。您需要使用!important关键字来覆盖相关类以实现此目的。让我们看看Tailwind版本的实现：

MyTitleContentgoeshere

我们使用组合的Utils实现了一张卡片。这看起来比上面的版本复杂一点，但是这个版本的最大好处是它非常可定制、快速和简单。这是代码的CodePen。下面是对这张卡中类的分析：bg-white:background:#fffrounded:border-radius:0.25remshadow:01px3px0rgba(0,0,0,.1),01px2px0rgba(0,0,0,.06)border:border-width:1pxp-6:padding:1.5remw-64:width:16rem这里有一些关于标题的类：text-3xl:font-size:1.875remfont-bold:font-weight:700mb-4:margin-bottom:.75remmt-0:margin-top:0以下是一些关于内容的类：text-gray-700:color:#4a5568text-sm:font-size:.875remTailwindCSSis一项投资。如果你想快速编写CSS和设计你的应用程序，你将花时间学习这些类；您将从学习任何其他技术中获得同样的好处。它会使HTML变得繁琐吗？考虑将Tailwind用作编写内联样式。有许多策略可以将这些类移出HTML并使它们可重用。这是清理Tailwind类的策略：使用Sass并将我们的类从HTML中移出，以使用JS组件（React/Vue），并且只编写一次相同的类下面是使用Tailwind@apply函数清理HTML的示例：。btn{@applyfont-boldpy-2px-4rounded;}.btn-blue{@applybg-blue-500text-white;}.btn-blue:hover{@applybg-blue-700;}我的个人最喜欢的一种方法是将类存储在模板文件中，然后使模板可重用。React组件就是一个很好的例子。我们已经讨论了很多。现在，让我们关注如何使用Tailwind来构建一些东西。什么是顺风CSS？现在我们已经看过一个简单的示例，让我们深入挖掘一下。TailwindCSS是一个您以前从未使用过的CSS框架。当人们想到CSS框架时，首先想到的是使用最广泛的Bootstrap，或者其他流行的Foundation，Bulma。Tailwind是一个特殊的框架。与预先编写的样式组件相比，Tailwid提供了很多功能类。以下是Tailwind提供的一些类。我们有很多定义好的工具类，可以直接使用。下面是一些类的Tailwind文档地址。BackgroundColorPaddingFlexboxGridFontSizeTailwind的文档是帮助我们入门的非常好的资源。当你需要使用某个类型的类时，可以快速找到它。点击页面上的/可快速聚焦到搜索栏。Tailwind的优点我们在使用Bootstrap，或者其他类似框架的时候，有大量预编译好的现成组件可以直接使用，比如card，navbar等。当我们要自定义这些组件时，我们不得不编写大量的CSS代码来自定义这些组件的样式，以及覆盖基础样式。这会造成混乱，并让我们陷入编写相互覆盖的代码的泥潭。Tailwind为我们提供了“仅引用所需代码”的选项。您使用Tailwind的次数越多，好处就越大。让我们来看看好处，并构建一些东西。PackageSizeTailwind本身就不小。这是因为它提供了许多实用程序类。最大的好处是可以使用Purgecss来控制文件的大小。Purgecss将检查我们的HTML文件并找到任何使用的Tailwind类。任何未使用的类将从最终生成的CSS文件中删除。当我们移出所有未使用的类时，我们的CSS文件大小减少到13kb！自定义很容易Tailwind允许我们自定义与类相关的所有内容。我们可以更改使用的颜色、字体大小、填充、响应式布局等。我们可以创建一个tailwind.config.js并将我们的配置写入其中。这样，我们的配置就会覆盖Tailwind的默认配置。//示例`tailwind.config.js`filemodule.exports={important:true,theme:{fontFamily:{display:['Gilroy','sans-serif'],body:['Graphik','sans-serif'],},extend:{colors:{cyan:'#9cdbff',},margin:{'96':'24rem','128':'32rem',},}},variants:{不透明度:['responsive','hover']}}快速实现响应式我们可以使用Tailwind提供的工具类来编写响应式内容。我从不喜欢自己编写响应式断点代码。在Tailwind中，定义了一系列响应式类型，这些工具类通过前缀来区分：sm:min-width:640pxmd:min-width:768pxlg:min-width:1024pxxl:min-width:1280px假设我们要实现一个盒子，在大屏幕上，背景是蓝色的，在小屏幕上，背景是蓝色的。有了这些定义好的前缀，就很容易实现了。