clipping background outside of a text's container
I'm trying to make a component in my React and Tailwind project that takes an image, alt, caption and caption alignment and renders a the image with the caption. The caption alignment dictates whether it's over or under the image, and whether it's aligned left or right. That much works.
The issue is that I also want to remove the colored background-color on the rest of the line that the text is on, leaving the caption looking like a tag if it's less wide than the image.
Starting point with test colours: https://play.tailwindcss.com/OOUPg3HLdz
I've got bottom-right hard-coded as the current choice, there. The trick is making the bg-red-300 section to the left of the "A kitten" text go away.
What I really need is the understanding of what I need to do, rather than a singular example of it, because I'm going to produce some different components like this with different ideas, so that I can choose as appropriate in the project. As stated at the top, React and Tailwind are what I'm using. My struggle is because I don't really understand enough CSS, because that's still new to me.
The issue is that I also want to remove the colored background-color on the rest of the line that the text is on, leaving the caption looking like a tag if it's less wide than the image.
Starting point with test colours: https://play.tailwindcss.com/OOUPg3HLdz
I've got bottom-right hard-coded as the current choice, there. The trick is making the bg-red-300 section to the left of the "A kitten" text go away.
What I really need is the understanding of what I need to do, rather than a singular example of it, because I'm going to produce some different components like this with different ideas, so that I can choose as appropriate in the project. As stated at the top, React and Tailwind are what I'm using. My struggle is because I don't really understand enough CSS, because that's still new to me.
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
