Employing random runtime strings for the placement of Tailwind CSS classes

Question

Employing random runtime strings for the placement of Tailwind CSS classes

Is there a way to define the position of a div using runtime data? Would setting the className string through some hook be the solution? I often encounter issues with asynchronous operations causing this type of problem.

I was hoping someone could guide me in the right direction, as it's possible that what I'm trying to achieve is not compatible with tailwind CSS:

{timeRecord.clockedTimes.map((time, index) => {
         let date = new Date(time.start);
         let topOffset = getTopOffset(date).toFixed(4);
         let stringOffset = `top-[${topOffset}%]`;
         let className = "absolute " +stringOffset+" outline outline-red-400 w-1/2 left-1/2";
                
                
         return (
                  <div className={className} >
                     {stringOffset}
                  </div>
         )
})}

If I extract the text displayed inside the div by rendering the stringOffset from within and eliminate the construction of the className to make it a static string with the runtime data copied and pasted, it positions correctly.

css reactjs typescript next.js tailwind-css

Answer 1

Answer №1

When using Tailwind, keep in mind that it is not generated dynamically upon rendering. If you are aware of the value before compilation, you can include it directly or utilize a function like cx to add a className. However, if you need to style dynamically, you might have to experiment with the style prop:

interface OffsetProps {
    timeDate: Date
}

const calculateOffset = ({ timeDate }: OffsetProps) => {
    return timeDate;
}

interface TimeProps {
    time: string
}

const ChildComponent = ({ time }: TimeProps) => {
    const date = new Date(time);
    const stringOffsetStyle = `${calculateOffset({ timeDate: date })}`;

    return (
        <div className="absolute outline outline-red-400 w-1/2 left-1/2" style={{ top: stringOffsetStyle }}>
            {stringOffset}
        </div>
    )
}

interface RecordsProps {
    timeRecord: string[]
}

const ParentComponent = ({ timeRecord }: RecordsProps) => {
    return (
        <div>
            {timeRecord.map((time, index) => {
                return <ChildComponent time={time} />;
            })}
        </div>
    )
}

Answer 2

When using Tailwind, keep in mind that it is not generated dynamically upon rendering. If you are aware of the value before compilation, you can include it directly or utilize a function like cx to add a className. However, if you need to style dynamically, you might have to experiment with the style prop:

interface OffsetProps {
    timeDate: Date
}

const calculateOffset = ({ timeDate }: OffsetProps) => {
    return timeDate;
}

interface TimeProps {
    time: string
}

const ChildComponent = ({ time }: TimeProps) => {
    const date = new Date(time);
    const stringOffsetStyle = `${calculateOffset({ timeDate: date })}`;

    return (
        <div className="absolute outline outline-red-400 w-1/2 left-1/2" style={{ top: stringOffsetStyle }}>
            {stringOffset}
        </div>
    )
}

interface RecordsProps {
    timeRecord: string[]
}

const ParentComponent = ({ timeRecord }: RecordsProps) => {
    return (
        <div>
            {timeRecord.map((time, index) => {
                return <ChildComponent time={time} />;
            })}
        </div>
    )
}

Employing random runtime strings for the placement of Tailwind CSS classes

Answer №1

Similar questions

Error message when testing Angular 6 ngrx store: Unable to retrieve ids from undefined variable

What data structure is used to store HTML elements in TypeScript?

Next.js Alert - The Google Maps JavaScript API is being utilized multiple times throughout this page

Moving the scrollbar does not cause the div to scroll

Exclusive workshop on concealing H1 header in Jumbotron

Utilizing local storage, store and access user's preferred layout options through a click function

Displaying a Leaflet marker on a map, yet it defaults to showing the placeholder for a broken image

Creating a Blog Post with Pagination on Blogger

What is the best way to modify this state without altering the original array?

The Angular program is receiving significant data from the backend, causing the numbers to be presented in a disorganized manner within an

Hovering over an image and trying to rotate it results in

The most effective method for updating the Material UI React theme during runtime

Exploring the capabilities of TypeScript in conjunction with the useRoute function on React Navigation version

Transform OKTA Observable into a practical string variable

What is the best way to simulate a library in jest?

Encountering issues with Prisma DB on the 13th attempt: Seed.ts failing to

What is the best way to conceal the arrow that is included with the datalist?

Revamping the hyperlinks in my collapsible menu extension

The height of the first item in the navigation menu seems oddly disproportionate

Struggles with data retrieval using prisma in a Next.js version 13 implementation