P

1. 1

<P>This is a paragraph.</P>

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11

import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'

/**
 * A p (paragraph) component.
 */
const P = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => <p ref={ref} className={cn('p', className)} {...props} />)
P.displayName = 'P'

export { P }

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

.p {
	@apply text-fluid-md my-fluid-11 max-w-prose font-sans font-normal;
	&:last-child {
		@apply mb-0;
	}
}