[英]Tailwind: modify classes dynamically for Vue app
I have a Vue3 application with Tailwinds configured in tailwind.config.js我有一个在 tailwind.config.js 中配置了 Tailwinds 的 Vue3 应用程序
Is it possible to dynamically change the value of a preconfigured class from tailwind.config.js?是否可以从 tailwind.config.js 动态更改预配置的 class 的值?
For example:例如:
tailwind.config.js : tailwind.config.js :
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
base: {
DEFAULT: "#6e0147",
},
},
fontFamily: {
sans: ["Interstate", "Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
ringWidth: ["hover", "active"],
ringColor: ["hover", "active"],
ringOpacity: ["hover", "active"],
ringOffsetWidth: ["hover", "active"],
ringOffsetColor: ["hover", "active"],
},
},
plugins: [],
};
VueComponent.vue : VueComponent.vue :
<template>
<div class="text-base">text here</div>
</template>
<script>
export default {
.....
mounted(){
tailwind.config.colors.base = "#00000" // change tailwind color of class somehow
}
}
</script>
In your tailwind.css
add a CSS variable called --text-color-base
(you could add multiple) in the base theme and also in theme-1
:在您的tailwind.css
中,在基本主题和theme-1
中添加一个名为--text-color-base
的 CSS 变量(您可以添加多个):
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base{
:root{
--text-color-base:#6e0147;
}
.theme-1{
--text-color-base:#000000;
}
}
in tailwind.config.js
extend the textColor field in the theme option with skin key which will contain the different variable for your text color:在tailwind.config.js
中,使用皮肤键扩展主题选项中的 textColor 字段,皮肤键将包含文本颜色的不同变量:
theme: {
extend: {
textColor:{
skin:{
base:"var(--text-color-base)"
}
},
colors: {
base: {
DEFAULT: "#6e0147",
},
},
fontFamily: {
sans: ["Interstate", "Inter var", ...defaultTheme.fontFamily.sans],
},
},
then you could use it like class="text-skin-base"
, to apply the theme-1
add the class theme-1
to the root element like:然后你可以像class="text-skin-base"
一样使用它,应用theme-1
将 class theme-1
1 添加到根元素,如:
<div class="theme-1">
<h1 class="text-skin-base">text here</h1>
...
</div>
then in your script you could bind the root class to a property and you update in the script:然后在您的脚本中,您可以将根 class 绑定到一个属性,然后在脚本中更新:
<div :class="myTheme">
<h1 class="text-skin-base">text here</h1>
...
</div>
<script>
export default {
.....
data(){
return{
myTheme:''
}
},
mounted(){
this.myTheme="theme-1"
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.