如何在Vue.js中修改Root CSS变量以用于Tailwind类命名？

问题描述 #

想要实现音乐播放器切换歌曲时，同步更新页面的背景图和配色方案。用原生JavaScript结合Tailwind CSS可以正常实现，但在Vue.js中照搬相同逻辑时，只能获取歌曲对象，无法更新:root下的CSS变量。

原生JS实现代码 #

原生环境下通过直接操作DOM设置CSS变量，结合Tailwind配置映射变量，实现样式同步：

JavaScript 核心函数 #

function loadsong(music) {
    song.innerText = music.song
    artist.innerHTML = music.artist
    audio.src = music.songUrl
    document.documentElement.style.setProperty('--primary-color', music.prColor)
    document.documentElement.style.setProperty('--secondary-color', music.secColor)
    document.documentElement.style.setProperty('--img-link', music.imageSrc)
}

页面样式与Tailwind配置 #

<style>
      :root{
        --primary-color: null;
        --secondary-color: null;
        --img-link: null;
      }
    </style>
    
    <script>
    tailwind.config = {
      theme: {
        colors: {
          primary: 'var(--primary-color)',
          secondary: 'var(--secondary-color)',
        },
        extend: {
          backgroundImage: {
            'image': 'var(--img-link)'
          },
        }
      },
    }
  </script>

Vue中失效的代码示例 #

在Vue组件中，仅在created钩子初始化了一次CSS变量，切换歌曲时没有重新执行更新逻辑，导致样式不变化：

export default {
  name: 'app',
  data() {
    return {
      current: {},
      index: 0,
      isPlaying: false,
      player: new Audio(),
      songData: [{
        imageSrc: require('./assets/Images/Laufey.png'),
        song: 'I Wish You Love',
        songUrl: require('./assets/audio/Laufey - I Wish You Love.mp3'),
        artist: 'Laufey',
        prColor: '#46352E',
        secColor: '#CCC6C4',
        heart: true
      }],
    }
  },
  methods: {
    next() {
      this.index++
      this.current = this.songData[this.index]
      // 缺少更新CSS变量的逻辑
    }
  },
  created() {
    this.current = this.songData[this.index]

    let root = document.documentElement.style
    root.setProperty('--primary-color', this.current.prColor)
    root.setProperty('--secondary-color', this.current.secColor)
    root.setProperty('--img-link', `url(${this.current.imageSrc})`)

    this.player.src = this.current.songUrl
  }
}

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
   :root {
    --primary-color: null;
    --secondary-color: null;
    --img-link: null;
  }
}

解决方法：通过监听歌曲变化更新CSS变量 #

利用Vue的响应式特性，监听current歌曲对象的变化，自动触发CSS变量更新。以下是基于计算属性的实现方式：

export default {
  name: 'app',
  data() {
    return {
      current: {},
      index: 0,
      isPlaying: false,
      player: new Audio(),
      songData: [{
        imageSrc: require('./assets/Images/Laufey.png'),
        song: 'I Wish You Love',
        songUrl: require('./assets/audio/Laufey - I Wish You Love.mp3'),
        artist: 'Laufey',
        prColor: '#46352E',
        secColor: '#CCC6C4',
        heart: true
      }],
    }
  },
  methods: {
    next() {
      this.index = (this.index + 1) % this.songData.length
      this.current = this.songData[this.index]
    }
  },
  computed: {
    syncSongStyles() {
      // 依赖current变化，自动更新CSS变量
      const root = document.documentElement.style
      root.setProperty('--primary-color', this.current.prColor)
      root.setProperty('--secondary-color', this.current.secColor)
      root.setProperty('--img-link', `url(${this.current.imageSrc})`)
      return {}
    }
  },
  created() {
    this.current = this.songData[this.index]
    this.player.src = this.current.songUrl
  }
}

补充：使用Watch监听的替代方案 #

如果觉得计算属性不够直观，也可以用watch监听current变化：

watch: {
  current(newSong) {
    const root = document.documentElement.style
    root.setProperty('--primary-color', newSong.prColor)
    root.setProperty('--secondary-color', newSong.secColor)
    root.setProperty('--img-link', `url(${newSong.imageSrc})`)
    this.player.src = newSong.songUrl
  }
}

核心逻辑是确保每次歌曲切换时，重新执行设置CSS变量的代码，利用Vue的响应式特性自动触发更新。

内容的提问来源于stack exchange，提问作者Ruchira Choudhary