tailwind css_Tailwind CSS简介

╰半夏微凉° 2022-11-27 04:27 128阅读 0赞

tailwind css

In this article we’ll be looking into my personal favorite design framework: Tailwind CSS. A completely style-agnostic, utility-based library for creating quick and responsive designs. Tailwind is so simple that once you understand the naming conventions and patterns you can almost guess most of the functionality without needing the documentation.

在本文中，我们将研究我个人最喜欢的设计框架：Tailwind CSS。 一个完全与样式无关的，基于实用程序的库，用于创建快速响应的设计。 Tailwind非常简单，一旦您了解了命名约定和模式，您几乎可以猜出大多数功能，而无需使用文档。

All of the options introduced here can be explored in more detail in the [official docs][].

此处介绍的所有选项都可以在[官方文档][official docs]中更详细地探讨。

## 安装 **(**Installation**)** ##

While there are a few different methods for setting up Tailwind, like Gulp, postCSS, or even their own CLI, the simplest route for getting started for learning’s sake is just be to use the CDN URL from unpkg: `https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css`.

尽管有几种不同的设置Tailwind的方法，例如Gulp，postCSS甚至是他们自己的CLI，但为了学习而上手的最简单方法是使用unpkg的CDN URL： `https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css` ://unpkg.com `https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css` 。

Or, you can install the library into your project using npm or [Yarn][]:

或者，您可以使用npm或[Yarn][]将库安装到项目中：

$ npm i tailwindcss
    
    # or, if Yarn is more your thing:
    $ yarn add tailwindcss

## 样板 **(**Boilerplate**)** ##

Here’s a simple boilerplate HTML file that includes Tailwind from unpkg:

这是一个简单的样板HTML文件，其中包含来自unpkg的Tailwind：

index.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
      <title>Tailwind CSS</title>
    </head>
    <body>
    
    </body>
    </html>

## 色彩 **(**Colors**)** ##

The class naming for colors is always the same, `element-color-intensity`. So a red background becomes `bg-red-500`, with the number value ranging from 100 to 900. This patterns applies to borders, backgrounds, and text.

颜色的类命名始终相同，即`element-color-intensity` 。 因此，红色背景变为`bg-red-500` ，数字值的范围为100至900。此模式适用于边框，背景和文本。

Here’s a simple example:

这是一个简单的例子：

<h1 class="text-blue-400">Hello World</h1>
    
    <p class="text-white bg-indigo-900">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, veniam.</p>
    
    
    <input type="text" class="bg-transparent text-white border border-red-600" placeholder="input...">

## 大小和间距 **(**Size and Spacing**)** ##

Width and height, shortened to `w` and `h`, can take values from 0 to 64 (with some values missing, which you can check for in the docs or VSCode’s [IntelliSense][]) and a few key words like `auto`, `full` for 100%, or `screen` for 100vw/vh. Width can also use fractions out of 1-6 or out of 12, so we could write 50% like `1/2`, `2/4`, `3/6`, or `6/12`.

宽度和高度(分别缩短为`w`和`h` )可以采用0到64之间的值(有些值丢失，可以在docs或VSCode的[IntelliSense中进行检查][IntelliSense] )和一些关键字，例如`auto` ，100％ `full`或`screen`为100vw / vh。 宽度也可以使用1-6或12之外的分数，因此我们可以写50％，例如`1/2` `2/4` `3/6`或`6/12` 。

Spacing works very similarly, just the property, side (shorthand without the dash), then the value. So `padding-bottom: 2rem;` becomes `pb-8`, again ranging from 0 to 64 and the side being eiter `t`,`b`, `l`, `r`, `x` for right and left, or `y` for top and bottom.

间距的工作原理非常相似，只是属性，边(不带破折号的简写)然后是值。 所以`padding-bottom: 2rem;` 变为`pb-8` ，范围也从0到64，并且侧面分别为`t` ， `b` ， `l` ， `r` ， `x`和`y`代表右和左或`y` 。

## 布局 **(**Layout**)** ##

Tailwind offers us many of the comforts of standard CSS positioning, like floats, position, and even [Flexbox][]. Using them is almost exactly as you would expect, except that with Flexbox you just need to initialize it with `flex` first.

Tailwind为我们提供了许多标准CSS定位的舒适性，例如float，position甚至[Flexbox][] 。 使用它们几乎与您期望的完全一样，只是使用Flexbox只需先使用`flex`对其进行初始化。

Similar to size, the naming pattern is just `property-value`, so a right float becomes `float-right` and `justify-content: center;` becomes `justify-center`.

与size相似，命名模式只是`property-value` ，因此右浮点数将变为`float-right`而`justify-content: center;`则将其变为`justify-content: center;` 成为`justify-center` 。

<nav class="flex justify-between items-center px-16 bg-purple-800 text-white h-24">
      <h1>Title</h1>
      <ul class="flex justify-between w-56">
        <a href="#">
          <li>Link</li>
        </a>
        <a href="#">
          <li>Link</li>
        </a>
        <a href="#">
          <li>Link</li>
        </a>
      </ul>
    </nav>

## 版式 **(**Typography**)** ##

Besides the standard things we can already do in CSS, Tailwind offers some shortcuts for what would otherwise be very tedious, like adding contingency for our font-family, which we can take care of with just `font-sans`, `font-serif`, or `font-mono` and have a group of fonts taken care of.

除了我们已经可以在CSS中完成的标准操作之外，Tailwind还提供了一些其他的捷径，以免原本很繁琐，例如为我们的字体家族添加了偶然性，我们可以使用`font-sans` ， `font-serif`或`font-mono`并照顾了一组字体。

Instead of the 0-64 units we’ve been using, `font-size` (shortened to `text`) takes `xs`,`sm`,`base`,`lx`, and `xl` through `6xl`.

代替我们一直使用的0-64个单位， `font-size` (缩写为`text` )采用`xs` ， `sm` ， `base` ， `lx`和`xl`到`6xl` 。

Besides those exceptions, most of the text options is CSS are available with the same naming patterns as before.

除了这些例外，大多数文本选项是CSS，它们具有与以前相同的命名模式。

<p class="text-md font-mono font-bold text-white">Hello World</p>
    <p class="text-lg font-sans line-through text-white">Hello World</p>
    <p class="text-4xl font-serif text-center text-white">Hello World</p>
    <p class="text-6xl font-mono text-right italic font-extrabold text-white">Hello World</p>

## React性 **(**Responsiveness**)** ##

This is where Tailwind really shines, in cutting down on the need for media queries. With these prefixes, we can limit a class to only work above a specific width, with the un-prefixed version, like what we’ve been working with so far, working for everything outside of our range.

这是Tailwind真正发亮的地方，它减少了对媒体查询的需求。 使用这些前缀，我们可以将类限制为仅在特定宽度以上才能使用，并且使用无前缀版本，例如到目前为止我们正在使用的版本，可以处理范围之外的所有内容。

*  `sm` 640px
    
    `sm` 640px
 *  `md` 768px
    
    `md` 768px
 *  `lg` 1024px
    
    `lg` 1024px
 *  `xl` 1280px
    
    `xl` 1280像素

## 结论 **(**Conclusion**)** ##

Hopefully this was an helpful introduction to this powerful little library. The learning curve for Tailwind is so small and its syntax so consistent that with very little experience you can start creating wonderful designs before even needing to look at the CSS.

希望这对这个功能强大的小图书馆有帮助。 Tailwind的学习曲线是如此之小，其语法也是如此一致，以至于很少的经验，您甚至可以不用看CSS就可以开始创建出色的设计。

> 翻译自: [https://www.digitalocean.com/community/tutorials/css-tailwind-css][https_www.digitalocean.com_community_tutorials_css-tailwind-css]

tailwind css

[official docs]: https://tailwindcss.com/
[Yarn]: https://www.digitalocean.com/community/tutorials/js-yarn-package-manager-quick-intro
[IntelliSense]: https://code.visualstudio.com/docs/editor/intellisense
[Flexbox]: https://www.digitalocean.com/community/tutorials/css-flexbox-primer
[https_www.digitalocean.com_community_tutorials_css-tailwind-css]: https://www.digitalocean.com/community/tutorials/css-tailwind-css