Tailwind CSS 主页
返回

Tailwind CSS v2.0

日期

大约 18 个月前，我们发布了 Tailwind CSS v1.0，这标志着我们对稳定性的承诺，同时在每个次要版本中继续推出激动人心的新功能。

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

今天，我们终于发布了 Tailwind CSS v2.0。

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

…以及 其他一些小改进。

尽管 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 个值。

New Tailwind CSS color palette

我们为每种颜色添加了一个额外的浅色 50 色调，因此它们现在从 50 到 900。

<div class="bg-gray-50">I can't believe it's not white.</div>

调色板现在甚至包含 5 种不同的灰色色调，因此您可以选择“蓝色灰色”如果您想要一些真正酷的东西，或者一直到“暖灰色”来获得更多棕色。

New Tailwind CSS alternate gray

我们为您配置了一个开箱即用的平衡的 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,
    },
  },
}

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

暗黑模式

自从 iOS 添加了原生暗黑模式以来，你们这些暗黑模式爱好者就一直缠着我，让我把它添加到 Tailwind 中。好吧，你们做到了，它来了，你们赢了。

打开您的 tailwind.config.js 文件，将 darkMode 切换到 media

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

砰——现在只需在类名前面添加 dark:，例如 bg-black，它只会在启用暗黑模式时生效。

<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>

也适用于悬停等。

<button
  class="bg-gray-900 hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-50"
>
  <!-- ... -->
</button>

以及响应式内容。

<div class="... lg:bg-white lg:dark:bg-black">
  <!-- ... -->
</div>

以及响应式悬停内容。

<button class="... lg:dark:bg-white lg:dark:hover:bg-gray-50">
  <!-- ... -->
</button>

查看 暗黑模式文档，了解所有详细信息。

超宽 2XL 断点

我敢肯定他们现在生产了一款 1280 像素宽的 iPhone，所以是时候升级了。

我们添加了一个新的 2xl 断点，它可以让你在 1536 像素及以上时定位元素。

<h1 class="... 2xl:text-9xl">Godzilla</h1>

我知道这很令人兴奋，但让我们严肃点，你已经可以自己添加它了，已经三年了。现在它得到了祝福，我明白了。

新的轮廓环实用程序

您知道 `outline` 属性如何忽略边框半径并且几乎总是看起来很糟糕吗？`ring` 实用程序是我们试图通过血汗和眼泪来实现更好的解决方案。

它们的工作方式与 `border` 实用程序非常相似，只是它们添加了一个实心的盒阴影而不是边框，因此它们不会影响布局

<button
  class="... focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
>
  <!-- ... -->
</button>

您甚至可以使用 `ring-offset-{width}` 实用程序将它们偏移以创建一种光晕效果

<button
  class="... focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-300 focus:ring-opacity-50"
>
  <!-- ... -->
</button>

使用一堆 CSS 自定义属性魔法，我们甚至让它们自动与常规盒阴影组合在一起

<button class="shadow-sm focus:ring-2 ...">
  <!-- Both the shadow and ring will render together -->
</button>

有关这些新 API 的最佳起点是 环宽文档。它们真的非常酷，比你想象的更有用。

实用友好的表单样式

我一直感到惊讶的是，很少有人抱怨 Tailwind 中开箱即用的表单元素是多么地毫无用处。它们看起来真的很糟糕，而且你无法做任何事情来改变它，除非你编写包含奇怪的背景图像 SVG 技巧的自定义 CSS，并担心需要你从未听说过的 CSS 属性的模糊边缘情况，例如 `color-adjust`。

我尝试过使用 @tailwindcss/custom-forms 插件来解决这个问题，但添加一堆像 `form-input` 和 `form-checkbox` 这样的类感觉不太对，所以我们没有真正推广它，甚至没有从 Tailwind 文档中链接到它。不过，这一次我认为我们找到了解决方法。

与 Tailwind CSS v2.0 同时发布的是一个全新的官方插件，名为 @tailwindcss/forms，它可以跨浏览器规范化和重置所有基本表单控件，使其状态非常容易使用纯实用程序类进行样式化。

<!-- 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"
/>

它没有默认包含在内，但您可以在 tailwind.config.js 文件中添加一行代码来添加它。

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

查看 @tailwindcss/forms 文档 以了解更多信息。

每个字体大小的默认行高

Tailwind 中的每个字体大小实用程序现在都配有一个合理的默认行高。

// Tailwind's default theme
module.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）会自动添加。

<p class="text-xl">This will have a line-height of 1.75rem automatically.</p>

如果您想覆盖它，您仍然可以通过叠加 leading 实用程序来做到这一点。

<p class="text-3xl leading-normal">Come on don't do this to me.</p>

查看 字体大小文档 以获取更多详细信息。

扩展的间距、排版和不透明度比例

我们已经扩展了默认的间距比例，以包括许多微值，例如 0.5、1.5、2.5 和 3.5。

<span class="ml-0.5">Just a little nudge.</span>

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

<div class="p-96">This is too much padding.</div>

我们还扩展了inset（对于你们这些老古董来说就是 top/right/bottom/left）和translate插件，以包含完整的间距比例，所以现在你可以做这样的事情

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

我们扩展了默认的排版比例，增加了新的7xl、8xl和9xl值

<h1 class="text-9xl font-bold">What is this, an Apple website?</h1>

我们还扩展了默认的不透明度比例，增加了 10 的步长，以及 5 和 95 的值

<figure class="opacity-5">
  <blockquote>You can't see me.</blockquote>
  <figcaption>John Cena</figcaption>
</figure>

浏览整个默认配置文件，以查看所有可用的选项。

使用 @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属性，如果你想在不将文本限制在一行的情况下向溢出文本添加省略号，可以使用这些实用程序。

<p class="overflow-ellipsis overflow-hidden">
  Look ma no whitespace-nowrap ipsum...
</p>

查看新的文本溢出文档以查看其在实际中的应用。

扩展变体

你知道什么很糟糕吗？想要为 `backgroundColor` 启用 `focus-visible`，但必须列出 *每个默认变体* 才能添加一个额外的变体。

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

你知道什么更好吗？只需添加你想要启用的那个变体。

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

出发吧.

默认情况下启用组悬停和焦点内

我们在开发 Tailwind UI 时学到的一件事是，`group-hover` 和 `focus-within` 不是锦上添花，而是必不可少。

以前默认情况下启用悬停或焦点的任何地方现在也默认启用了 `group-hover` 和 `focus-within`。

<div class="group ...">
  <span class="group-hover:text-blue-600 ...">Da ba dee da ba daa</span>
</div>

查看 默认变体参考，了解 v2.0 中在哪些地方启用了哪些内容的完整列表。

默认过渡持续时间和缓动曲线

到目前为止，在 Tailwind 中添加过渡时，通常需要添加三个类。

<button class="... transition duration-150 ease-in-out">Count them</button>

在 v2.0 中，我们已经可以指定一个默认持续时间和时间函数，该函数在添加任何 `transitionProperty` 实用程序时会自动使用。

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

因此，如果您有一个经常使用的通用持续时间和时间函数，现在您只需要编写一个类。

<button class="... transition">Count them again</button>

当然，您可以通过叠加单独的持续时间或计时函数实用程序来覆盖它。

<button class="... transition duration-300 ease-out">We're back baby</button>

了解更多关于过渡的信息，请访问 过渡属性文档。

与 IE11 不兼容

我们决定不再关注 IE11，这让我们能够充分利用 CSS 自定义属性来实现 各种疯狂的东西，这也是使像新的 ring 实用程序成为可能的原因。

放弃 IE11 支持意味着即使使用 PurgeCSS，构建也会更小，因为我们不必发布任何 CSS 变量回退，这比你想象的要多。

感谢 Bootstrap 敢于 率先这样做——我认为如果没有他们决定带头，我们不会如此大胆。

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

所以，这就是 Tailwind CSS v2.0 的简要介绍！

还在等什么？去构建一些很棒的东西吧。