Paragraph Component – Styled Paragraphs for React and Next.js with Tailwind CSS

Elevate your page content with a customizable Paragraph component. Designed for React and Next.js applications, this component allows you to style and adjust paragraphs using Tailwind CSS. Learn how to create flexible, responsive, and consistent paragraphs to improve your website’s readability and design.

Paragraph preview

Elevate your page content with a customizable Paragraph component. Designed for React and Next.js applications, this component allows you to style and adjust paragraphs using Tailwind CSS

Please install everything that's required

Before setup and using this component, please install all the required dependencies from this link (if you have never installed).

1. Setup codes

Before setup please setup the cn function in my docs.

Create a new Card component components/ui/typography/Paragraph.tsx

jsx
import React from "react";

import { cn } from "@/utils/cn";

const Paragraph = ({ children, className }: { children: React.ReactNode; className?: string }) => {
  return <p className={cn("text-base", className)}>{children}</p>;
};

export default Paragraph;

2. Usages

Now we can use Paragraph component in any where in your app

jsx
import Paragraph from "../typography/Paragraph";

...

<Paragraph className="mb-4">{template.description}</Paragraph>