--- title: Tailwind CSS responsive square divs | daily.dev description: I was working on a responsive portfolio kind of layout, and I soon realized it's pretty hard to get a responsive square based on the width. I found the perfect... canonical: https://daily.dev/posts/tailwind-css-responsive-square-divs-gg8pn84wj twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Tailwind CSS responsive square divs | daily.dev og:description: I was working on a responsive portfolio kind of layout, and I soon realized it's pretty hard to get a responsive square based on the width. I found the perfect... og:url: https://daily.dev/posts/tailwind-css-responsive-square-divs-gg8pn84wj og:image: https://api.daily.dev/og/posts/gg8pN84wj.png og:image:alt: Tailwind CSS responsive square divs og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Tailwind CSS responsive square divs **[Hashnode](https://daily.dev/sources/hashnode)** · [@dailydevtips](https://daily.dev/dailydevtips) · 2 min read · 5 upvotes · 2 comments ## Summary I was working on a responsive portfolio kind of layout, and I soon realized it's pretty hard to get a responsive square based on the width. I found the perfect solution and will be showing you how to achieve this in CSS and even in Tailwind. The general concept is pretty simple. We want to create a percentage-based width div and use the same percentage as our padding-bottom. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@ignusg** · 3 upvotes > aspect-ratio is supported on enough modern browsers so that this hack does not need to be abused anymore (it’s meant to prevent recursion, not deal with aspect ratios even though it works). > > I think there’s a tailwind plugin for aspect-ratio until it lands in a full release. --- Tags: [#css](https://daily.dev/tags/css), [#tailwind-css](https://daily.dev/tags/tailwind-css) [View this post on daily.dev](https://daily.dev/posts/tailwind-css-responsive-square-divs-gg8pn84wj) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Tailwind CSS responsive square divs","url":"https://daily.dev/posts/tailwind-css-responsive-square-divs-gg8pn84wj","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/tailwind-css-responsive-square-divs-gg8pn84wj"},"datePublished":"2021-09-15T09:09:30.674Z","dateModified":"2021-10-07T14:17:10.317Z","description":"I was working on a responsive portfolio kind of layout, and I soon realized it's pretty hard to get a responsive square based on the width. I found the perfect...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ca2016aecfcd66cc7fe2dd078d1ce5d3","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/ca2016aecfcd66cc7fe2dd078d1ce5d3","isAccessibleForFree":true,"articleSection":"Hashnode","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Chris Bongers","url":"https://daily.dev/dailydevtips","image":"https://media.daily.dev/image/upload/s--9gxFz1e7--/f_auto/v1705902590/avatars/avatar_JUNiIGCV-?_a=BAMAMiZW0","description":"Daily blogger and web team lead at daily.dev 💖","worksFor":{"@type":"Organization","name":"daily.dev","logo":"https://daily-now-res.cloudinary.com/image/upload/s--MASZOhnv--/f_auto/v1614088267/landing/Daily.dev_logo"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":52815}},"commentCount":2,"discussionUrl":"https://daily.dev/posts/tailwind-css-responsive-square-divs-gg8pn84wj","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"css,tailwind-css","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hashnode","item":"https://daily.dev/sources/hashnode"},{"@type":"ListItem","position":3,"name":"Tailwind CSS responsive square divs"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/tailwind-css-responsive-square-divs-gg8pn84wj","comment":[{"@type":"Comment","text":"aspect-ratio is supported on enough modern browsers so that this hack does not need to be abused anymore (it’s meant to prevent recursion, not deal with aspect ratios even though it works).\nI think there’s a tailwind plugin for aspect-ratio until it lands in a full release.","datePublished":"2021-09-15T09:33:37.090Z","url":"https://daily.dev/posts/gg8pN84wj#c-yfdiTiR1G","author":{"@type":"Person","name":"IgnusG","url":"https://daily.dev/ignusg","image":"https://media.daily.dev/image/upload/f_auto/v1643464938/avatars/PlPdeFARQ"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}]} ```