hover:text-x not working

sage
1

I’ve got everything set up and all seems to be working fine with Tailwind 4 and theme.json, however my hover:text-x just isn’t picking up.

Historically I would have added to the tailwind.config.js file a safelist to ensure they get compiled but whats the equivalent in Sage 11?

in my vite config file:

wordpressThemeJson({
      disableTailwindColors: false,
      disableTailwindFonts: true,
      disableTailwindFontSizes: true,
      safelist: [
        'hover:text-brand-pink',
        'hover:text-brand-blue',
        'hover:text-brand-darkgrey',
      ],
    }),

app.css:

@theme {
  --breakpoint-3xl: 1920px;
  --color-dark: var(--wp--preset--color--brand-dark);
  --color-pink: var(--wp--preset--color--brand-pink);
  --color-purple: var(--wp--preset--color--brand-purple);
  --color-blue: var(--wp--preset--color--brand-blue);
  --color-grey: var(--wp--preset--color--brand-grey);
  --color-darkgrey: var(--wp--preset--color--brand-darkgrey);
  --color-black: var(--wp--preset--color--black);
  --color-white: var(--wp--preset--color--white);
  --color-transparent: var(--wp--preset--color-transparent);
}

in my theme.json:

"palette": [
        {
          "color": "#1a0c24",
          "name": "Brand Dark",
          "slug": "brand-dark"
        },
        {
          "color": "#eb2893",
          "name": "Brand Pink",
          "slug": "brand-pink"
        },
        {
          "color": "#2a1454",
          "name": "Brand Purple",
          "slug": "brand-purple"
        },
        {
          "color": "#3787f5",
          "name": "Brand Blue",
          "slug": "brand-blue"
        },
        {
          "color": "#cccccc",
          "name": "Brand Grey",
          "slug": "brand-grey"
        },
        {
          "color": "#999999",
          "name": "Brand Darkgrey",
          "slug": "brand-darkgrey"
        },
        {
          "color": "#131313",
          "name": "Black",
          "slug": "black"
        },
        {
          "color": "#fff",
          "name": "White",
          "slug": "white"
        },
        {
          "color": "rgba(255, 255, 255, 0)",
          "name": "Transparent",
          "slug": "transparent"
        }
      ]

Not sure why all other classes and colours work but the hover: states don’t seem to be plugged in. Any help would be appreciated.

2

Check out Safelist in V4 · tailwindlabs/tailwindcss · Discussion #15291 · GitHub

3

Hi Log1x

Thanks for the reply.

I’ve followed this but the hover:text-brand-pink still doesn’t build into the public app.css file.

@source inline("hover:text-brand-pink");

@theme {
  --breakpoint-3xl: 1920px;
  --color-dark: var(--wp--preset--color--brand-dark);
  --color-pink: var(--wp--preset--color--brand-pink);
  --color-purple: var(--wp--preset--color--brand-purple);
  --color-blue: var(--wp--preset--color--brand-blue);
  --color-grey: var(--wp--preset--color--brand-grey);
  --color-darkgrey: var(--wp--preset--color--brand-darkgrey);
  --color-black: var(--wp--preset--color--black);
  --color-white: var(--wp--preset--color--white);
  --color-transparent: var(--wp--preset--color-transparent);
}

Colours are working, but something preventing the hover: from being picked up, even after following the @source advice

4

It looks like you’re trying to safelist variables that don’t exist in your @theme directive. Try hover:text-pink

1 Like
5

But I already have the color listed in there:

--color-pink: var(--wp--preset--color--brand-pink);
6

Yes but you are trying to use hover:text-brand-pink . I think you need to add —color-brand-pink to the @theme directive or use hover:text-pink