尾风CSS v2.0

几乎恰好在18个月前，我们发布了Tailwind CSS v1.0，这标志着对稳定性的承诺，同时在每个次要版本中继续通过令人兴奋的新功能来突破界限。

在过去的18个月中，我们发布了9个次要版本，其中添加了一些功能，例如占位符样式，屏幕阅读器可见性，CSS网格，过渡，转换，动画，布局实用程序，集成的树状摇动，渐变等等。

全新的调色板，共有220种颜色，并提供了用于构建自己的配色方案的新工作流程

暗模式支持，使启用暗模式时动态更改设计比以往更加容易

新的轮廓环实用程序，几乎就像使轮廓半径成为现实一样好

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

Default line-heights per font-size, because if we can't make using a 1.5 line-height with a 48px font illegal we should at least make it not the default

Extended spacing, typography, and opacity scales, for fine-tuning things at the micro level, making an even bigger impact with huge headlines, and for when opacity-25 wasn't enough and opacity-50 was too much

新的文本溢出实用程序，与仅使用截断功能相比，可以更精确地控制事物

扩展变体，因此您可以启用额外的变体，例如焦点可见，而无需重新声明整个列表或考虑顺序

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

Incompatibility with IE11, so you can tell the man upstairs "sorry boss it's out of my hands, blame Tailwind"

Even though Tailwind CSS v2.0 is a new major version, we've worked really hard to minimize significant breaking changes, especially ones that would force you to edit tons of your templates. We've renamed two classes, removed three that are no longer relevant in modern browsers, and replaced two with more powerful alternatives. Any other breaking changes that might impact you can be remedied with a couple small additions to your tailwind.config.js file. Upgrading shouldn't take more than about 30 minutes.

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

If you'd like to start a brand new project with v2.0, head over to our updated installation documentation to get started fast.

We've learned a lot about color since the first time we tried to design a general purpose color palette back in the Tailwind CSS v0.1.0 days, and v2.0 represents our best attempt so far.

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

We've added an extra light 50 shade for every color, so they go from 50–900 now:

The palette even includes 5 different shades of gray now, so you can choose "blue gray" if you want something really cool, or go all the way to "warm gray" for something with a lot more brown in it.

我们为您开箱即用地配置了一个平衡良好的8色调色板，但是完整的调色板存在于一个新的tailwindcss / colors模块中，您可以将其导入配置文件的顶部以策划自己喜欢的自定义调色板：

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

Ever since iOS added native dark mode all you dark mode nerds haven't been able to leave me alone about adding it to Tailwind. Well you did it, it's here, you win.

Boom — now just add dark: to the beginning of a class like bg-black and it'll only take effect when dark mode is enabled:

<div class = "bg-white dark:bg-black " > <h1 class = "text-gray-900 dark:text-white " >Dark mode </h1 > <p class = "text-gray-500 dark:text-gray-300 " > The feature you've all been waiting for. </p > </div >

I'm pretty sure they make an iPhone that is 1280px wide now, so it's time to step it up.

We've added a new 2xl breakpoint out-of-the-box that lets you target things at 1536px and above:

Exciting I know but also let's be serious you've been able to add this yourself for like three years. Now it's blessed though, I get it.

您知道outline属性如何忽略边界半径，并且几乎总是看起来很差吗？环形公用事业是我们试图通过血液，汗水和眼泪更好地解决存在问题的尝试。

They work a lot like the border utilities, except they add a solid box-shadow rather than a border so they don't impact the layout:

您甚至可以使用ring-offset- {width}实用程序对它们进行偏移以创建某种光环效果：

Using a bunch of CSS custom property voodoo we've even made them automatically combine with regular box-shadows, too:

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

One thing I am constantly surprised by is how few people complain about how unbelievably useless form elements are out of the box with Tailwind. They literally look awful and you can't do anything about it without writing custom CSS full of weird background-image SVG tricks and worrying about obscure edge cases that require CSS properties you've never heard of before like color-adjust.

I tried to solve this a while back with the @tailwindcss/custom-forms plugin, but something about adding a bunch of classes like form-input and form-checkbox just didn't feel quite right so we didn't really promote it and didn't even link to it from the Tailwind documentation. This time though I think we figured it out.

Alongside Tailwind CSS v2.0, we're releasing a brand new official plugin called @tailwindcss/forms that normalizes and resets all of the basic form controls across browsers to a state that is super easy to style with pure utility classes:

<!-- This will be a nice rounded checkbox with an indigo focus ring and an indigo checked state --> <input type = "checkbox " class = "h-4 w-4 rounded border-gray-300 focus:border-indigo-300 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50 text-indigo-500 " />

It's not included out of the box but you can add it to your tailwind.config.js file with a single line:

// 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）：

如果您想覆盖它，仍然可以通过在领先的实用程序上分层来实现：

We've extended the default spacing scale to include a bunch of micro values like 0.5, 1.5, 2.5, and 3.5:

...以及一些高端的新值，例如72、80和96：

We've also extended the inset (that's top/right/bottom/left for you dinosaurs) and translate plugins to include the full spacing scale, so now you can do things like this:

And we've also extended the default opacity scale with steps of 10, as well as 5 and 95 values:

By far the most common question I've gotten over the years is "why doesn't @apply hover:bg-black work?"

这花费了一些认真的工程知识，但我们已经弄清楚了–现在您可以@apply应用任何内容：

直到v2.0，如果您想控制溢出的文本，我们真正给您的就是相当笨拙的truncate实用程序。

Now we've added dedicated overflow-ellipsis and overflow-clip utilities to control just the text-overflow property, in case you wanted to add ellipsis to overflowing text without restricting that text to one line.

你知道什么很烂吗？想要为backgroundColor启用焦点可见的功能，但必须列出每个默认的变体，只是添加一个额外的变体：

One of the things we learned working on Tailwind UI is that group-hover and focus-within aren't nice-to-haves, they're must-haves.

现在，我们以前默认情况下启用悬停或焦点的任何位置现在也默认启用了组悬停和焦点内：

Check out the default variants reference for a full list of what's enabled where in v2.0.

到目前为止，任何时候您想要在Tailwind中添加过渡时，通常都需要添加三个类：

In v2.0, we've made it possible to specify a default duration and timing function that is used automatically any time any transitionProperty utility is added:

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

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

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

We've decided to unburden ourselves with caring about IE11 at all, which has allowed us to fully embrace CSS custom properties for all sorts of crazy stuff and is what makes things like the new ring utilities even possible.

Dropping IE11 support means smaller builds even when using PurgeCSS, because we don't have to ship any CSS variable fallbacks which adds up more than you'd expect.

Cheers to Bootstrap for having the cojones to do this first — I don't think we would have been so bold if they hadn't decided to pave the way.

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

So there you have it folks, that's Tailwind CSS v2.0 in a (pretty big) nutshell!