Tailwind CSS 与 Vue 3 中动态任意值使用指南：Sass 变量、Custom Properties 与 JavaScript

2024-03-18 18:53:50

Tailwind CSS 是一种流行的实用工具类框架，它允许通过预定义的类来快速构建样式。Vue 3 则是一种前端框架，提供了组件化开发和响应式数据绑定的能力。结合这两者，在开发过程中动态生成或改变样式的场景十分常见。本文将探讨在 Tailwind CSS 和 Vue 3 中如何有效使用动态任意值，通过 Sass 变量、CSS Custom Properties（自定义属性）以及 JavaScript 来实现。

使用 Sass 变量

Sass 提供了变量功能，可以存储和重复使用颜色、字体大小等样式。结合 Tailwind CSS，可以通过 Sass 变量来实现更灵活的动态值应用。

步骤一：定义变量

在 src/assets/styles/_variables.scss 文件中定义需要使用的变量：

// 定义颜色变量
$primary-color: #069;

步骤二：Tailwind CSS 配置

在 Tailwind 的配置文件 tailwind.config.js 中引用这些变量，这样可以在全局应用自定义值。

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '$primary-color',
      }
    },
  },
};

步骤三：Vue 组件中使用

在 Vue 组件的模板中通过 Tailwind 类来使用这些变量：

<template>
  <div :class="{'bg-primary-500': isActive}">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
    }
  },
}
</script>

使用 CSS Custom Properties

CSS 自定义属性（也称作变量）提供了一种在样式表中声明可重复使用的值的方法。

步骤一：定义自定义属性

在全局样式文件如 src/assets/styles/global.css 中定义：

:root {
  --primary-color: #069;
}

步骤二：Tailwind 配置引用变量

Tailwind CSS 支持直接使用这些自定义属性，无需额外配置。

步骤三：Vue 组件应用

在 Vue 组件模板中通过 Tailwind 类来引用这些变量：

<template>
  <div :class="{'bg-[var(--primary-color)]': isActive}">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
    }
  },
}
</script>

使用 JavaScript 动态值

直接通过 JavaScript 来动态改变样式提供了最大灵活性。

步骤一：在 Vue 组件中定义方法

<template>
  <div :style="dynamicStyle">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: '#069',
    }
  },
  computed: {
    dynamicStyle() {
      return {
        backgroundColor: this.primaryColor,
      };
    }
  }
}
</script>