0

I have multiple buttons that I want to have the same styling as each other, but the lines are super long. I want to use javascript to apply the classes to the buttons to clean up the code.

Here is my code

const buttons = document.querySelectorAll("button");
buttons.forEach((btn) => {
addClasses(btn);
});

function addClasses(button) {
    const btnHoverClass = "btn bg-transparent hover:bg-blue-500";
    const btnHoverFont = "text-blue-700 font-semibold";
    const btnHoverText = "hover:text-white py-2 px-4 border";
    const btnHoverRound = "border-blue-500 hover:border-transparent rounded";
}

Here is my Tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./dist/*.{html,js}"],


  theme: {
    extend: {},
  },
  plugins: [],
}

I thought it may have something to do with the pathway was not set up correctly for Tailwind CSS content configuration, so I tried to test this out by doing something more simple and tried the following styling for my button and it was successfully applied.

const button = document.querySelectorAll("button");
button.forEach((btn) => {
    btn.style.color = 'red';
    
})

I expected the document.querySelectorAll to select all buttons and function addClasses to apply the Tailwind CSS stylings. The result I actually got was none of the stylings being applied at all.

Mitch
  • 1
  • 1
  • Give it a try to work with classList of button in addClasses function. Changing classes of a dom element: https://stackoverflow.com/a/196038/5994546 and I think you should set all classes at ones since they have dedicated definitions for hover state. – serdarsen Feb 13 '23 at 17:14

0 Answers0