how to target children ?

[vital-tech-results]

how do I target images in, before, or after a paragraph?

I have this component:

const Description = tw.p` text-left p-8  md:text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100 mt-4`

which is returned like this:

<Description>{content}</Description>

My question: I have an image that is either in this .p element or before or after it. How do I target this img element?

[vital-tech-results]

a problem I am facing is my data is coming from graphcms (headless CMS). So when I add a heading to text in graphcms then how can I target that class in nextjs using tailwindcss and tw.macro?

I can also add a class in the headless cms. How would I target such a class in tw.macro, nextjs, and tailwind?

[ben-rogerson]

Hey there, I recommend using benface's typography plugin to target the container children with the richtext class.

If you feel like doing this yourself, then you could make your own RichText wrapper component:

// components/RichText.js
import tw, { styled, css } from 'twin.macro'

const BaseStyles = tw`text-left p-8 md:text-left text-sm md:text-base lg:text-lg font-medium leading-relaxed text-secondary-100 mt-4`
const ChildrenStyles = css({
  div: tw`bg-black`,
  span: tw`bg-red-400`,
  // and you can include advanced css selectors
  '> img + img': tw`mt-5`,
  'img + &': tw`mt-10`,
})

const RichText = styled.div(() => [BaseStyles, ChildrenStyles])

export default RichText

// pages/About.js
import RichText from "./components/Richtext"

const richtext = `<div>Test</div><span>Here</span>`

export default () => <RichText>{richtext}</Richtext>

Edit: As of v1.12.0 you can now target child elements with two new variants:

tw`all:xxx` // *
tw`all-child:xxx` // > *

[vital-tech-results]

Thank you for the quick reply. I will look into it later this weekend and follow up.

[vital-tech-results]

I just can't get the images to center. I was able to target the images with border size and color, but using object-center from this documentation https://tailwindcss.com/docs/object-position is not centering images.

I just made a fresh push here: https://github.com/dominick-designs/brij-builders-graphcms I am targeting images coming from graphcms on the about page in pages directory.

Is it because the images are coming from a headless cms?

[vital-tech-results]

oh! I just added m-auto and it centered the images! Thanks for your support! Really helped!