Tailwind CSS 自定义 shadow 阴影的方法

Tailwind CSS 是一个高度可定制的工具类优先的实用 CSS 框架，可帮助开发人员高效地设计应用程序样式。在它的众多功能中，Box Shadow最引人注目，它可以增加元素的深度和重点，增强用户界面。然而，默认的阴影尺寸并不一定能满足您的设计要求。幸运的是，Tailwind CSS 允许您自定义这些属性，让您可以完全控制阴影的外观。让我们深入了解一下如何在 Tailwind CSS 中调整每种尺寸的阴影属性。

了解 Tailwind CSS 的默认阴影类

Tailwind CSS 提供了一系列开箱即用的阴影工具类，从用于微妙外观的shadow-sm到用于更明显效果的shadow-2xl。这些默认工具的设计涵盖了大多数使用情况，但定制是 Tailwind CSS 的核心理念，用户可以根据需要非常轻松的对它们进行调整。

步骤 1：生成 Tailwind CSS 配置文件

要自定义阴影大小，您需要修改tailwind.config.js文件。在该文件中，您可以通过自定义配置覆盖 Tailwind 提供的默认值。

如果尚未进行过自定义配置，请先在项目根目录下创建tailwind.config.js文件（如果已安装 Tailwind CSS 但没有该文件，可通过运行npx tailwindcss init 生成该文件）。

步骤 2：自定义阴影大小

在tailwind.config.js 中，您可以扩展默认主题或完全覆盖阴影工具类。要具体调整阴影属性，请关注主题下的扩展部分，以添加或覆盖现有阴影。

自定义特定阴影尺寸代码示例：

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
        'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05)',
        // Add your custom shadows here
        'custom-1': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05)',
      },
    },
  },
}

上述代码中，我们自定义了一个"custom-1 "阴影类，并使用 CSSbox-shadow属性语法定义其属性。

步骤 3：应用自定义阴影类

在tailwind.config.js文件中创建自定义阴影类后，就可以在 HTML 元素中应用该类了。例如：

<div class="shadow-custom-1 ...">
  <!-- www.02405.com -->

  Tailwind CSS 自定义 shadow 阴影的方法
</div>