tailwind css_15分钟内开始使用Tailwind CSS

tailwind css

Tailwind CSS is a CSS framework that gives you utility classes instead of pre-built components.

Tailwind CSS是一个CSS框架，可为您提供实用程序类，而不是预先构建的组件。

One of my favorite things I've found after using Tailwind:

使用Tailwind之后，我发现了我最喜欢的东西之一：

You'll never need to override CSS framework classes again.

您再也不需要重写CSS框架类。

The home page has a really cool example of how to work with Tailwind:

主页上有一个非常酷的示例，说明如何使用Tailwind：

建立真实的事物 (Building Real Things)

This article is focused on taking a look at Tailwind features. If you would like to skip ahead and jump straight into building things with Tailwind, look at these articles:

本文重点介绍一下Tailwind功能。 如果您想跳过并直接使用Tailwind构建东西，请查看以下文章：

• Recreate the Spotify Album Page
  重新创建Spotify相册页面
• Recreate Google.com Home Page
  重新创建Google.com主页
• Recreate Twitter Creation Modal
  重新创建Twitter创建模式

快速示例-构建卡 (A Quick Example - Building a Card)

Here's an example of a Bootstrap card vs a Tailwind card component. Warning: This may look very weird and you may dismiss Tailwind after this example. Give it some more time and a few practice examples and you'll start to see the power of utility classes and the idea of composition over inheritance.

这是Bootstrap卡与Tailwind卡组件的示例。 警告：这看起来很怪异，您可以在此示例后关闭Tailwind。 给它更多时间和一些实践例子，您将开始看到实用工具类的力量和组合继承的思想。

引导卡 ： (A Bootstrap card:)

<div class="card" style="width: 18rem;">
  <div class="card-body">

        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Content goes here</p>

    </div>
</div>

While the Bootstrap card is easy to create, it isn't the easiest to customize to our own applications. You'll need to override this .card class and maybe even regretfully use !important.

尽管Bootstrap卡很容易创建，但要针对我们自己的应用进行自定义并不是最容易的。 您需要重写此.card类，甚至可能遗憾地使用!important 。

Let's see Tailwind Card:

让我们看看Tailwind卡：

<div class="bg-white rounded shadow border p-6 w-64">
  <h5 class="text-3xl font-bold mb-4 mt-0">My Title</h5>
  <p class="text-gray-700 text-sm">Content goes here</p>
</div>

We are using many utility classes to achieve a card. While this looks like a little more work upfront, the biggest benefit is that you can customize to your style quickly and easily.

我们正在使用许多实用程序类来实现一张卡。 尽管这看起来需要更多工作，但最大的好处是您可以快速轻松地自定义样式 。

Here's the CodePen. Here's a breakdown of the classes for the card:

这是CodePen 。 以下是该卡类别的细分：

• bg-white: background: #fff
  bg-white： background: #fff
• rounded: border-radius: 0.25rem
  取整： border-radius: 0.25rem
• shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
  阴影： 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
• border: border-width: 1px
  边框： border-width: 1px
• p-6: padding: 1.5rem
  p-6： padding: 1.5rem
• w-64: width: 16rem
  w-64： width: 16rem

Here's the classes for the title:

这是标题的类：

• text-3xl: font-size: 1.875rem
  文字3xl： font-size: 1.875rem
• font-bold: font-weight: 700
  font-bold： font-weight: 700
• mb-4: margin-bottom: .75rem
  mb-4： margin-bottom: .75rem
• mt-0: margin-top: 0
  mt-0： margin-top: 0

Here's the classes for the content:

这是内容的类：

• text-gray-700: color: #4a5568
  文字灰色700： color: #4a5568
• text-sm: font-size: .875rem
  text-sm： font-size: .875rem

Tailwind CSS is an investment. If you want to write your CSS and design your apps faster, you're gonna have to put in the time to learn the classes; this is the same as any technology that you want to benefit from.

Tailwind CSS是一项投资。 如果您想编写CSS并更快地设计应用程序，则必须花时间学习这些课程。 这与您想从中受益的任何技术相同。

这会使我HTML太忙吗？ (Will this make my HTML too busy?)

This can be seen as writing inline styles. There are many strategies to moving these classes out of your HTML and making them reusable. Here are some tactics for cleaning up our Tailwind classes:

这可以看作是编写内联样式。 有许多策略可以将这些类移出HTML并使其可重用。 以下是清理Tailwind类的一些策略：

• Using Sass and moving our classes out of HTML
  使用Sass并将我们的类移出HTML
• Using JS components (React/Vue) and only having to write classes once
  使用JS组件（React / Vue），只需要编写一次类

Here's an example of using the Tailwind @apply function to clean up your HTML:

这是使用Tailwind @apply函数清理HTML的示例：

.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn-blue {
  @apply bg-blue-500 text-white;
}

.btn-blue:hover {
  @apply bg-blue-700;
}

An approach that I personally like is keeping the classes in the template and then finding ways to make that template reusable. React components is a good example of this.

我个人喜欢的一种方法是将类保留在模板中，然后找到使该模板可重用的方法。 React组件就是一个很好的例子。

We'll talk about that more later. For now, we need to focus on how we can use Tailwind to build things.

我们稍后再讨论。 目前，我们需要专注于如何使用Tailwind来构建事物。

什么是Tailwind CSS？ ( What is Tailwind CSS? )

Now that we've seen a quick example, let's dig deeper. Tailwind CSS is a CSS framework that may be different than what you've used in the past. When most people think of CSS frameworks, they usually think of the most popular one, Bootstrap, or any of the very popular ones like Foundation or Bulma.

现在，我们已经看到了一个简单的示例，让我们深入研究。 Tailwind CSS是一个CSS框架，它可能与您过去使用的框架有所不同。 当大多数人想到CSS框架时，他们通常会想到最受欢迎CSS框架， Bootstrap或任何非常流行的框架，例如Foundation或Bulma 。

Tailwind is a different type of framework. Instead of pre-built components, Tailwind provides utility classes.

Tailwind是另一种类型的框架。 Tailwind提供了实用程序类，而不是预先构建的组件。

Tailwind提供了一些类型的类 (Here are some types of classes Tailwind provides)

When we talk about utility classes, we mean that we have a multitude of classes that we can use. These will link direclty to the Tailwind docs.

当我们谈论实用程序类时，是指我们有许多可以使用的类。 这些将直接链接到Tailwind文档。

• Background Color
  背景颜色
• Padding
  填充
• Flexbox
  弹性盒
• Grid
  格
• Font Size
  字体大小

The Tailwind docs are very good at helping us find what we need. You'll find yourself browsing the docs often while you are learning the classes. A tip is to use the keyboard shortcut for / to focus the search bar.

Tailwind文档非常擅长帮助我们找到所需的内容。 在学习课程时，您会发现自己经常浏览文档。 提示是使用键盘快捷键/来聚焦搜索栏。

顺风的好处 ( The Benefits of Tailwind )

You may be wondering, "why should we use a utility class framework that will make our HTML seem busier?"

您可能想知道，“为什么我们应该使用实用程序类框架来使我们HTML看起来更忙？”

Most CSS frameworks do too much.

大多数CSS框架做得太多。

When using Bootstrap or something similar, we'll have a lot pre-built classes like card, navbar, and more. As soon as we want to customize those things for our own projects, we'll have to write custom CSS and try to override the base styles.

当使用Bootstrap或类似的东西时，我们将有很多预构建的类，例如card ， navbar等。 一旦要为自己的项目自定义这些内容，就必须编写自定义CSS并尝试覆盖基本样式。

This can lead to busy CSS where you are writing styles to undo styles!

这会导致您忙于CSS编写样式以撤消样式！

Tailwind gives us a "use what you need" approach.

Tailwind为我们提供了“使用您所需要的”方法。

This benefit will be more apparent the more time you spend with the framework. Let's go over some benefits and build a few things.

您在框架上花费的时间越多，好处就越明显。 让我们讨论一些好处并建立一些东西。

捆束尺寸 (Bundle Size)

Tailwind on its own is a large CSS framework. This is because of how many utility classes come with it.

Tailwind本身就是一个大型CSS框架。 这是因为附带了许多实用程序类。

The big benefit is when we use a tool called Purgecss to control our file size. Purgecss will look at our HTML and find the Tailwind classes that are being used. Any classes that we don't use will be removed from our final CSS file/bundle.

最大的好处是当我们使用名为Purgecss的工具来控制文件大小时 。 Purgecss将查看我们HTML并找到正在使用的Tailwind类。 我们不使用的所有类将从我们的最终CSS文件/捆绑包中删除。

We can remove all the classes that we aren't using. Our CSS could be as small as 13kb!

我们可以删除所有未使用的类。 我们CSS可能只有13kb！

易于定制 (Easy to Customize)

Tailwind allows us to customize everything about our classes. We can change the color palette, size of fonts, paddings, responsiveness, and more.

借助Tailwind，我们可以自定义有关类的所有内容。 我们可以更改调色板，字体大小，填充，响应度等。

We can create a tailwind.config.js and write our config changes in there. Anything in this file will override the Tailwind default config.

我们可以创建一个tailwind.config.js并在其中写入配置更改。 此文件中的所有内容都将覆盖Tailwind 默认配置 。

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

快速响应 (Quick to Responsive)

We can write in responsiveness using the utlity classes Tailwind provides. I was never a fan of writing my own CSS to create responsive breakpoints.

我们可以使用Tailwind提供的utlity类来编写响应式。 我从不喜欢编写自己CSS创建响应式断点。

With Tailwind, we can write our responsive styles by prefixing the utility classes with:

使用Tailwind，我们可以通过在实用程序类之前添加前缀来编写响应式样式：

• sm: min-width: 640px
  sm ：最小宽度：640px
• md: min-width: 768px
  md ：最小宽度：768px
• lg: min-width: 1024px
  lg ：最小宽度：1024像素
• xl: min-width: 1280px
  xl ：最小宽度：1280px

Let's say we want a box to be blue at larger screens and red at smaller screens. We start with mobile and add the class for blue for larger screens:

假设我们希望框在大屏幕上为蓝色，在小屏幕上为红色。 我们从移动设备开始，为较大的屏幕添加蓝色类：

<div class="bg-red-400 lg:bg-blue-400">
    <p>i am red on small and medium devices</p>

    <p>i am blue on large and extra large devices</p>
</div>

超快速原型制作（如果您非常了解CSS） (Super Fast Prototyping (if you know CSS well))

My favorite feature of Tailwind is how fast I can create great designs in browser. Tailwind won't give you perfect designs. It just gives you the tools to quickly create. I've never considered myself a designer and I don't use tools like Figma. I'd rather jump right into the code and design in browser.

我最喜欢的Tailwind功能是我可以在浏览器中快速创建出色的设计。 尾风不会为您提供完美的设计。 它只是为您提供了快速创建的工具。 我从不认为自己是设计师，也没有使用Figma这样的工具。 我宁愿直接进入浏览器中的代码和设计。

You need to know your CSS well if you want to use Tailwind.

如果要使用Tailwind，您需要非常了解CSS。

Using Tailwind will make sure you know your CSS classes as it doesn't hide any of CSS behind component classes. If you use a Bootstrap card, you may not know what goes into that card class. When you use Tailwind, you'll know exactly what CSS you're getting.

使用Tailwind将确保您了解CSS类，因为它不会在组件类后面隐藏任何CSS。 如果使用Bootstrap card ，则可能不知道该card类别中包含什么。 当您使用Tailwind时，您将确切知道要获得CSS。

We recreated a few things we found around the web with Tailwind. Check out those articles to see us quickly prototype with Tailwind.

我们使用Tailwind重新创建了一些在网络上发现的东西。 查看这些文章，以了解我们如何使用Tailwind快速创建原型。

• Recreate the Spotify Album Page
  重新创建Spotify相册页面
• Recreate Google.com Home Page
  重新创建Google.com主页
• Recreate Twitter Creation Modal
  重新创建Twitter创建模式

结论 ( Conclusion )

Tailwind CSS is a different way of looking at your CSS. It provides a great foundation to quickly create any type of design you want.

Tailwind CSS是查看CSS的另一种方式。 它为快速创建所需的任何类型的设计提供了良好的基础。

It may take some getting used to, but I believe it's worth the effort.

可能需要一些时间来适应，但我认为值得付出努力。

You'll never need to override CSS framework classes again.

您再也不需要重写CSS框架类。

Stay tuned as we'll be building more things with Tailwind!

敬请期待，我们将与Tailwind合作开发更多产品！

翻译自: https://scotch.io/tutorials/get-started-with-tailwind-css-in-15-minutes

tailwind css