Today I created the Navbar component for my web3 app and in the process saw the true utility of Tailwind CSS. The app must be responsive and mobile friendly, so on desktop the entire Navbar will appear with links, while on mobile there will be an icon to tap that expands into a navbar and can be collapsed again. With Tailwind CSS we can create this without directly using any CSS media queries. Tailwind allows us to put classes directly in our JSX that selectively apply to certain screen sizes. Using this to hide the Navbar selectively based on screen size, combined with React state to track if the mobile navbar is to be displayed or hidden, allows us to create a responsive app for desktop and mobile with a minimum amount of complexity.
No comments:
Post a Comment