Designing with Tailwind CSS: Locking an Image to a Fixed Aspect Ratio

[@aeadedoyin]

Wow, I never knew about the padding percentage/width relationship. Nice 🚀

[@jamesthebald]

Thanks for taking the time to create such great tools, and for putting them out there for free.

[@saadmalaeb8372]

Tailwind aside, just learned one of the best css tricks. Thank you!

[@rinorsadiku5802]

You saved me with this one. Please keep these helpful tutorials coming ❤️

[@viraltech1387]

By far the best trick for handling that image in cards. I just used it in my project and boom, everything looks aligned :D

[@samuelnmeje]

tailwind is just amazing. you are super amazing.

[@rahmatalrafi8349]

You really saved me with this tutorial.

[@LuyenDao-yv9xd]

I'm still not 100% how this works, but damn it's like magic and wish I had know this many many years ago!

[@candideditor]

I wish this was now supported by padding classes by now. but still good. thanks

[@timothymeade-on-twitter]

Excellent video +1 for how you are doing the screen splitting!

[@olawaleajakaye5062]

you are doing well

[@porte0]

@Adam Wathan Can you share the app that you use for screen splitting?

[@RuelAlmonia]

what extension or tool is that on your right side where you click the sm, md and lg?

[@ronaldaug8504]

5:02 😮😲😯

[@heyyy4987]

very nice.

[@helloraj19862003]

Thankyou !!! It helped.

[@FrancoisBeyers]

This is awesome! Where can I get those percentages that you copied into the config file? Thanks 🙏🏼

[@stubborncode5932]

If you run npx tailwindcss init --full tailwindcss-full-config.js, you get a configuration file that includes all of Tailwind's default configuration, where --full is the flag to scaffold the full configuration and tailwindcss-full-config.js is a name of your choice. There you can see all the values that Tailwind is using. You can find the specific ones under spacing.

[@anbuselvanrocky]

Since you have mentioned that the spacing utilities by percentage are builtin. So without adding that percentage values in tailwind.config.js it should work, right? In my case, its not working. I even tried to add those values as you did. its not working? Any idea? w-1/2 working but pb-1/2 or mb-1/2 like codes are not working?

[@wendersonfernandes530]

Percentage are not builtin. You need to add it to the extend option in tailwind.config.js file

[@juanmazzu]

i have the same problem, did you solve it?

[@wendersonfernandes530]

@@juanmazzu take a look at the course repository, here is the tailwind.config.js for this video : github.com/tailwindlabs/designing-with-tailwindcss/blob/master/02-designing-an-image-card/06-locking-images-to-a-fixed-aspect-ratio/tailwind.config.js