Enhance your Vue app by dynamically modifying classes with Tailwind

Question

Enhance your Vue app by dynamically modifying classes with Tailwind

I am working on a Vue3 application that utilizes Tailwinds configured in the tailwind.config.js file.

My question is, can I dynamically modify the value of a preconfigured class from the tailwind.config.js file?

For instance:

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 :

<template>
   <div class="text-base">text here</div>
</template>

<script>
   export default {
      .....

      mounted(){
         tailwind.config.colors.base = "#00000" // How can I update the tailwind color for this class?
      }
   }
</script>

css vue.js tailwind-css

Answer 1

Answer №1

To customize your text color in tailwind.css, you can add a CSS variable named --text-color-base in both the base theme and theme-1:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
  :root{
    --text-color-base:#6e0147;
  }

    .theme-1{
       --text-color-base:#000000;
     }
}

In your tailwind.config.js file, extend the textColor field in the theme option by creating a skin key with different variables for text color:

theme: {
    extend: {
      textColor:{
           skin:{
              base:"var(--text-color-base)"
            }
        },
      colors: {
        base: {
          DEFAULT: "#6e0147",
        },
      },
      fontFamily: {
        sans: ["Interstate", "Inter var", ...defaultTheme.fontFamily.sans],
      },
    },

You can now use this customization by adding the class text-skin-base. To apply theme-1, add the class to the root element like this:

<div class="theme-1">
    <h1 class="text-skin-base">text here</h1>
    ...
</div>

If you want to dynamically change themes, you can bind the root class to a property in your script and update it as needed:

<div :class="myTheme">
    <h1 class="text-skin-base">text here</h1>
    ...
</div>

<script>
   export default {
      .....
      data(){
        return{
          myTheme:''
        } 
       },
      mounted(){
         this.myTheme="theme-1"
      }
   }
</script>

Answer 2

To customize your text color in tailwind.css, you can add a CSS variable named --text-color-base in both the base theme and theme-1:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
  :root{
    --text-color-base:#6e0147;
  }

    .theme-1{
       --text-color-base:#000000;
     }
}

In your tailwind.config.js file, extend the textColor field in the theme option by creating a skin key with different variables for text color:

theme: {
    extend: {
      textColor:{
           skin:{
              base:"var(--text-color-base)"
            }
        },
      colors: {
        base: {
          DEFAULT: "#6e0147",
        },
      },
      fontFamily: {
        sans: ["Interstate", "Inter var", ...defaultTheme.fontFamily.sans],
      },
    },

You can now use this customization by adding the class text-skin-base. To apply theme-1, add the class to the root element like this:

<div class="theme-1">
    <h1 class="text-skin-base">text here</h1>
    ...
</div>

If you want to dynamically change themes, you can bind the root class to a property in your script and update it as needed:

<div :class="myTheme">
    <h1 class="text-skin-base">text here</h1>
    ...
</div>

<script>
   export default {
      .....
      data(){
        return{
          myTheme:''
        } 
       },
      mounted(){
         this.myTheme="theme-1"
      }
   }
</script>

Enhance your Vue app by dynamically modifying classes with Tailwind

Answer №1

Similar questions

Change the hover effects on the desktop to be more mobile-friendly

Modify the color of the text to be white

The setTimeout function within the map function does not output any JSX element

Error: Unable to execute this.getOptions as a function

Nuxt Vuex global state update does not cause v-for loop components to re-render

Ensure that all lists are aligned on the left side, from the numbers to

Guide on showcasing an icon adjacent to the input fields once they have been validated successfully with the help of jquery plugins

Warning: Modification of Vuex store state should only be done within mutation handlers to avoid errors

You can interact with our dropdown menu using the tab key, even when it is

The CSS 'd' attribute for the <path> element is not functioning properly in Firefox

Conceal Tooltips with Materialize CSS

Tips for maintaining consistent image dimensions while resizing your browser window

Tips for showcasing the currently active item in a Bootstrap dropdown menu using jQuery

Understanding the rationale for rendering Views with vuex dependencies in vueJS

Tips for personalizing tooltips in Bootstrap 4

CSS: Contain text within a div to dynamically adjust the div's length based on the text content

Incorrect placement of navigation in HTML/CSS dimensions

What is the process for determining the area of the section?

Using Vue 3's "v-model" with checkboxes where the data values are "1" for checked and "0" for unchecked, instead of the traditional "true" or "false"

acquiring specific array elements in Vue.js