{"repo":"asvny/building-realworld-user-interfaces-using-tailwind","free":true,"listed":false,"github":"https://github.com/asvny/building-realworld-user-interfaces-using-tailwind","clone":"git clone https://github.com/asvny/building-realworld-user-interfaces-using-tailwind.git","description":"Demo of building real-world UIs using TailwindCSS","language":"HTML","stars":105,"topics":["tailwindcss","postcss","user-interface","css"],"license":"MIT","category":"ui-components","readme_excerpt":"Building Real-World User Interfaces Using Tailwind Examples of building real-world user interfaces using Tailwind CSS. The websites I have replicated are: - Shopify - Spotify - Netlify - Atlassian Previews --- Thoughts on Atomic CSS Since there are already many posts about Atomic CSS, I'll keep this introduction brief. For a long time (since 2014), my preference has been: - SUIT CSS for UI components like buttons, forms, and base layouts. - Atomic CSS for almost all other use cases. Why Use Atomic CSS? When working on a greenfield project, base UI components don’t change much—usually just in terms of color or typography. However, the main project UI changes frequently. To make code deletion easier when iterating on new designs, using Atomic CSS for layouts and other dynamic components ensures flexibility. When a designer presents a new UI, it becomes much easier to delete existing templates (React, Ember, Vue, etc.) and quickly iterate without writing additional CSS—only modifying the template. When Do Things Get Messy? 1. Using :nth-child , :only-child , etc., selectors is tricky A simple example: 2. Managing states like hover , active , and focus - Thankfully, Tailwind CSS provides solutions for this. 3. Responsive design challenges - You end up adding a lot of classes, making it hard to understand an element’s purpose at a glance. --- Author Annamalai Saravanan","default_branch":null,"files":null,"tree":[],"storefront":"/r/asvny","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/asvny/building-realworld-user-interfaces-using-tailwind/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}