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.
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?
@@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
Wow, I never knew about the padding percentage/width relationship.
Nice 🚀
Thanks for taking the time to create such great tools, and for putting them out there for free.
Tailwind aside, just learned one of the best css tricks. Thank you!
By far the best trick for handling that image in cards. I just used it in my project and boom, everything looks aligned :D
You saved me with this one. Please keep these helpful tutorials coming ❤️
I'm still not 100% how this works, but damn it's like magic and wish I had know this many many years ago!
tailwind is just amazing. you are super amazing.
You really saved me with this tutorial.
Excellent video +1 for how you are doing the screen splitting!
I wish this was now supported by padding classes by now. but still good. thanks
@Adam Wathan Can you share the app that you use for screen splitting?
you are doing well
what extension or tool is that on your right side where you click the sm, md and lg?
This is awesome! Where can I get those percentages that you copied into the config file? Thanks 🙏🏼
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.
Thankyou !!! It helped.
very nice.
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?
Percentage are not builtin. You need to add it to the extend option in tailwind.config.js file
i have the same problem, did you solve it?
@@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
5:02 😮😲😯