Tailwind CSS v2.0是有史以来的第一个主要更新，其中包括：

全新的调色板，具有220种总颜色以及用于构建自己的配色方案的新工作流程

支持暗模式，启用暗模式后，动态更改设计比以往更加轻松

2XL超宽断点，用于1536px及以上的设计

新的大纲环实用程序，几乎就像使

outline-radius

真品一样好

实用程序友好的表单样式，一种新的表单重置，使仅使用实用程序类即可轻松自定义表单元素（甚至复选框）

每个font-size的默认行高，因为如果我们不能使用48px字体的1.5行高是非法的，则至少应使其不成为默认值

扩展的间距，版式和不透明度比例，可以在微观层次上微调事物，以巨大的标题带来更大的影响，以及何时

opacity-25

还不够且

opacity-50

太多的情况

将@apply与任何内容一起使用，包括响应式，悬停式，焦点式和其他变体

新的文本溢出实用程序，与

truncate

单独使用相比，可以更精确地控制事物

扩展变体，因此您可以启用其他变体，例如

focus-visible

无需重新声明整个列表或考虑顺序

默认情况下，将组悬停和集中在内，因为无论如何您都在每个项目上都启用了它们

默认过渡持续时间和缓和曲线，因此您只需添加17个类即可制作一个按钮，而不是19个

与IE11不兼容，因此您可以告诉楼上的那个人“抱歉老板，这是我的手，怪Tailwind”

...还有其他一些小事情。

即使Tailwind CSS v2.0是一个新的主要版本，我们仍然尽了最大的努力来最大程度地减少重大更改，尤其是那些会迫使您编辑大量模板的更改。我们已重命名了两个类，删除了在现代浏览器中不再相关的三个类，并用功能更强大的替代类替换了两个。任何其他可能影响您的重大更改都可以通过在

tailwind.config.js

文件中添加一些小的补充来解决。升级时间不应超过30分钟。

请查看升级指南，以获取更多详细信息以及有关将项目迁移到Tailwind CSS v2.0的分步说明。

如果您想使用v2.0启动一个全新的项目，请访问我们更新的安装文档以快速入门。

那全新的网站又如何呢？该死的

全新的调色板
自从我们第一次尝试在Tailwind CSS v0.1.0天内设计通用调色板以来，我们就已经学到了很多关于颜色的知识，而v2.0代表了迄今为止的最佳尝试。

新的调色板包括22种颜色（以前是10种），每种都有10种阴影（而不是9种），总共有220个值。

我们

50

为每种颜色添加了一个额外的浅色阴影，因此它们现在从50-900：

调色板现在甚至包括5种不同的灰色阴影，因此，如果您想要一些非常酷的东西，则可以选择“蓝灰色”，或者对于其中包含更多棕色的东西，可以一直选择“暖灰色”。

我们为您开箱即用地配置了一个平衡良好的8色调色板，但是完整的调色板存在于一个新

tailwindcss/colors

模块中，您可以将其导入配置文件的顶部以策划自己的自定义调色板，但是您可以：

// tailwind.config.jsconst colors = require('tailwindcss/colors')module.exports = { theme: { colors: { gray: colors.trueGray, indigo: colors.indigo, red: colors.rose, yellow: colors.amber, }, },}

在新的自定义颜色文档中了解更多信息。

暗模式
自从iOS添加了本机黑暗模式以来，您所有的黑暗模式书呆子都无法让我独自将其添加到Tailwind中。好吧，你做到了，就在这里，你赢了。

打开tailwind.config.js文件并darkMode转到media：

// tailwind.config.jsmodule.exports = { darkMode: 'media', // ...}

繁荣-现在只需添加dark:到类的开头即可，bg-black并且只有在启用黑暗模式后才会生效：

也适用于悬停和东西：

和响应性的东西：

和响应式悬停的东西：

查看深色模式文档以获取所有详细信息。

超宽2XL断点
我很确定他们现在制造的iPhone宽为1280像素，是时候提高它了。

我们新增了一个2xl现成的断点，使您可以将目标定位在1536px及以上：

Godzilla

令人兴奋的是，我知道，但也请您严肃地说，您已经可以自己添加此功能了三年。现在，它很幸运，我明白了。

新的大纲环实用程序
您知道该outline属性如何忽略边界半径并且几乎总是看起来很差吗？该ring工具是我们尝试将通过血液，汗水和泪水一个更好的解决方案产生了。

它们的工作方式border实用程序非常相似，不同之处在于它们添加了实心的阴影而不是边框，因此不会影响布局：

您甚至可以使用ring-offset-实用程序抵消它们以创建某种光环效果：

使用一堆CSS自定义属性voodoo，我们甚至还使它们自动与常规的盒子阴影结合在一起：

该宽度文档环是学习这些新的API的最佳起点。事实证明，它们如此酷，比您想象的要有用。

实用的表单样式
我一直感到惊讶的一件事是，很少有人抱怨Tailwind开箱即用地提供了无用的表单元素。它们从字面上看起来很糟糕，如果不编写自定义CSS充满怪异的背景图像SVG技巧，以及担心需要像以前从未听说过的CSS属性那样模糊的边缘情况，您将无法做任何事情color-adjust。

我试图同时与回解决这个@ tailwindcss /自定义表单插件，而是加入一些像类的东西form-input而form-checkbox只是不觉得很正确，所以我们并没有真正推动它，甚至没有链接它来自Tailwind文档。这次虽然我认为我们已经解决了。

除了Tailwind CSS v2.0之外，我们还将发布一个全新的官方插@tailwindcss/forms，该插件将浏览器中的所有基本表单控件标准化并重置为使用纯实用程序类超级易于样式化的状态：

它不是开箱即用的，但是您可以tailwind.config.js用一行将其添加到文件中：

// tailwind.config.jsmodule.exports = { // ... plugins: [require('@tailwindcss/forms')],}

请查看@ tailwindcss / forms文档以获取更多信息。

每个字体大小的默认行高
现在，Tailwind中的每个字体大小实用程序都与合理的默认行高配对：

// Tailwind's default thememodule.exports = { theme: { // ... fontSize: { xs: ['0.75rem', { lineHeight: '1rem' }], sm: ['0.875rem', { lineHeight: '1.25rem' }], base: ['1rem', { lineHeight: '1.5rem' }], lg: ['1.125rem', { lineHeight: '1.75rem' }], xl: ['1.25rem', { lineHeight: '1.75rem' }], '2xl': ['1.5rem', { lineHeight: '2rem' }], '3xl': ['1.875rem', { lineHeight: '2.25rem' }], '4xl': ['2.25rem', { lineHeight: '2.5rem' }], '5xl': ['3rem', { lineHeight: '1' }], '6xl': ['3.75rem', { lineHeight: '1' }], '7xl': ['4.5rem', { lineHeight: '1' }], '8xl': ['6rem', { lineHeight: '1' }], '9xl': ['8rem', { lineHeight: '1' }], }, },}

因此，现在当您添加诸如之类的实用程序时，会自动添加text-xl相应的默认行高（1.75rem在这种情况下）：

This will have a line-height of 1.75rem automatically.

如果要覆盖它，仍然可以通过在leading实用程序上分层来实现：

Come on don't do this to me.

查看字体大小文档，以获取其他一些详细信息。

扩展的间距，版式和不透明度比例
我们已经延长了默认间距规模包括一堆微值的喜欢0.5，1.5，2.5，和3.5：

Just a little nudge.

......以及在顶端一堆新的价值观，以及像72，80以及96：

我们还扩展了inset（您的恐龙的顶部/右侧/底部/左侧）和translate插件以包括完整的间距比例，因此现在您可以执行以下操作：

我们已经延长了默认的排版规模与新的7xl，8xl和9xl值：

What is this, an Apple website?

而且，我们还将默认的不透明度比例扩展为10，以及5和95的值：

You can't see me.

仔细阅读整个默认配置文件，以查看可用的确切信息。

任何东西都使用@apply
到目前为止，我多年来最常见的问题是“为什么不起作用@apply hover:bg-black？”

这是一个公平的问题，这很愚蠢 不 没用。

这花费了一些认真的工程知识，但我们已经弄清楚了-现在您可以执行@apply任何操作：

.btn { @apply bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50;}

查看更新的@apply文档以了解更多信息。

新的文本溢出实用程序
在v2.0之前的版本中，如果您想控制溢出的文本，我们真正给您的就是比较笨拙truncate实用程序。

现在，我们添加了专用overflow-ellipsis和overflow-clip实用程序来仅控制该text-overflow属性，以防您想在溢出的文本中添加省略号而不将其限制为一行。

Look ma no whitespace-nowrap ipsum...

查看新的文本溢出文档以查看其实际效果。

扩展变体
你知道什么很烂吗？希望能focus-visible为backgroundColor但不必列出每一个默认变异只是增加一个额外的一个：

// tailwind.config.jsmodule.exports = { // ... variants: { backgroundColor: ['responsive', 'hover', 'focus', 'focus-visible'], },}

你知道哪个更好吗？只需添加您要启用的那个：

// tailwind.config.jsmodule.exports = { // ... variants: { extend: { backgroundColor: ['focus-visible'], }, },}

头晕目眩。

默认情况下，分组悬停和焦点对准
一个我们学到工作的事情顺风UI是group-hover和focus-within不是可有可无的富人，他们的必备。

任何地方，我们启用默认情况下悬停或焦点之前目前拥有group-hover并focus-within默认启用过：

查看默认变体参考，以获取v2.0中启用的功能的完整列表。

默认过渡持续时间和缓和曲线
到目前为止，任何时候您想要在Tailwind中添加过渡时，通常都需要添加三个类：

Count them

在v2.0中，我们可以指定默认的持续时间和计时功能，该功能会transitionProperty在添加任何实用程序时自动使用：

// tailwind.config.jsmodule.exports = { // ... theme: { // ... transitionDuration: { DEFAULT: '150ms', // ... }, transitionTimingFunction: { DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)', // ... }, },}

因此，如果您具有经常使用的通用持续时间和计时功能，那么现在只需编写一个类：

Count them again

当然，您可以通过在单独的持续时间或计时功能实用程序上分层来覆盖此功能：

We're back baby

在过渡属性文档中了解有关过渡的更多信息。

与IE11不兼容
我们已经决定完全不关心IE11，这使我们能够完全接受CSS定制属性来处理各种疯狂的事情，这使像新

ring

实用程序这样的事情成为可能。

不再支持IE11，即使使用PurgeCSS时，也意味着构建更小，因为我们不必交付任何CSS变量后备，其合计超出您的预期。

为Bootstrap欢呼，让他们先做这件事-如果他们没有决定铺路，我认为我们不会这么胆大。

好消息是，如果您需要支持IE11，则可以始终使用Tailwind CSS v1.9，它仍然是一个非常有用的框架。