Different tailwind config for desktop and mobile version
I'm using tailwind on my project. I want to separate mobile and desktop layouts. But I can't refuse breakpoints as they are necessary for desktop responsiveness (from 1280 to 1920). But if the mobile version is stretched to 1920 in the browser emulator, then the breakpoints modifiers from the desktop are connected to it. but I wouldn't want that. What can you think of? We have: two very different mobile and desktop versions. Purpose: to use tailwind for class atomicity and desktop adaptability, and in the mobile version only class atomicity.
I am sorry for my English. 🙃
5 Replies
Unknown User•17mo ago
Message Not Public
Sign In & Join Server To View
Yes, I just use this module. The problem is that tailwind connects one config for two versions. I would like to make it different for desktop and mobile.
Unknown User•17mo ago
Message Not Public
Sign In & Join Server To View
Tailwind doesn’t work like that. Tailwind config is not set on client side. The config would have no way of knowing wether you are on mobile or desktop.
I would think you are looking for something like device module as @kylek linked.
It seems UnoCSS supports this though.
Also keep in mind that the Tailwind config allows for functional settings.
I agree, thats not what TailwindCSS is built for.
But I don't see any sense in it, you will be able to do most of it with media breakpoints.