2

I'm trying to convert the rest of my css into tailwindcss and I've been running into this blocker that prevents the active element from displaying as a different color.

   <!--index.html-->     <button class="tablinks" onclick="aboutSec(event, 'About')" id="default"><p class="active:text-pink-800 hover:text-yellow-500 transition text-3xl font-bold p-5">About</p></button>

As shown in the html code I want the About tag to display as purple when it is active. I already have the javascript made for it. The hover state works but I can't get the 'active:' state to work. Here is what I have in my config file for tailwindcss.

module.exports = {
  content: ["./index.html"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      textColor: ["active"],
    },
  },
  plugins: [],
}
Thenamesoak
  • 43
  • 6
  • 1
    What do you mean by `active` state? The moment when you click button and text becomes pink (CSS `:active`) or it should stay pink once being clicked before another element would be clicked (like `.is-active` class)? – Ihar Aliakseyenka Oct 07 '22 at 06:43
  • Yes, i meant like the css state, for example ".tabs button.active". when the button is clicked I want it to become pink – Thenamesoak Oct 07 '22 at 15:00
  • 1
    [This](https://stackoverflow.com/questions/73527500/tailwind-css-active-class-only-works-while-continuing-to-click-the-button/73528462#73528462) is what you looking for – Ihar Aliakseyenka Oct 07 '22 at 15:02
  • Looks like that approach hasn't worked for me. I'll continue playing around with it to see if I can come to a solution. If worse comes to worse I'll reinstall tailwind – Thenamesoak Oct 08 '22 at 01:17
  • 1
    I have the same issue. Its caused by the order in which :hover and :active are in the css file. "Styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. To style links appropriately, put the :active rule after all other link-related rules," source https://developer.mozilla.org/en-US/docs/Web/CSS/:active – Rafał Rowiński Mar 30 '23 at 19:25

0 Answers0