When building React apps with Tailwind CSS, you can easily adapt your components to different screen sizes and user interactions using responsive prefixes and state modifiers. Responsive prefixes like md: and lg: allow you to apply styles only at certain breakpoints, making your layouts flexible across devices. For example, adding md:bg-blue-500 to a div sets its background color to blue only on medium screens and above, while keeping the default background on smaller screens.

State modifiers such as hover: and focus: let you change styles based on user actions. For instance, hover:bg-green-500 changes the background color when the user hovers over an element, and focus:ring-2 adds a ring when the element is focused, like when a user clicks into an input field. You can combine these with responsive prefixes for even more control, such as md:hover:text-red-500, which changes text color on hover but only for medium screens and larger.

To see how these variants come together in practice, consider a button component in your React app. You might want the button to have a larger padding on larger screens, and to change color when hovered or focused. By combining responsive and state-based classes, you can achieve this easily.

Suppose you have a Button component in React. To make it responsive and interactive, you could write:

<button className="px-4 py-2 bg-blue-500 text-white rounded 
                   md:px-8 md:py-4 
                   hover:bg-blue-700 
                   focus:outline-none focus:ring-2 focus:ring-blue-300">
  Click me
</button>

In this example:

• The button has default padding (px-4 py-2) and background color (bg-blue-500);
• On medium screens and above, the padding increases (md:px-8 md:py-4);
• When hovered, the background becomes darker (hover:bg-blue-700);
• When focused, a blue ring appears for accessibility (focus:outline-none focus:ring-2 focus:ring-blue-300).

This approach ensures your button looks great and responds visually to user interaction on any device.

Another scenario might involve a navigation bar where links highlight on hover, but only show underline on larger screens. You could use:

<a className="text-gray-700 hover:text-blue-600 
              lg:underline lg:hover:no-underline">
  Home
</a>

Here, the link text changes color on hover for all screens, but the underline appears only on large screens, and disappears on hover for those screens. These combinations allow you to finely tune your UI for both device size and user behavior, all within your JSX using Tailwind's simple syntax.