I am trying to build a way for a user to define the primary color of the website. When defining my tailwind classes, I want to use something like bg-primary-600 rather than hard coding a color, so that when the value for primary changes, it will update the style.
Here I have my test environment: https://stackblitz.com/edit/nuxt-starter-qinx8e?file=tailwind.config.js
For those who don't want to open the link
tailwind.config.js
/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors');
module.exports = {
darkMode: 'class',
content: [
'./components/**/*.{js,vue,ts}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
'./app.vue',
],
theme: {
extend: {
colors: {
// This should be changed by the user instead of hard coding
primary: colors.blue,
},
},
},
};
app.vue
<template>
<div>
<div class="bg-red-600 h-16 mb-4">HELLO WORLD</div>
<div class="bg-primary-600 h-16 mb-4">HELLO WORLD</div>
<button class="bg-blue-200 rounded-lg p-4 mx-2" @click="myColor = 'blue'">
Blue
</button>
<button class="bg-green-200 rounded-lg p-4" @click="myColor = 'green'">
Green
</button>
<body class="mx-2">
My color is: {{ myColor }}
</body>
</div>
</template>
<script setup>
const myColor = ref('orange');
</script>
I cannot seem to figure out how to dynamically change the color in Tailwind. I'm able to hard code a value like in my example, but I cannot assign this value to a reactive variable and have it update.
I cannot figure out how to make the myColor ref update the color in tailwind. Note that I don't want to update it just in the page, I need to be able to update tailwind so that any reference to primary, regardless of the page or component will have the correct color.
