tailwind css

CSS is a technology that can be your best or worst friend. While it's incredibly flexible and can produce what seems like magic, without the proper care and attention, it can become hard to manage like any other code.

CSS是一种可以成为您最好或最坏朋友的技术。 尽管它非常灵活并且可以产生看似魔术的效果，但是如果没有适当的注意和注意，它就会像其他任何代码一样变得难以管理。

How can Tailwind CSS help us to take control of our styles?

Tailwind CSS如何帮助我们控制样式？

  • What is Tailwind?

    什么是尾风？

  • So what makes Tailwind great?

    那么，什么使Tailwind很棒呢？

  • Part 1: Adding Tailwind CSS to a static HTML page

    第1部分：将Tailwind CSS添加到静态HTML页面

  • Part 2: Adding Tailwind CSS to a React app

    第2部分：将Tailwind CSS添加到React应用

什么是尾风？ (What is Tailwind?)

Tailwind CSS is a "utility-first" CSS framework that provides a deep catalog of CSS classes and tools that lets you easily get started styling your website or application.

Tailwind CSS是“实用程序至上”CSS框架，提供了CSS类和工具的深入目录，可让您轻松开始设计网站或应用程序的样式。

The underlying goal is that as you're building your project, you don't need to deal with cascading styles and worrying about how to override that 10-selector pileup that's been haunting your app for the last 2 years.

基本目标是，在构建项目时，您无需处理层叠样式，也不必担心如何覆盖过去两年困扰您的应用程序的10选择器堆积。

那么，什么使Tailwind很棒呢？ (So what makes Tailwind great?)

Taildwind's solution is to provide a wide variety of CSS classes that each have their own focused use. Instead of a class called .btn that is created with a bunch of CSS attributes directly, in Tailwind, you would either apply a bunch of classes like bg-blue-500 py-2 px-4 rounded to the button element or build a .btn class by applying those utility class to that selector.

Taildwind的解决方案是提供各种CSS类，每个CSS类都有自己的重点用途。 在Tailwind中，可以直接应用一堆bg-blue-500 py-2 px-4 rounded之类的类，而不是直接使用一堆CSS属性创建的名为.btn的类，或者将其构建为.btn类，方法是将那些实用程序类应用于该选择器。

While Tailwind has a lot more going for it, we're going to focus on these basics for this tutorial, so let's dig in!

尽管Tailwind还有很多其他功能，但在本教程中我们将重点关注这些基础知识，因此让我们深入研究吧！

第1部分：将Tailwind CSS添加到静态HTML页面 (Part 1: Adding Tailwind CSS to a static HTML page)

We're going to start off by applying Tailwind CSS straight to a static HTML page. The hope is that by focusing on Tailwind and not the app, we can get a better understanding of what's actually happening with the framework.

我们将从直接将Tailwind CSS应用于静态HTML页面开始。 希望是，通过专注于Tailwind而非应用程序，我们可以更好地了解框架实际发生的情况。

步骤1：建立新网页 (Step 1: Creating a new page)

You can get started by simply creating a new HTML file. For the content, you can use whatever you want, but I'm going to use fillerama.io so the filler content is a bit more fun.

您可以通过简单地创建一个新HTML文件来开始使用。 对于内容，您可以使用任何想要的内容，但是我将使用fillerama.io，这样填充物的内容会更有趣。

If you want to simplify this step, you can just copy the file I created to get started.

如果您想简化此步骤，则只需复制我创建的文件即可上手。

Follow along with the commit!

跟随提交！

步骤2：通过CDN添加Tailwind CSS (Step 2: Adding Tailwind CSS via CDN)

Tailwind typically recommends that you install through npm to get the full functionality, but again, we're just trying to understand how this works first.

Tailwind通常建议您通过npm安装以获得完整的功能，但是，再次，我们只是试图首先了解它的工作原理。

So let's add a link to the CDN file in the <head> of our document:

因此，让我们在文档的<head>中添加指向CDN文件的链接：

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Once you save and reload the page, the first thing you'll notice is that all of the styles were stripped!

保存并重新加载页面后，您会注意到的第一件事是所有样式都被剥离了！

This is expected. Tailwind includes a set of preflight styles to fix cross-browser inconsistencies. For one, they include the popular normalize.css which they build upon with their own styles.

这是预期的。 Tailwind包含一组预检样式，以解决跨浏览器的不一致问题。 首先，它们包括流行的normalize.css ，它们以自己的样式构建。

But we're going to learn how to use Tailwind to add back our styles and set things up how we want!

但是，我们将学习如何使用Tailwind重新添加样式并设置所需的样式！

Follow along with the commit!

跟随提交！

步骤3：使用Tailwind CSS向页面添加样式 (Step 3: Using Tailwind CSS to add styles to your page)

Now that we have Tailwind installed, we've added the ability to make use of their huge library of utility classes that we'll now use to add styles back to our page.

现在我们已经安装了Tailwind，我们已经添加了使用它们庞大的实用程序类库的功能，现在将使用它们来将样式添加回我们的页面。

Let's start off by adding some margin to all of our paragraphs (<p>) and our list elements (<ol>, <ul>). We can do this by adding the .my-5 class to each element like so:

首先，为所有段落( <p> )和列表元素( <ol> ， <ul> )添加一些边距。 我们可以通过将.my-5类添加到每个元素来做到这一点，如下所示：

<p class="my-5">Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along…Belligerent and numerous.
</p>

The class name follows a pattern that you'll notice with the rest of the utility classes – .my-5 stands for margin (m) applied to the y-axis (y) with a value of 5 which in Tailwind's case, it uses rem, so the value is 5rem.

类名遵循其他实用程序类会注意到的模式.my-5代表应用于y轴(y)的边距(m)，其值为5，在Tailwind的情况下，它使用rem ，因此值为5rem。

Next, let's make our headers look like actual headers. Starting with our h1 tag, let's add:

接下来，让我们的标题看起来像实际的标题。 从h1标签开始，让我们添加：

<h1 class="text-2xl font-bold mt-8 mb-5">

Here's what's happening:

这是正在发生的事情：

  • text-2xl: set the text size (font-size) to 2xl. In Tailwind, that 2xl will equate to 1.5rem

    text-2xl ：将文本大小(字体大小)设置为2xl。 在Tailwind中，那2xl等于1.5rem

  • font-bold: set the weight of the text (font-weight) to bold

    font-bold ：将文本的粗细(font-weight)设置为粗体

  • mt-8: Similar to my-5, this will set the margin top (t) to 8rem

    mt-8 ：与my-5相似，这会将边距最高(t)设置为8rem

  • mb-5: And this will set the margin bottom (b) to 5rem

    mb-5 ：这会将边距下限(b)设置为5rem

With those classes added to the h1, let's apply those same exact classes to the rest of our header elements, but as we go down the list, reduce the size of the font size, so it will look like:

将这些类添加到h1 ，让我们将这些完全相同的类应用于其余的标头元素，但是当我们在列表中向下移动时，请减小字体大小的大小，因此它将如下所示：

  • h2: text-xl

    h2： text-xl

  • h3: text-lg

    h3： text-lg

Now let's make our list elements look like lists. Starting with our unordered list (<ul>), let's add these classes:

现在，让我们的列表元素看起来像列表。 从我们的无序列表( <ul> )开始，让我们添加以下类：

<ul class="list-disc list-inside my-5 pl-2">

Here's what we're adding:

这是我们要添加的内容：

  • list-disc: set the list-style-stype to disc (the markers on each line item)

    list-disc ：将list-style-stype设置为disc(每个订单项上的标记)

  • list-inside: sets the position of the list markers using  relative to the list items and the list itself with list-style-position to inside

    list-inside ：使用相对于列表项的列表标记的位置以及带有list-style-position的列表本身的位置

  • my-5: set the margin of the y axis to 5rem

    my-5 ：将y轴的边距设置为5rem

  • pl-2: set the left padding to 2rem

    pl-2 ：将左填充设置为2rem

Then we can apply the exact same classes to our ordered list (<ol>), except instead of list-disc, we want to change our style type to list-decimal, so that we can see numbers given it's an ordered list.

然后，我们可以将完全相同的类应用于有序列表( <ol> )，除了要代替list-disc ，我们希望将样式类型更改为list-decimal ，以便我们可以看到有序列表的数字。

<ol class="list-decimal list-inside my-5 pl-2">

And we have our lists!

我们有清单！

Finally, let's make our content a little easier to read by setting a max width and centering the content. On the <body> tag, add the following:

最后，通过设置最大宽度并将内容居中，让我们的内容更容易阅读。 在<body>标记上，添加以下内容：

<body class="max-w-4xl mx-auto">

/Note: Typically you wouldn't want to apply these classes to the <body> itself, rather, you can wrap all of your content with a <main> tag, but since we're just trying to get an idea of how this works, we'll roll with this. Feel free to add the <main> tag with those classes instead if you prefer!/

/注意：通常，您不想将这些类应用于<body>本身，而是可以使用<main>标记包装所有内容，但是由于我们只是试图了解如何实现此目的可以，我们将继续进行。 如果愿意，可以随意在这些类中添加<main>标记！

And with that, we have our page!

至此，我们有了我们的页面！

Follow along with the commit!

跟随提交！

步骤4：添加按钮和其他组件 (Step 4: Adding a button and other components)

For the last part of our static example, let's add a button.

对于静态示例的最后一部分，让我们添加一个按钮。

The trick with Tailwind, is they intentionally don't provide pre-baked component classes with the idea being that likely people would need to override these components anyways to make them look how they wanted.

Tailwind的诀窍在于，它们故意不提供预烘焙的组件类，因为这样的想法是人们可能仍需要重写这些组件以使其看起来像他们想要的那样。

So that means, we're going to have to create our own using the utility classes!

因此，这意味着我们将必须使用实用程序类创建自己的类！

First, let's add a new button. Somewhere on the page, add the following snippet. I'm going to add it right below the first paragraph (<p>) tag:

首先，让我们添加一个新按钮。 在页面的某处，添加以下代码段。 我将其添加到第一段( <p> )标签的正下方：

<button>Party with Slurm!</button>

You'll notice just like all of the other elements, that it's unstyled, however, if you try clicking it, you'll notice it still has the click actions. So let's make it look like a button.

与所有其他元素一样，您会注意到它没有样式设置，但是，如果尝试单击它，则会注意到它仍然具有单击操作。 因此，让它看起来像一个按钮。

Let's add the following classes:

让我们添加以下类：

<button class="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">Party with Slurm!
</button>

Here's a breakdown of what's happening:

这是正在发生的事情的分解：

  • text-white: we're setting our text color to white

    text-white ：我们将文本颜色设置为白色

  • font-bold: set the weight of the text to bold (font-weight)

    font-bold ：将文本的粗细设置为粗体(font-weight)

  • bg-purple-700: set the background color of the button to purple with a shade of 700. The 700 is relative to the other colors defined as purple, you can find these values on their palette documentation page

    bg-purple-700 ：将按钮的背景色设置为紫色(阴影为700)。700相对于定义为紫色的其他颜色，您可以在其调色板文档页面上找到这些值。

  • hover:bg-purple-800: when someone hovers over the button, set the background color to purple shade 800. Tailwind provides these helper classes that allow us to easily define interactive stiles with things like hover, focus, and active modifiers

    hover:bg-purple-800 ：当有人将鼠标悬停在按钮上时，将背景颜色设置为紫色阴影800。Tailwind提供了这些帮助程序类，这些类使我们能够轻松地定义带有悬浮，焦点和活动修改器之类的交互式阶梯

  • py-2: set the padding of the y-axis to 2rem

    py-2 ：将y轴的填充设置为2rem

  • px-4: set the padding of the  x-axis to 4rem

    px-4 ：将x轴的填充设置为4rem

  • rounded: round the corners of the element by setting the border radius. With tailwind, it sets the border-radius value to .25rem

    rounded ：通过设置边界半径来圆角元素的角。 使用顺风时，它将边界半径值设置为.25rem

And with all of that, we have our button!

除此之外，我们还有按钮！

You can apply this methodology to any other component that you'd like to build. Though it's a manual process, we'll find out how we can make this process easier when building in more dynamic projects like those based on React.

您可以将此方法应用于您要构建的任何其他组件。 尽管这是一个手动过程，但我们将发现在构建更多动态项目(如基于React的项目)时，如何使该过程变得更容易。

Follow along with the commit!

跟随提交！

第2部分：将Tailwind CSS添加到React应用 (Part 2: Adding Tailwind CSS to a React app)

For more of a real-world use case, we're going to add Tailwind CSS to an app created with Create React App.

对于更多实际使用案例，我们将Tailwind CSS添加到使用Create React App创建的应用程序中 。

First, we'll walk through the steps you need to take to add tailwind to your project using a fresh install of Create React App, then we'll use our content from our last example to recreate it in React.

首先，我们将逐步介绍使用全新安装的Create React App向项目添加顺风车的步骤，然后使用上一个示例中的内容在React中重新创建它。

第1步：启动一个新的React应用 (Step 1: Spinning up a new React app)

I'm not going to detail this step out too much. The gist is we'll bootstrap a new React app using Create React App.

我不会详细说明这一步骤。 要点是，我们将使用Create React App引导一个新的React应用程序。

To get started, you can follow along with the directions from the official React documentation:

要开始，你可以跟着同方向从官方文件做出React：

https://reactjs.org/docs/create-a-new-react-app.html

https://reactjs.org/docs/create-a-new-react-app.html

And once you start your development server, you should now see an app!

启动开发服务器后，您现在应该看到一个应用程序！

Finally, let's migrate all of our old content to our app. To do this, copy everything inside of the <body> tag of our static example and paste it inside of the wrapper <div className="App"> in the new React project.

最后，让我们将所有旧内容迁移到我们的应用程序。 为此，请在静态示例的<body>标记内复制所有内容，并将其粘贴到新的React项目中的包装器<div className="App">内。

Next, change all class=" attributes from the content we pasted in to className=" so that it's using proper React attributes:

接下来，将所有class="属性从我们粘贴的内容更改为className="以便使用正确的React属性：

And lastly, replace the className App on our wrapper <div> to the classes we used on our static <body>.

最后，将包装器<div>上的className App替换为我们在静态<body>上使用的类。

Once you save your changes and spin back up your server, it will look deceivingly okay.

保存更改并重新启动服务器后，它看起来似乎还可以。

React includes some basic styles itself, so while it looks okay, we're not actually using Tailwind yet. So let's get started by installing it!

React本身包含一些基本样式，因此尽管看起来还不错，但我们实际上还没有使用Tailwind。 因此，让我们开始安装它！

Follow along with the commit!

跟随提交！

第2步：在React应用中安装Tailwind (Step 2: Installing Tailwind in your React app)

There are a few steps we'll need to go through in order to get Tailwind up and running on our app. Make sure you follow these steps carefully to ensure it's properly configured.

为了使Tailwind启动并在我们的应用程序上运行，我们需要执行几个步骤。 确保仔细执行以下步骤，以确保其配置正确。

First, let's add our dependencies:

首先，让我们添加依赖项：

yarn add tailwindcss postcss-cli autoprefixer
# or
npm install tailwindcss postcss-cli autoprefixer

Per Tailwind's documentation, we need to be able to process our styles so that they can be properly added to our pipeline. So in the above, we're adding:

根据Tailwind的文档 ，我们需要能够处理样式，以便可以将其正确添加到我们的管道中。 因此，在上面，我们添加：

  • tailwindcss: the core Tailwind package

    tailwindcss ：核心Tailwind软件包

  • postcss-cli: Create React App already uses postcss, but we need to configure Tailwind to be part of that build process and run it's own processing

    postcss-cli ：Create React App已经使用postcss了，但是我们需要配置Tailwind作为该构建过程的一部分并运行它自己的处理

  • autoprefixer: Tailwind doesn't include vendor prefixes, so we want to add autoprefixer to handle this for us. This runs as part of our postcss configuration

    autoprefixer ：Tailwind不包含供应商前缀，因此我们想添加autoprefixer来为我们处理。 这是我们postcss配置的一部分

We're also going to add two dev dependencies that make it easier to work with our code:

我们还将添加两个dev依赖项，以使其更易于使用我们的代码：

yarn add concurrently chokidar-cli -D
# or
npm install concurrently chokidar-cli --save-dev

  • concurrently: a package that lets us set up the ability to run multiple commands at once. This is helpful since we'll need to watch both the styles and React app itself.

    并发 ：一个软件包，使我们可以设置一次运行多个命令的功能。 这很有用，因为我们需要同时观察样式和React应用本身。

  • chokidar-cli: let's us watch files and run a command when changed. We'll use this to watch our CSS file and run the build process of the CSS on cahnge

    chokidar-cli ：让我们观看文件并在更改后运行命令。 我们将使用它来观看我们CSS文件并在cahnge上运行CSS的构建过程

Next, let's configure postcss, so create a new file in the root of your project called postcss.config.js and include the following:

接下来，让我们配置postcss，因此在项目的根目录中创建一个名为postcss.config.js的新文件，并包含以下内容：

// Inside postcss.config.js
module.exports = {plugins: [require('tailwindcss'),require('autoprefixer')],
};

This will add the Tailwindcss and Autoprefixer plugins to our postcss config.

这会将Tailwindcss和Autoprefixer插件添加到我们的postcss配置中。

With our configuration, we need to include it as part of the build and watch processes. Inside package.json, add the following to definitions to your scripts property:

使用我们的配置，我们需要将其作为构建和监视过程的一部分。 在package.json内部，将以下内容添加到您的scripts属性中：

"build:css": "tailwind build src/App.css -o src/index.css",
"watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",

Additionally, modify the start and build scripts to now include those commands:

此外，修改start脚本和build脚本以现在包括以下命令：

"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
"build": "npm run build:css && react-scripts build",

With our configuration ready to go, let's try our styles back to where they were when we left off from the static example.

准备好我们的配置后，让我们尝试将样式恢复为与静态示例分开时的样式。

Inside the App.css file, replace the entire content with:

在App.css文件中，将整个内容替换为：

@tailwind base;
@tailwind components;
@tailwind utilities;

This is going to import Tailwind's base styles, components, and utility classes that allow Tailwind to work as you would expect it to.

这将导入Tailwind的基本样式，组件和实用程序类，这些样式，组件和实用程序类使Tailwind能够按预期工作。

We can also remove the App.css import from our App.js file because it's now getting injected directly into our index.css file. So remove this line:

我们还可以从App.js文件中删除App.css导入，因为现在它已直接注入到我们的index.css文件中。 因此删除此行：

import './App.css';

Once you're done, you can start back up your development server! If it was already started, make sure to restart it so all of the configuration changes take effect.

完成后，就可以开始备份开发服务器了！ 如果已经启动，请确保重新启动它，以便所有配置更改均生效。

And now the page should look exactly like it did in our static example!

现在，该页面应该看起来像在我们的静态示例中一样！

Follow along with the commit!

跟随提交！

步骤3：使用Tailwind创建一个新的按钮组件类 (Step 3: Creating a new button component class with Tailwind)

Tailwind doesn't ship with prebaked component classes, but it does make it easy to create them!

Tailwind并未附带预烘焙的组件类，但它确实使创建它们变得容易！

We're going to use our button that we already created as an example of creating a new component. We'll create a new class btn as well as a color modifier btn-purple to accomplish this.

我们将使用已经创建的按钮作为创建新组件的示例。 我们将创建一个新的btn类以及一个颜色修改器btn-purple来完成此任务。

The first thing we'll want to do is open up our App.css file where we'll create our new class. Inside that file, let's add:

我们要做的第一件事是打开App.css文件，在其中创建新类。 在该文件中，我们添加：

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

If you remember from our HTML, we're already including those same classes to our <button> element.  Tailwind let's us "apply" or include the styles that make up these utility classes to another class, in this case, the .btn class.

如果您还记得我们HTML，我们已经将这些相同的类包含在<button>元素中。 Tailwind让我们“应用”或将构成这些实用程序类的样式包括在另一个类(在本例中为.btn类)中。

And now that we're creating that class, let's apply it to our button:

现在，我们正在创建该类，现在将其应用于按钮：

<button className="btn text-white bg-purple-700 hover:bg-purple-800">Party with Slurm!
</button>

And if we open up our page, we can see our button still looks the same. If we inspect the element, we can see our new .btn class generated with those styles.

如果打开页面，我们可以看到我们的按钮看起来仍然一样。 如果检查元素，则可以看到使用这些样式生成的新.btn类。

Next, let's create a color modifier. Similar to what we just did, we're going to add the following rules:

接下来，让我们创建一个颜色修改器。 与我们刚才所做的类似，我们将添加以下规则：

.btn-purple {@apply bg-purple-700 text-white;
}.btn-purple:hover {@apply bg-purple-800;
}

Here, we're adding our background color and our text color to our button class. We're also applying a darker button color when someone hovers over the button.

在这里，我们将背景色和文本色添加到按钮类中。 当有人将鼠标悬停在按钮上时，我们还会应用较深的按钮颜色。

We'll also want to update our HTML button to include our new class and remove the ones we just applied:

我们还希望更新HTML按钮以包括我们的新类，并删除刚刚应用的类：

<button className="btn btn-purple">Party with Slurm!
</button>

And with that change, we can still see that nothing has changed and we have our new button class!

有了这一更改，我们仍然可以看到没有任何更改，并且我们有了新的按钮类！

Follow along with the commit!

跟随提交！

将这些概念应用于更多组件 (Applying these concepts to more components)

Through this walkthrough, we learned how to create a new component class using the Tailwind apply directive. This allowed us to create reusable classes that represent a component like a button.

通过本演练，我们学习了如何使用Tailwind apply指令创建新的组件类。 这使我们可以创建可重用的类，以表示类似于按钮的组件。

We can apply this to any number of components in our design system. For instance, if we wanted to always show our lists the way we set them up here, we could create a .list-ul class that represented an unordered list with the Tailwind utilities list-disc list-inside my-5 pl-2 applied.

我们可以将其应用于设计系统中的任何数量的组件。 例如，如果我们希望始终以在此处设置列表的方式显示列表，则可以创建一个.list-ul类，该类使用Tailwind实用程序list-disc list-inside my-5 pl-2表示无序列表。 。

您想与Tailwind一起使用哪些提示和技巧？ (What tips and tricks do you like to use with Tailwind?)

Share with me on Twitter!

在Twitter上与我分享！