版本说明

Tailwind CSS 最新版本包含的新功能。

Tailwind CSS v1.1

Aug 6, 2019

The first new feature release since v1.0 has arrived! Tailwind v1.1 includes a bunch of new stuff, but I think the things you'll probably be most excited about are:

For the full list of changes, check out the complete release notes on GitHub.

Important note — although this is a minor release, it includes two bug fixes that may have a superficial impact on how your site looks if you are using horizontal rules in your site or are relying on the default placeholder color defined in Tailwind's base styles.

Be sure to read through the fixes section before upgrading to understand the impact.


Tailwind CSS v1.0

May 13, 2019

经过一年半的开发,Tailwind CSS 的第一个稳定版本终于发布了! 🎉

从我们 2017 年 11 月 1 日发布第一个 alpha 版本以来,该框架已经发布了 43 个版本,合并了来自 88 个贡献者2,281 commits ,被安装了超过 140 万次

Tailwind CSS 被 AlgoliaMozilla 等大公司采用,也被 RightMessagePingPing 等初创公司采用。

前面的路还很漫长,但是我非常兴奋,我们终于有了一个真正的稳定版本,为未来的发展奠定了坚实的基础。

这个版本主要专注于巩固现有的 API 并锁定任何不兼容的更改,但也包括一些令人兴奋的修改。

有关完整的修改列表和升级说明,请阅读升级指南 章节。

修改了配置文件格式

在 v1.0 版本中,配置文件是完全可选的,如果你给出了配置文件,则只需添加定制化的部分,而不需要包含所有配置。

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

这使得很容易区分哪些配置是定制的部分,哪些是 Tailwind 内置的默认值,并且可以使配置文件更加简单和易于管理。

有关新配置文件格式的更多信息,请参阅文档中的 配置 章节。

重新设计了调色板

Tailwind v1.0 包含了一个全新的调色板,现在每种颜色都从 7 种色调升级到了 9 种。

Teal

100
#E6FFFA
200
#B2F5EA
300
#81E6D9
400
#4FD1C5
500
#38B2AC
600
#319795
700
#2C7A7B
800
#285E61
900
#234E52

请参阅文档中的 定制颜色 章节了解关于调色板的更多信息。

更新了断点值(breakpoints)

我们更新了 v1.0 的默认断点值,以便更好地反映现代设备的分辨率。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    }
  }
}

新的断点更实用,并且可以更容易地避免在响应式设计中出现令人讨厌的妥协。

如果你刚接触 Tailwind 的响应式设计,请参阅 响应式设计 章节以了解更多信息。

新的 top/right/bottom/left 工具类

Tailwind v1.0 为 toprightbottomleft 属性提供了新的可配置工具类,因此不再受旧有的 pin 类的限制。

<div class="top-16"><!-- ... --></div>

请参阅文档中的 top/right/bottom/left 章节以了解更多信息。

新的 order 工具类

Tailwind v1.0 还为 order 属性提供了新的工具类,因此你可以很容易地在 flex 容器中调整元素的顺序。

<div class="flex">
  <div class="order-last">1</div>
  <div>2</div>
  <div>3</div>
</div>

请参阅文档中的 order 章节以了解更多信息。