CODEWITHSUNDEEP
tailwind-css
Justin
Justin

Reputation: 151

How to absolutely position the last item separately in Tailwind?

I want to just set the left value of a absolutely positioned div different from other divs. I tried the last: property of tailwind, but its not working.

Here's my code thet I tried

absolute z-10 -ml-4 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 -left-5 last:left-20"

I added these classes and only want the last mapped div to have different position

Sample code:

<div class='relative w-full h-72'>
{items.map((each, i ) => {
    return (
    <div key={i} class='absolute top-0 left-0 last:left-10'>{each}</div
    )
})}
</div>

and the last div that is mapped should have different left value

Upvotes: 1

Views: 562

Answers (1)

juliomalves
juliomalves

Reputation: 50278

Prior to v2.1 and JIT mode, you need to explicitly enable the last-child variant in your tailwind.config.js, as it's not enabled for any core plugins.

// tailwind.config.js

module.exports = {
    // ...
    variants: {
        extend: {
            inset: ['last']
        }
    }
}

Playground demo: https://play.tailwindcss.com/Wt6reZBsRY

From v2.1, when using Just-in-Time mode no extra configuration is required as all styles are generated on-demand.

// tailwind.config.js
module.exports = {
    mode: 'jit',
    // ...
}

Upvotes: 1

Related Questions