Text

The body text elaborates on the structure outlined by titles, providing depth and explanation.

Tailus Themer is a Tailwind CSS Styling Library for Building Modern, Consistent and Accessible Web UIs

Installation

Copy-Paste the component code in a .tsx file.

import React from "react"
import {
    text,
    type TextProps as TextVariants,
    type TextAlignProp,
    type TextWeightProp
} from "@tailus/themer"

type TextSize = TextVariants["size"]
type TitleSizeProp = TextSize |  {
    initial?: TextSize,
    sm?: TextSize,
    md?: TextSize,
    lg?: TextSize,
    xl?: TextSize,
    xxl?: TextSize,
}

export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement | HTMLSpanElement | HTMLDivElement> {
    as?: "p" | "div" | "span" | "em" | "strong",
    children: React.ReactNode,
    className?: string,
    size?: TitleSizeProp;
    align?: TextAlignProp;
    weight?: TextWeightProp;
    neutral?: boolean;
}

export const Text: React.FC<TextProps> = ({
    size,
    as="p",
    weight,
    align,
    neutral,
    children,
    className,
    ...props
}) => {

    const TextElement = as

    if (as === "strong") {
        weight = weight || "medium"
        neutral = neutral || true
    } else if (as === "em") {
        neutral = neutral || true
    }
    
    return (
        <TextElement className={text({
            size,
            weight,
            align,
            neutral,
            className
        })} {...props}>
            {children}
        </TextElement>
    )
}

Text.displayName = "Text"

Usage

Import the <Text/> and start building.

import { Text } from "@tailus-ui/typography";
const HeroSection = () => (
    <Text>
        Tailus Themer is a Tailwind CSS {" "}
        <Text as="strong">Styling Library</Text> {" "}
        for Building Modern, Consistent and Accessible {" "}
        <Text as="em">Web UIs</Text> 
    </Text>
)

Reference

The Text component has the following props

Prop
Type
Default
as
enum
p
size ~
enum
base
align ~
enum
left
weight ~
enum
neutral
boolean
className
string
children
ReactNode