Getting set up

Requirements

All of the components in Tailwind UI are designed for Tailwind CSS >= v2.0. To make sure that you are on the latest version of Tailwind, update via npm:

tailwind ui中所有的组件被设计tailwind css >=v2.0。确保你使用最新版本的tailwind,通过npm更新：

npm install tailwindcss@latest

If you are previously coming from Tailwind UI for Tailwind CSS v1, check out our guide for getting updated to Tailwind CSS v2.0.

如果你之前来自tailwind ui 为tailwind css v1 ，查看我们的指南设置更新到tailwind css v2.0。

All of the examples in Tailwind UI rely on the default Tailwind CSS v2.0 configuration, but some rely on additional first-party plugins like @tailwindcss/forms, @tailwindcss/typography, and @tailwindcss/aspect-ratio.

在tailwind ui中所有的示例默认依赖配置tailwind css v2.0，但一些依赖于额外的第一插件 @tailwindcss/forms, @tailwindcss/typography, 和 @tailwindcss/aspect-ratio.

When an example requires any plugins or configuration changes, it will be noted in a comment at the top of the example.

当一个案例需要一些插件或者配置变化，它将在示例顶部的注释中注明。

If you’re new to Tailwind CSS, you’ll want to read the Tailwind CSS documentation as well to get the most out of Tailwind UI.

如果你是tailwind css的新手，你想要阅读tailwind css 文档已充分利用tailwind ui。

Optional: Add the Inter font family

We’ve used Inter font family for all of the Tailwind UI examples because it’s a beautiful font for UI design and is completely open-source and free. Using a custom font is nice because it allows us to make the components look the same on all browsers and operating systems.

我们使用 Inter 字体为所有的tailwind ui 示例 因为它是一个漂亮的字体为ui设计并且完全开源和自由。使用自定义字体很好因为它允许我们使组件在所有浏览器和操作系统看起来一样。

You can use any font you want in your own project of course, but if you’d like to use Inter, the easiest way is to first add it via the CDN:

在你的项目资源中你可以使用你想要的任意字体，但是如果你喜欢使用 Inter, 最简单的方式是通过cdn添加它：

Then add “Inter var” to your “sans” font family in your Tailwind config:

然后在tailwind配置中添加 “Inter var “到你的 “sans”字体

// tailwind.config.js
const defaultTheme = require(‘tailwindcss/defaultTheme’)

module.exports = {
theme: {
extend: {
fontFamily: {
sans: [‘Inter var’, …defaultTheme.fontFamily.sans],
},
},
},
// …
}

传统方式

.father{
  position: relative;
  padding-left: 40px;
}
.first-son{
  position:absolute;
  left: 0px;
  top: 0px;
}
.second-son{

}

flex设置如下效果

父级css属性

.father{
  display: flex;
}

父级css属性

.first-son{<br> flex-shrink: 0;<br> }

简易版的原理

取出data下的一条box数据。判断四个li容器谁最短，把刚取出的数据放进去，以此类推。

<div class="content">
  <ul>
    <li><li>
    <li><li>
    <li><li>
    <li><li>
  </ul>
</div>
<div class="data hide">
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x300/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x400/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x500/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x600/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
</div>

在线查看