Question 45944 in CSS Question posted in
Some basic documentation can be found here.

future: {hoverOnlyWhenSupported: true} is not working – CSS

i’m working on a project using tailwind CSS and React. I’m trying to make sure that hover only works for devices that allow hover.

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  future: {
    hoverOnlyWhenSupported: true,
  }...
//Bunch of code
};

I’m using "tailwindcss": "^3.2.4"

Example:

      <div className="p-4 bg-red-600 hover:bg-blue-600">Hover Test</div>

enter image description here

I’m expecting "Hover Test" background to turn blue on mobile without hover.

Tags:

2

Answers


  1. 0

    You maybe misunderstanding what hoverOnlyWhenSupported does. You can look at the PR this feature was introduced in https://github.com/tailwindlabs/tailwindcss/pull/8394

    What it essentially does is when hoverOnlyWhenSupported: true, the hover features will only be applied when it is applicable, i.e., on Desktops, Laptops or anything with a pointer really.

    So your expectation of

    I’m expecting "Hover Test" background to turn blue on mobile without hover

    is wrong. If you want it to appear blue on mobile without hover, you have to do

    <div className="p-4 bg-blue-600 md:bg-red-600 hover:bg-blue-600">Hover Test</div>

    Breakdown:

    1. bg-blue-600: As Tailwind is mobile first, this will apply to mobile-like resolutions, so you’ll get blue background without hover as you wanted.
    2. md:bg-red-600: This will apply to md screens and beyond. So for non-mobile like screens, you’ll have red background and the hover style will be applied as long as the screens support it.
    Login or Signup to reply.
  2. 0

    Simple answer, If your use case is just

    I’m expecting "Hover Test" background to turn blue on mobile without hover.

    You don’t have to mess with hoverOnlyWhenSupported: true, just try this

    <div className="p-4 bg-blue-600 md:bg-red-600 hover:bg-blue-600">Hover Test</div>

    What happens in the above code ?

    As tailwind-css follows mobile-first system. Any classes which are not trailed with breakpoint classes like md:, sm:, lg: and the like is applied to the mobile screen.

    Therefore:

    • For mobile screen: bg-blue-600 is applied
    • For md: screen and above: bg-red-600 is applied

    hover:bg-blue-600 is applied to both screens but if can see its affect only in the screen where you can hover using cursor, as you cannot potentionally hover using mobile phones you can’t see it in effect.

    Further adding to it a statment by @Seth Warburton

    Touch-based devices do not have a hover state. I imagine that you are looking instead at the :focus or :active states. Tailwind allows you to apply classes to those pseudo selectors also, e.g. focus:bg-red-600

    When do you use hoverOnlyWhenSupported: true,?

    This is brought up to address issue of:

    I’ve noticed that :hover in Tailwindcss uses the defaults hover selector which causes ‘stuck’ hover states on mobile.Is there a way to only apply hover styles when supported

    Extending to Amit Joki’s answer

    So now the hover features will only be applied when it is applicable, i.e., on Desktops, Laptops or anything with a pointer really.

    Meaning only when there is cursor/pointer in your device such as Desktops, laptops and the like , hover works perfectly, otherwise hover: will not take effect and this is to overcome the stuck color change problem as mentioned above in the question link.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search