使用color-mix（）在tailwindcss中构建自定义调色板-DEV365 开发者社区

在这篇文章中，我们将看到如何使用CSS变量使用CSS函数color-mix()来为我们的NUXT应用程序有效地使用TailWindCSS生成自定义调色板。

表中的内容

Table of Content
Prerequisites
Understanding color palette variants
Generate the palette with tint and shade variants with color-mix()
- Generating tint variants
- Generating shade variants
Using color-mix() with currentColor and CSS variables
Browser support
Resources
Summary

先决条件

最好使用以下命令设置NUXT应用程序：

npx nuxi init tailwindcss-color-mix

在安装提示期间选择tailwindcss作为依赖关系。

一旦创建，在项目的根目录中，您应该创建两个文件 - 一个是tailwind.css，位于styles文件夹中，带有以下代码：

/** styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

我们创建了另一个文件tailwind.config.js，用于扩展项目中taiwindcss的配置：

/** tailwind.config.js */
module.exports = {
}

然后在nuxt.config.js中，您需要使用以下代码设置tailwindcss插件的配置：

/** nuxt.config.js */
export default {
    //...
      tailwindcss: {
        cssPath: '~/styles/tailwind.css',
        configPath: '~/tailwind.config.js'
      },
}

我们已经准备好教授！

了解调色板变体

tailwindcss调色板是一组颜色，分为两个部分：较浅的颜色（色彩变体）和较深的颜色（阴影变体）。色彩变体的范围为50至400，深色的颜色为600至900，基本颜色为500。

有很多方法可以生成调色板变体。您可以使用Color Palette Generator从图像中构建调色板，也可以使用JavaScript构建您的机制以采用颜色并生成适当的调色板。

或者您可以使用CSS函数-color-mix()实现此目标。

用color-mix（）生成带有色调和阴影变体的调色板

color-mix()是一个CSS函数，它接受两种颜色，并根据给定的颜色空间返回所需的混合颜色变体。要使用color-mix()，我们需要定义colorSpace来计算混合baseColor和blendingColor的值，如以下语法：

color-mix(
    in colorSpace, 
    baseColor <baseColorPercent>, 
    blendingColor <blendingColorPercent>
)

我们还可以指示baseColor和blendingColorPercent的baseColorPercent百分比在适用时浏览器应用于混合。下面是将50%红色与20%混合的示例

虽然baseColor和blendingColor可以是任何CSS支持的颜色值，但我们也可以将color-mix()用于different color spaces for color mixing, from sRGB to HSL。结果颜色每个选择的颜色空间将有所不同。对于这篇文章，我们将使用SRGB作为我们的颜色空间。

现在我们了解color-mix()的工作原理，我们将探索如何生成色调并共享尾风调色板的变体。

生成色调变体

如前所述，色彩变体是基本颜色的较浅的阴影，这是由于将基本颜色与一定强度水平（或百分比）的白色融合而产生的。

换句话说，我们将颜色与百分比的白色混合使用，使用color-mix()与以下公式：

color-mix(in srgb, <color>, white <whitePercentage>)

基于上述公式，我们实现了一个函数getTintVariantColor，该函数接受基本color和一个intensity值，从0到1，并返回包含color-mix的适当CSS代码的字符串：

function getTintVariantColor(color, intensity) {
    return `color-mix(in srgb, ${color}, white ${intensity * 100}%)`
}

，由于我们需要50、100、200和400的变体，因此我们可以相应地逐渐增加每个变体级别的whitePercentage的值，如以下示例：

const tintVariants = {
    50: 0.95, //95%
    100: 0.9, //90%
    200: 0.7, //70%
    300: 0.5, //50%
    400: 0.3, //30%
}

太好了。现在，让我们使用theme.extend.colors文件中的theme.extend.colors字段，从主颜色#96454c中访问tailwind.config.js文件，如下：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: getTintVariantColor('#96454c', tintVariants.50),
          100: getTintVariantColor('#96454c', tintVariants.100),
          200: getTintVariantColor('#96454c', tintVariants.200),
          300: getTintVariantColor('#96454c', tintVariants.300),
          400: getTintVariantColor('#96454c', tintVariants.400),
          500: '#96454c',
        }
      },
    }
  },
}

就是这样。当您将以下代码添加到pages/index.vue文件时，您将看到主颜色的色调#96454c：

<template>
  <main class="flex items-center flex-col gap-5 my-10">
    <h1>Current template:</h1>
    <h2 class="text-primary-500">Base color: #96454c</h2>
    <ul style="width: 200px">
      <li 
        v-for="variant in palettes" 
        :class="`bg-primary-${variant} px-3 py-2 ${ variant > 500 ? 'text-white': ''}`"
        key="variant"
      >
        {{variant}}
      </li>
    </ul>
  </main>
</template>
<script setup>
const palettes = [50, 100, 200, 300, 400, 500]
</script>

由于我们正在动态地计算模板中的类，因此我们需要将primary Color的类模式添加到TailWindCSS配置的safelist中。否则，由于认为它们没有使用，因此TailWindCS不会产生相关类别。

module.exports = {
    //...
    safelist: [
        {
            pattern: /\-primary\-/,
        }
    ]
}

另外，我们还可以定义基本颜色的百分比，而不是白色的颜色混合器。在这种情况下，我们将colorPercentage值计算为每个强度级别的100% - whitePercentage：

const tintVariantsForBaseColor = {
    50: 0.05, //95% white
    100: 0.1, //90%
    200: 0.3, //70%
    300: 0.5, //50%
    400: 0.7, //30%
}

，我们的公式将更改为以下内容：

color-mix(in srgb, <color> <colorPercentage>%, white)

结果应与以前的实现相同。

接下来，我们将采用相同的方法来生成阴影变体。

产生阴影变体

虽然色调是由将颜色与白色混合在一起的变体，但作为较深的变体，阴影是由将目标颜色与黑色在某种强度水平上混合的颜色所产生的。遵循上色颜色的先前公式，我们可以以类似的方式编写函数getShadeVariantColor()：

function getShadeVariantColor(color, intensity) {
    return `color-mix(in srgb, ${color}, black ${intensity * 100}% )
}

，我们还需要以0到1的比例来定义强度水平，因为我们的阴影的600、700、800和900的变体逐渐将其值逐渐增加0.2（20％）：< br>

const tintVariants = {
    600: 0.1, //10%
    700: 0.3, //30%
    800: 0.5, //50%
    900: 0.7, //70%
}

然后在tailwind.config.js中，我们将使用getShadeVariantColor()函数来生成我们主要颜色的剩余变体：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
            //...
            600: getShadeVariantColor('#96454c', shadeVariants.600),
            700: getShadeVariantColor('#96454c', shadeVariants.700),
            800: getShadeVariantColor('#96454c', shadeVariants.800),
            900: getShadeVariantColor('#96454c', shadeVariants.900),
        }
      },
    }
  },
}

和在pages/index.vue文件中，我们可以将剩余的变体代码添加到palettes，如下所示：

<script setup>
const palettes = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
</script>

我们现在将看到浏览器中显示的整个调色板：

太好了。但是，如果我们想将主要基本颜色更改为另一种颜色怎么办？手动替换变体计算的每一行可能会效率低下。我们需要找到一种使其更具动态性的方法，例如使用帮助或currentColor或CSS变量。让我们接下来探索它。

将Color-Mix（）与CurrentColor和CSS变量一起使用

不幸的是，我们不能在color-mix()内使用currentColor。但是，我们可以在var()函数和color-mix()的帮助下使用CSS变量。

以我们的示例调色板为例。我们可以将CSS变量--color-primary-base分配给我们的tailwind.css文件中的广泛基础层，而不是直接在配置文件中映射颜色代码，如下所示：

/**styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
      --color-primary-base: #96454c;
    }
  }

然后在tailwind.config.js中，我们将将#96454c的值更改为var(--color-primary-base)：

colors: {
    'primary': {
        50: 'color-mix(in srgb, var(--color-primary-base) 5%, white)',
        100: 'color-mix(in srgb, var(--color-primary-base) 10%, white)',
        200: 'color-mix(in srgb, var(--color-primary-base) 30%, white)',
        300: 'color-mix(in srgb, var(--color-primary-base) 50%, white)',
        400: 'color-mix(in srgb, var(--color-primary-base) 70%, white)',
        500: 'var(--color-primary-base)',
        600: 'color-mix(in srgb, var(--color-primary-base), black 10%)',
        700: 'color-mix(in srgb, var(--color-primary-base), black 30%)',
        800: 'color-mix(in srgb, var(--color-primary-base), black 50%)',
        900: 'color-mix(in srgb, var(--color-primary-base), black 70%)',
    },
},

结果保持不变，但是只要我们想更改主要的基本颜色，我们只需要更改主CSS文件中的--color-primary-base的值。

浏览器支持

在写作时，大多数浏览器都支持此功能，除了Firefox版本88及以上。因此，如果需要Firefox，请考虑实施后备。

资源

概括

在本教程中，我们简要了解了如何使用CSS函数color-mix()，var()，CSS变量和JavaScript在parwindcss-nuxt-Power应用程序中构建变体调色板。实际上，您可以使用相同的方法来计算任何Web应用程序开发的颜色主题，而不仅限于NUXT和TailWindCSS。

在许多情况下，color-mix()在纯CSS中可能会有所帮助，但由于浏览器限制（Firefox），这可能不是最佳选择。在这种情况下，使用TailWindCSS的内置功能进行主题或像Color Palette Generator这样的外部工具可能是更好的解决方案。然而，纯CSS的力量在更方便的功能上变得越来越强大，值得等待！

如果您尝试过诸如color-mix()或其他任何其他CSS函数，请在评论部分与我分享您的经验！

ð如果您想赶上我有时候，请在Twitter上关注我| Facebook。

ð通过我的新书Learning Vue了解Vue。早期版本现在可以使用！

喜欢这篇文章还是发现它有帮助？分享ðð¼ð