2023-06-292023-06-30

概要

• Vue.jsとTailwind CSSを使って、背景色を動的に変更する方法を紹介します。

Vue.jsとTailwind CSSの基本的な使い方

• Vue.jsへのTailwind CSSの導入については、Tailwind CSSの公式サイトの「Install Tailwind CSS with Vite」の「Using Vue」に記載があります。
• Tailwind CSSを使った背景色の設定は、次のようにclassに”bg-なんちゃら“を指定しておこないます。

  <QuillEditor
    theme=""
    toolbar="none"
    contentType="text"
    content="Hello world!"
    class="border border-solid border-current border-slate-200 mt-2 bg-slate-200"
    ref="textEditor"
  />

• 具体的にどのような値を設定できるかは、Tailwind CSSの公式サイトの「Background Color」に記載がありますが、次のようにRGBで任意の色を指定することができます。

<p class="bg-[#50d71e]">
  <!-- ... -->
</p>

• Vue 3の単一ファイルコンポーネント（SFC）で、よりコードが簡潔に書けるComposition APIを用いると、あるコンポーネントの背景色を設定するには、次のように書くことができます。

<template>
  :
  <MyComponent class="bg-slate-200" />
  :

</template>

<script setup>
import { MyComponent } from '@component/my-component'
</script>

動的な背景色の設定

• 動的に色を変更するには、まず色を格納する変数が必要です。次のように書けます。
  • Tailwind CSSの bg-[#xxxxxx]クラスの#xxxxxxの部分を文字列として保持させます。

<script setup>
import { ref } from 'vue'
const backgroundColor = ref('#ffffff')

• これを変更するには例えば次です。
  • [背景色]ボタンをクリックする度に、色を2色のどちらかに切り替えます。

<template>
  <div class="flex gap-2">
    <button
      @click="changeBackgroundColor"
      class="px-2 py-1 bg-slate-200 text-sm text-black border-2 border-slate-300 rounded-full"
    >
      背景色
    </button>

:

<script setup>
:
const changeBackgroundColor = () => {
  backgroundColor.value = backgroundColor.value === '#50d71e' ? '#ffffff' : '#50d71e'
}
</script>

• #xxxxxx形式の文字列を利用してTailwind CSSをVueコンポーネントで次のよう設定できます。
  • 以下の { backgroundColor } は、{ backgroundColor: backgroundColor } の省略形です。

  <MyCoponent
    class="border-current border-slate-200 mt-2"
    :style="{ backgroundColor }"
  />

• 下記はうまくいきませんでした。

  // これはうまくいかない。
  <MyCoponent
    :class="`border-current border-slate-200 mt-2 bg-[${backgroundColor}]`"
  />

• ここで、:class (v-bind:class の省略記法) や:style(v-bind:style の省略記法) は、HTMLのCSS クラスやスタイルを動的に切り替えるためのバインディングの方式です。
• 詳細は、Vue.jsの公式ドキュメント「クラスとスタイルのバインディング」をご覧ください。

まとめ

• 今回は背景色を動的に変更する方法を説明しましたが、もちろんTailwind CSSのテキストカラーその他でも同様のテクニックが使用できます。

  <QuillEditor
    theme=""
    contentType="text"
    content="Hello world!"
    class="border border-solid border-current border-slate-200 mt-2]"
    :style="{ color: textColor, backgroundColor, fontFamily, fontSize }"
    ref="textEditor"
  />