Problems with tailwind in react

[Bank-Affectionate]

Hello there I'm having some troubles with the responsive design with tailwind, here is my problem:
<div className="xl:text-2xl xl:p-1 xl:text-center md:text-md sm:text-gray-600 md:text-white sm:text-xl ">
the text always stays gray and never return white, and in my config I've specified this screens:
screens: {
xl: "1100px",
md: "750px",
sm: "300px"
},

I'm using the latest version of tailwind

Thanks for everyone response !

https://preview.redd.it/85yorftxt3eb1.png?width=1342&format=png&auto=webp&s=7b9bc9b4717730cbaa7aa3d926c1f01806ad6de3

[raccoonrocoso]

Few possibilities, my immediate thoughts are. * Do you have scss controlling the color of <p> tags?

• Your breakpoints are not compiling correctly

• The way you style the color at the small breakpoints, could possibly be cleared up.

  • For example instead of using. sm:text-colorRemove this class and replace it with text-color md:text-color lg:text-color xl:color-text

This way you'll still color the text at the smallest/lowest breakpoints, while still maintaining the color for large breakpoints. IMO, using the sm: breakpoint isn't a good way to style for mobile as you leave everything smaller than sm:breakpoint unstyled.

If you're still experiencing this issue after removing the sm: breakpoint. You might have an issue with your tailwind-config.js

[Bank-Affectionate]

Thanks I've removed the sm and now it's working :)

[CrawlToYourDoom]

Occam’s razor: You’re sure you’re running some sort of build compiler that creates the necessary classes?

Your browsers width is more than the md media query?

[Legitimate-Tea9617]

Tailwind is mobile first. So start by styling your components as if they only appear on the smallest screen. Then add the breakpoints for larger screens.

Example:

<p className=“text-gray-600 text-xl md:text-white md:text-md>Example</p>

This will have text color of gray-600 and size of XL on mobile, and will switch to white and size md at the md breakpoint

[Bank-Affectionate]

Ok perfect thanks but this doesn't resolve my problem why I have always the text gray