Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override all other properties that I try to change.
import React from "react";
export const Home = () => {
return (
<div className="flex flex-col w-screen justify-evenly items-center mt-16">
<div
id="details-main-1"
className="flex flex-col items-center justify-evenly text-slate-900 text-6xl"
>
Welcome to the <span className="text-slate-300"> Home Page</span>
</div>
<div id="details-main-2 text-black text-xl " className="text-4xl sm:text-2xl">
hello
</div>
<div id="details-main-3"></div>
</div>
);
};