How can I make the stat daisy UI component responsive?

[MariusWilsch]

If I reduce the window size the size of the text stays the same. I've tried using the tailwind responsive prefixes but that didn't work either. Does anybody have an idea? Thank you!

Here's a tailwind play link where you can see the html in action

https://play.tailwindcss.com/XxT7YhHT1s

    // Text inside of the stats box is not responsive. It does not scale down when the screen size is reduced.
    return (
        <div className="flex-1 stats stats-vertical shadow">
            <div className="stat">
                <div className="stat-title">Downloads</div>
                <div className="stat-value">31K</div>
                <div className="stat-desc">Jan 1st - Feb 1st</div>
            </div>
            <div className="stat">
                <div className="stat-title">New Users</div>
                <div className="stat-value">4,200</div>
                <div className="stat-desc">↗︎ 400 (22%)</div>
            </div>
            <div className="stat">
                <div className="stat-title">New Registers</div>
                <div className="stat-value">1,200</div>
                <div className="stat-desc">↘︎ 90 (14%)</div>
            </div>
        </div>
    );
};

const Avatar = () => {
    return (
        <div className="flex-grow  avatar">
            <div className="w-24 rounded-full">
                <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
            </div>
        </div>
    );
};

const Matchmaking = () => {
    return (
        <div className="flex w-4/5  mx-auto h-full items-center">
            <div className="flex-1 flex items-center justify-center p-4 rounded-xl border h-[60%]">
                <Stats />
                <Avatar />
            </div>
            <div className=" flex-1 p-4 rounded-xl border h-[60%]">
                {/* Content of the second div */}
            </div>
        </div>
    );
};```


Uploading Screen Recording 2024-01-12 at 18.18.01.mov…

[saadeghi]

You can set the font size the same way you do in Tailwind CSS.
For example, you can add text-sm md:text-2xl lg:text-4xl to stat-value to set custom font sizes for each screen size.

Your code updated: https://play.tailwindcss.com/8C15mbG3JU

Let me know if you have a question.