tailwindcss模板_如何开始使用TailwindCSS

tailwindcss模板

TailwindCSS is an awesome utility-first CSS library for creating beautiful layouts with less customized CSS.

TailwindCSS是一个很棒的实用程序优先CSS库，用于使用较少的自定义CSS创建美观的布局。

There's a good chance you've heard about Tailwind. But, have you tried using it?

您很有可能听说过Tailwind。 但是，您是否尝试过使用它？

In this article, I'll share the things that make Tailwind different from other component libraries I know. And I'll discuss why you should start using it.

在本文中，我将分享使Tailwind与我所知道的其他组件库不同的内容。 我将讨论为什么您应该开始使用它。

Note that everything here is my opinion. I'm not saying I've used all the component libraries in the world, lol.

请注意，这里的一切都是我的意见。 我并不是说我已经使用了世界上所有的组件库，哈哈。

TailwindCSS之前 (Before TailwindCSS)

...there were component libraries like Bootstrap and Material UI, to name a few. These libraries come with a set of pre-defined components. For instance, the most common (or heard of) is probably PrimaryButton.

...有一些组件库，例如Bootstrap和Material UI，仅举几例。 这些库带有一组预定义的组件。 例如，最常见(或听说过)的可能是PrimaryButton 。

These libraries reduce the hassle of designing elements from scratch with CSS. Most of these libraries also do an amazing job of making the components customizable by the user, so that they do not have to stick to the creator's decisions.

这些库减少了使用CSS从头开始设计元素的麻烦。 这些库中的大多数库在使组件可由用户自定义方面也做得非常出色，因此它们不必遵循创建者的决定。

However, this customizability most of the time involves overwriting. For example, creating new classes to overwrite the existing styles provided by the library.

但是，这种可定制性大多数时候都涉及覆盖。 例如，创建新类以覆盖库提供的现有样式。

This is not a big issue per se (depending on the user, for me it is), but you still have to go with the "Do I like the way this is styled? No. Let me overwrite it" kind of flow.

这本身并不是一个大问题(取决于用户，对我来说是这样)，但是您仍然必须遵循“我喜欢这种样式的样式吗？不。让我覆盖它”这样的流程。

Some developers may see these already made components as just what they need. But creators cannot always make something perfect for every user. Thankfully, as stated earlier, they do a great job of making the components customizable.

一些开发人员可能认为这些已经制造的组件正是他们所需要的。 但是创作者不能总是为每个用户提供完美的作品。 幸运的是，如前所述，它们在使组件可定制方面做得很好。

然后出现了TailwindCSS (Then came TailwindCSS)

Tailwind is a utility-first CSS library. This means that they are focused on utilities. They provide utility classes like borders, colors, background colors, and so on. They don't necessarily define how your component looks. You decide that using different classes they provide.

Tailwind是实用程序优先CSS库。 这意味着他们专注于实用程序。 它们提供了实用程序类，例如边框，颜色，背景色等。 它们不一定定义组件的外观。 您决定使用它们提供的不同类。

This is why I love Tailwind. Of course, overwriting styles is still possible here, but that's very rare. The wonderful team behind the product created many classes for different needs. Without the need to overwrite, you can configure the default styles that you want the library to use in the config file. Pretty awesome right?

这就是为什么我喜欢Tailwind。 当然，这里仍然可以覆盖样式，但这非常少见。 产品背后的优秀团队为不同需求创建了许多类。 无需覆盖，您可以配置希望库在配置文件中使用的默认样式。 太棒了吧？

If any of these terms do not make sense to you just now, do not worry. We'll get into more detail as we proceed with the article.

如果这些术语中的任何一个对您现在还没有意义，请不要担心。 在继续本文时，我们将更详细地介绍。

实用性类的例子 (Examples of utitlity classes)

Before we get started using TailWindCSS, let me show you a few classes that make the tool awesome.

在开始使用TailWindCSS之前，让我向您展示一些使该工具很棒的类。

• rounded: adds a border-radius of 0.25rem to an element.

  rounded ：向元素添加0.25rem的border-radius 。

• text-gray-400: adds a light gray color (#cbd5e0). 300 adds something lighter and 500, something darker.

  text-gray-400 ：添加浅灰色( #cbd5e0 )。 300增加较浅的部分，500增加较黑的部分。

• bg-gray-100: adds a light gray (#f7fafc) background color.

  bg-gray-100 ：添加浅灰色( #f7fafc )背景色。

• md:text-gray-100: adds a media query for an element such that screen widths greater than or equal to the medium screen (768px by default) applies a very light gray (#f7fafc) to the element. Neat yeah?

  md:text-gray-100 ：添加对元素的媒体查询，以使屏幕宽度大于或等于中等屏幕(默认为768px)将非常浅的灰色( #f7fafc )应用于该元素。 整洁的是吗？

• hover:underline: adds an underline to a text when hovered on.

  hover:underline ： hover:underline时在文本上添加下划线。

• xs:text-lg: similar to md.., this applies a media query for an element such that a font size of 1.125rem (by default) is used for an element when the screen width is greater than or equal to the extra small screen (640px by default).

  xs:text-lg ：类似于md.. ，它对元素进行媒体查询，以便当屏幕宽度大于或等于极小值时，将对元素使用1.125rem的字体大小(默认情况下)屏幕(默认为640像素)。

• mt-20: applies a margin-top of 5rem to an element.

  mt-20 ：对元素应用5rem的margin-top 。

• awesome-responsive: ok, this does not exist 😜

  awesome-responsive ：好的，这不存在

All these options are also customizable of course. We'll see that later in this article.

所有这些选项当然也可以自定义。 我们将在本文后面看到。

As seen in the classes, they don't (on their own) determine the final look of an element or the layout of a page. It's their combination by you the developer that determines that. This gives you full control without having to overwrite.

如在类中所见，它们不能(独立地)确定元素的最终外观或页面的布局。 由开发人员决定的是它们的组合。 这使您可以完全控制而不必覆盖。

At this point, I want to believe you find TailWindCSS awesome, so let's get started using it.

在这一点上，我想相信您会发现TailWindCSS很棒，所以让我们开始使用它。

安装与配置 (Installation and configuration)

Their installation documentation explains the installation process in detail. For the sake of completeness, I'll share the installation steps here.

他们的安装文档详细说明了安装过程。 为了完整起见，我将在这里分享安装步骤。

1.使用npm安装软件包 (1. Install package with npm)

npm install tailwindcss

2.将Tailwind添加到CSS (2. Add Tailwind to your CSS)

@tailwind base;
@tailwind components;
@tailwind utilities;
h1 {
  color: purple;
}

@tailwind is not a valid CSS syntax. But, tailwind uses these directives (as they are called) to generate the built CSS. h1 will also be added to the stylesheet as-is.

@tailwind不是有效CSS语法。 但是，顺风使用这些指令(称为它们)来生成内置CSS。 h1也将原样添加到样式表中。

h1 is not compulsory. I was trying to show you that any other thing can be added.

h1不是强制性的。 我试图向您展示可以添加任何其他内容。

3.创建您的配置文件 (3. Create your config file)

This step is optional, but it allows you to specify some default values. With this configuration, tailwind will generate the right CSS. Remember I said earlier that overwriting would be minimal as Tailwind allows you to configure your default styles.

此步骤是可选步骤，但是它允许您指定一些默认值。 使用此配置，顺风将生成正确CSS。 记得我之前说过，由于Tailwind允许您配置默认样式，因此覆盖将是最小的 。

To create your config file, do this:

要创建您的配置文件，请执行以下操作：

npx tailwindcss init

npx because tailwind was not installed globally. This way, the local installed package is used.

npx因为未全局安装tailwind。 这样，将使用本地安装的软件包。

The above code will create a template config file similar to this:

上面的代码将创建一个类似于以下内容的模板配置文件：

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },final
  variants: {},
  plugins: [],
}

This documentation explains how to configure the file.

本文档说明了如何配置文件。

4.在PostCSS中使用Tailwind (4. Using Tailwind with PostCSS)

PostCSS helps the build process of the tailwind stylesheet output the correct CSS code. In your postcss.config.js file, add this:

PostCSS帮助顺风样式表的构建过程输出正确CSS代码。 在您的postcss.config.js文件中，添加以下内容：

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

autoprefixer is also added (a plugin of PostCSS) to add vendor prefixes to properties.

autoprefixer也被添加(PostCSS的插件)来添加供应商前缀到属性。

To build your css, run the following:

要构建css，请运行以下命令：

npx postcss tailwind.css -o public/style.css

This takes the tailwind.css file (with the directives), and outputs the processed content to the public stylesheet provided.

这将获取tailwind.css文件(带有伪指令)，并将处理后的内容输出到提供的公共样式表。

Now you're ready to use Tailwind.

现在，您可以使用Tailwind。

如何在项目中使用Tailwind (How to use Tailwind in your project)

With the public stylesheet populated, all pages linked to the stylesheet can use the styles. An example is:

填充公共样式表后，链接到样式表的所有页面都可以使用样式。 一个例子是：

<div
  className='flex justify-center mt-10 items-center'
>
  <h1 className='text-xl md:text-4xl'>
    Hello
  </h1>
  <button
    className='bg-red-300 p-2 rounded mx-20 hover:bg-red-600 hover:text-white'
  >
    Click me!
  </button>
  <a
    href='https://google.com'
    className='underline font-bold'
  >
    Google
  </a>
</div>

Here's what the classes are doing for the elements:

这是类对元素进行的操作：

• flex - display: flex.

  flex - display: flex 。

• justify-center - justify-content: center.

  justify-center - justify-content: center 。

• mt-10 - margin-top: 2.5rem

  mt-10 margin-top: 2.5rem

• items-center - align-items: center

  items-center - align-items: center

• text-xl - font-size: 1.25rem

  text-xl font-size: 1.25rem

• md:text-xl - md means medium size. The default is 768px but you can change that in the config file.

  md:text-xl -md表示中等大小。 默认值为768px，但您可以在配置文件中更改它。

Here's what the class does for you:

这是全班为您服务的内容：

@media only screen and (min-width:768px) {
    element {
      font-size: 1.25rem;
    }
  }

• bg-red-300 - background-color: #feb2b2

  bg-red-300 background-color: #feb2b2

• rounded - border-radius: 0.25rem

  rounded - border-radius: 0.25rem

• mx-20 - margin-left: 5rem and margin-right: 5rem

  mx-20 margin-left: 5rem和margin-right: 5rem

• hover:bg-red-600 - applies a background color of #e53e3e on hover pseudo state.

  hover:bg-red-600 #e53e3e在悬停伪状态上应用背景颜色#e53e3e 。

• hover:text-white - applies a color of white on hover pseudo state.

  hover:text-white在悬停伪状态上应用白色。

• underline: text-decoration: underline

  underline ： text-decoration: underline

• font-bold: font-weight: bold

  font-bold ： font-weight: bold

Here's the result for a screen greater than 768px:

这是大于768像素的屏幕的结果：

and for a screen less than 768px:

对于小于768像素的屏幕：

Notice the difference in the h1 element?

注意h1元素的区别吗？

This article cannot contain all (or even the most special) features of Tailwind. You can start from here to learn more.

本文不能包含Tailwind的所有(或什至是最特殊的)功能。 您可以从这里开始以了解更多信息。

结语 (Wrap up)

That's an introduction to the beautiful Tailwind!

那是美丽的尾风的介绍！

In summary, TailwindCSS does not define the way your component looks. You define that by combining several classes together.

总而言之，TailwindCSS并未定义组件的外观。 您可以通过将几个类组合在一起来定义。

I personally love TailwindCSS because it gives me that feel of vanilla CSS (I love my vanilla CSS 🤗) while at the same time making things easy for me.

我个人喜欢TailwindCSS，因为它给了我香草CSS的感觉(我喜欢我的香草CSS🤗)，同时使我的工作变得简单。

While it abstracts the styles for me, I'm not entirely unaware of what's going on. For instance, with PrimaryButton, I do not know the paddings and colors that made up that component. But with mt-10, I understand that it's simply margin-top:2.5rem.

虽然它为我抽象了样式，但我并不完全不知道发生了什么。 例如，对于PrimaryButton ，我不知道组成该组件的填充和颜色。 但是对于mt-10 ，我知道这只是margin-top:2.5rem 。

If you have any questions or contributions to this article, you can find me on the bird app 🐦

如果您对本文有任何疑问或贡献，可以在Bird应用程序中找到我🐦

翻译自: https://www.freecodecamp.org/news/get-started-with-tailwindcss/

tailwindcss模板