Can't centre Text with mx-auto (Tailwindcss)

I have got it to center by putting it inside a div with class of flex.

<div class="flex">
            <span class="mx-auto text-xs font-bold italic">{{App\Paginatable::pagination_count($posts)}}</span>
        </div>

For mx auto to work it needs to be inside a full width div. Flex shouldnt be needed

No, if I remove the flex class it aligns to the left edge.

Oh sorry forgot to mention that it cannot be full width as well (default)

Try this (change w to how wide you want it). If the text should just be center aligned then drop mx-auto and just do text-center

<div>
    <div class="mx-auto w-1/2" >lala</div>
</div>

<div>
    <span class="mx-auto w-1/2 text-xs font-bold italic">{{App\Paginatable::pagination_count($posts)}}</span>
</div>

doesn't work

<div>
    <span class="text-center w-3/4 text-xs font-bold italic">{{App\Paginatable::pagination_count($posts)}}</span>
</div>

doesn't work

<div class="flex">
    <span class="mx-auto text-xs font-bold italic">{{App\Paginatable::pagination_count($posts)}}</span>
</div>

works

<div>
    <div class="text-center text-xs font-bold italic">{{App\Paginatable::pagination_count($posts)}}</div>
</div>

also works. Strange?

You cannot set width on a span. :)

And again. If you just want to center a text, you should just use text-center

<div class="text-center">
    <span class=" text-xs font-bold italic">{{App\Paginatable::pagination_count($posts)}}</span>
</div>

you can center text in a span by applying a width to it and setting it to inline-block

eg

<span class="text-center w-full inline-block text-xs font-bold italic ">{{App\Paginatable::pagination_count($posts)}}</span>

@snapey Thank you