tailwind css_Tailwind CSS简介
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.
此处介绍的所有选项都可以在官方文档中更详细地探讨。
安装 (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：
Tailwind CSS
色彩 (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:
这是一个简单的例子：
Hello World
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, veniam.
大小和间距 (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中进行检查 )和一些关键字，例如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 。
I'm a box
布局 (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 。
版式 (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，它们具有与以前相同的命名模式。
Hello World
Hello World
Hello World
Hello World
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真正发亮的地方，它减少了对媒体查询的需求。 使用这些前缀，我们可以将类限制为仅在特定宽度以上才能使用，并且使用无前缀版本，例如到目前为止我们正在使用的版本，可以处理范围之外的所有内容。
sm640pxsm640pxmd768pxmd768pxlg1024pxlg1024pxxl1280pxxl1280像素
结论 (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
tailwind css