TailwindCSS 2.2- 如何使用扩展和颜色组合

TailwindCSS 是一个十分流行的 CSS 框架，它的目标是为开发者提供快速、灵活和可定制的 CSS 样式。在 TailwindCSS 2.2 版本中，我们可以使用扩展和颜色组合来进一步定制我们的样式。

什么是扩展

扩展是一种在 TailwindCSS 中添加新样式的方法。我们可以使用扩展来添加新的颜色、字体、背景等等。在 TailwindCSS 2.2 版本中，我们可以使用 extend 属性来添加新的样式。

例如，我们可以添加一个新的字体，代码如下所示：

// www.javascriptcn.com code example
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: 'Open Sans', sans-serif;
  }
}

@layer utilities {
  .font-myfont {
    font-family: 'My Font', sans-serif;
  }
}

在上面的代码中，我们使用了 @layer 来指定样式的层级。@layer base 表示这个样式属于基础样式，@layer utilities 表示这个样式属于工具样式。我们可以在 @layer utilities 中定义一个 .font-myfont 样式，然后在 HTML 中使用 class="font-myfont" 来应用这个样式。

什么是颜色组合

颜色组合是一种在 TailwindCSS 中创建新颜色的方法。我们可以使用颜色组合来创建新的背景颜色、文本颜色、边框颜色等等。在 TailwindCSS 2.2 版本中，我们可以使用 color() 函数来创建颜色组合。

例如，我们可以创建一个新的背景颜色，代码如下所示：

// www.javascriptcn.com code example
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-primary {
    background-color: color(primary 500);
  }
}

在上面的代码中，我们使用 color() 函数来创建一个新的背景颜色。primary 500 表示使用 TailwindCSS 中的 primary 颜色，并且使用 500 作为亮度值。然后我们在 HTML 中使用 class="bg-primary" 来应用这个样式。

示例代码

下面是一个完整的示例代码，展示如何使用扩展和颜色组合来创建新的样式：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TailwindCSS Example</title>
  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.2.0/dist/tailwind.min.css">
  <style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer base {
      body {
        font-family: 'Open Sans', sans-serif;
      }
    }

    @layer utilities {
      .font-myfont {
        font-family: 'My Font', sans-serif;
      }

      .bg-primary {
        background-color: color(primary 500);
      }

      .text-primary {
        color: color(primary 500);
      }

      .border-primary {
        border-color: color(primary 500);
      }
    }
  </style>
</head>
<body>
  <div class="bg-primary p-4">
    <h1 class="text-white font-myfont">Hello World</h1>
  </div>
  <div class="border-primary p-4 mt-4">
    <p class="text-primary">This is a test</p>
  </div>
</body>
</html>

在上面的代码中，我们添加了一个新的字体和三个新的样式：.bg-primary、.text-primary 和 .border-primary。然后我们在 HTML 中使用这些样式来创建一个带有自定义背景颜色、文本颜色和边框颜色的页面。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3c879a941bf7134724da5