NextJS 13 tailwind responsive websites
I'm trying to make a simple responsive website with nextjs 13 and tailwind, but the media queries aren't working as expected. When on mobile "md:" classes is triggered. Is this a bug?
22 Replies
Gyazo
Gyazo
full width on small devices working with browser resize: https://gyazo.com/c6371c2b99b45d9b7ead0c43abb2561c
Gyazo
Gyazo
Gyazo
Gyazo
im pretty sure the devs said that tailwind is still buggy
like its not first class support
yet
is this a fresh project?
can u post code and/or the site
recreated the issue here in a fresh project
GitHub
GitHub - robharding/next13-tailwind-test
Contribute to robharding/next13-tailwind-test development by creating an account on GitHub.
test the font color changing resizing the window and then test on mobile using chrome dev tools
Create Next App
Generated by create next app
oh i know what ur saying
Customizing Screens - Tailwind CSS
Customizing the default breakpoints for your project.
it is working as expected
i would read about the link i posted above and consider creating your own media queries i guess if its not what you want
you can extend tailwinds functionality to do what you want so take advantage of that
iphone se is 375 x 667 so shouldn't it be showing black text in my example?
using the default media queries
its based on min width so anything bigger than 768px is red
which is what you have written
in your example at least
