如何在 tailwindconfig.js 中添加图像 URL

在 TailwindCSS 中，可以通过在配置文件 tailwind.config.js 中添加自定义选项来定制样式。这个文件默认是空的，你需要按照文档中的说明自定义你的选项。本文将介绍如何在此文件中添加图像 URL，以便在样式中使用。

步骤

1. 首先，在配置文件中添加一个 theme 选项。这个选项是一个对象，它包含了自定义的样式属性。在这个对象中，添加一个新属性，命名为 extend，并将其值设为一个对象。

   module.exports = {
     theme: {
       extend: {},
     },
   };
   

2. 在 extend 对象中，添加一个名为 backgroundImage 的属性，并将其值设为一个函数。这个函数接受一个 theme 参数，它是 tailwind 中的一个内置对象，包含了很多默认的样式属性。

   module.exports = {
     theme: {
       extend: {
         backgroundImage: theme => {},
       },
     },
   };
   

3. 在函数体中，返回一个对象，包含了你的图像 URL。对象的键名是你为这个图像 URL 指定的名称，键值是图像 URL。在本例中，我们将这个名称命名为 hero-pattern，并将图像 URL 设为 url('/img/hero-pattern.svg')。

   module.exports = {
     theme: {
       extend: {
         backgroundImage: theme => ({
           'hero-pattern': "url('/img/hero-pattern.svg')",
         }),
       },
     },
   };
   

4. 在样式表中使用这个背景图像。在本例中，我们将应用这个背景图像到一个 hero 类名下。使用 bg-hero-pattern 类名来添加这个背景图像。

   <div class="hero bg-hero-pattern">
     ...
   </div>
   

完整的配置文件代码如下，你可以将其复制并粘贴到你的 tailwind.config.js 文件中：

module.exports = {
  theme: {
    extend: {
      backgroundImage: theme => ({
        'hero-pattern': "url('/img/hero-pattern.svg')",
      }),
    },
  },
};

当然，在使用背景图像时，你需要确保图像文件已经放置到相应的路径下。在本例中，我们使用的是 /img/hero-pattern.svg 这个路径，你需要根据你自己的路径来修改这个值。

祝你使用 tailwind css 愉快！