Tailwind CSS 席卷了 Web 开发世界？️，但对其本质的误解仍然存在。在最近的一次设计系统规划讨论中，当一位同事随意将 Tailwind CSS 与 Bootstrap 和 Materialise 进行比较时，我差点没喝茶☕（对不起，我不喝咖啡）。这个令人震惊的发现就像发现我的猫认为自己是狗一样！ ??

那么，拿起你的爆米花吗？当我澄清事实并揭开 Tailwind CSS 的真实身份时！

小介绍

在本文中，我们将深入了解 Tailwind CSS 的真正含义，探索其独特的样式方法以及它与传统 CSS 框架的区别。最后，您将了解为什么将 Tailwind CSS 与 Bootstrap 或其他基于组件的框架进行比较就像将苹果与橙子进行比较？？

Tailwind CSS 不是什么 ❌

在我们探索 Tailwind 的真实本质之前，让我们先澄清一些误解：

• 不是组件库：与 Bootstrap 或 Materialize 不同，Tailwind CSS 不提供开箱即用的预构建组件？
• 非设计导向：它不会对您的项目强加特定的视觉风格？
• 不仅仅是另一个 CSS 框架：虽然它在技术上是一个 CSS 框架，但其实用性优先的方法使其有别于传统框架？

以下是一些常见的误解：

• ？ “Tailwind CSS 就像内联样式”：不，不是。与内联样式不同，Tailwind 允许您使用高级功能，例如 伪类、媒体查询和动画 。它提供了一种实用程序优先的方法，与内联样式相比，可以减少 CSS 类的数量
• ？ “您不需要了解 CSS 即可使用 Tailwind”：这是 false。对 CSS 的深入理解对于有效使用 Tailwind CSS4 至关重要。虽然它简化了样式的许多方面，但了解 CSS 基础知识有助于理解实用程序类如何工作以及如何在需要时自定义它们
• ？ “Tailwind CSS 无法自定义”：这与事实相差甚远。事实上，它被设计为高度可扩展和可定制

现在我们已经消除了一些误解，接下来让我们探讨一下 Tailwind CSS 的真正独特之处以及它为何彻底改变开发人员处理 Web 样式的方式。

实用优先的 CSS 框架

Tailwind CSS 的核心是一个实用性优先 CSS 框架。这意味着它提供了一组低级实用程序类，您可以使用它们直接在 HTML 中构建自定义设计。您无需为每个元素编写自定义 CSS，而是应用处理特定样式属性的预定义类。就像拥有一把瑞士军刀？为你的CSS！

例如，不要写：

.button {
  padding: 0.5rem 1rem;
  background-color: blue;
  color: white;
  border-radius: 0.25rem;
}

您将在 HTML 中使用 Tailwind 类：

Click me

变相的设计系统

虽然 Tailwind 不提供预构建组件，但它提供了全面的设计系统。它带有一组精心设计的默认值颜色、间距、排版等等。这些默认设置是可自定义的，允许您根据项目的特定设计需求定制 Tailwind。

看看这个自定义配置：

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#4da6ff',
          DEFAULT: '#0066cc',
          dark: '#004080',
        },
        secondary: {
          light: '#ffb366',
          DEFAULT: '#ff8000',
          dark: '#cc6600',
        },
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
      },
      fontSize: {
        'xs': '.75rem',
        'sm': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
      borderRadius: {
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'full': '9999px',
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
      textColor: ['visited'],
    },
  },
}

为什么 Tailwind CSS 脱颖而出

灵活性和定制化

与 Bootstrap 或 Materialise 提供一组固执己见的组件不同，Tailwind 为您提供构建块来创建您自己的独特设计。这种灵活性允许更多的创作自由，并有助于避免许多网站陷入的“引导程序外观”。

性能优势

其实用程序优先的方法可以减少 CSS 文件大小，特别是与内置的清除功能结合使用时。此功能删除了生产中未使用的样式，从而产生更精简、性能更高的样式表。您的网站会感觉就像打了类固醇一样！ ？

开发者体验增强器

它通过以下方式显着改善了开发者体验：

• 减少上下文切换：您可以在不离开 HTML 的情况下设置元素的样式。不再需要处理多个文件！ ?‍♂️
• 促进一致性：预定义的类鼓励在整个项目中保持一致的间距、颜色和其他设计元素。您的设计将像一支调音良好的管弦乐队一样和谐？
• 加速开发：通过触手可及的实用程序类，您可以快速制作原型并迭代设计。你会感觉自己拥有超能力！⚡ 通过 Tailwindcss Intellisense vscode 扩展，你可以获得 自动完成和 linting 的类以及添加的自定义类

那是一个包裹？

Tailwind CSS 不仅仅是另一个 CSS 框架。通过提供一组低级实用程序类，它使开发人员能够创建独特、高效且可维护的设计，而不受传统 CSS 框架的限制。

因此，下次有人将 Tailwind 与 Bootstrap 进行比较时，您将有能力解释为什么这种比较没有达到目标，以及为什么 Tailwind 可能正是您的项目所需的游戏规则改变者。快乐编码！ ??‍？