I'm currently in the moment learning tailwind. I'm trying to make these three divs inline when full screen but in smaller screen block. Right now, it is block regardless.
<div {{ $attributes->merge(['class' => 'flex flex-col bg-white dark:bg-gray-800 rounded-lg shadow-xl']) }}>
<div class="text-center items-center px-6 py-3 bg-gray-900 rounded-lg rounded-b-none space-x-12 ">
<div class="sm:inline-flex block items-center">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->likes_count }}</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 5" />
</svg>
</div>
<div class="sm:inline-flex block items-center">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->comments_count }}</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6 text-white">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" "/>
</svg>
</div>
<div class="sm:inline-flex block items-center">
<span class="leading-none text-sm font-semibold mr-2 mt-1 text-white">{{ $post->reads }}</span>
<svg class="h-6 w-6 text-white" stroke="currentColor" viewBox="0 0 20 20">
<path d=""></path>
</svg>
</div>
</div>
</div>
If I've understood the documentation right, you use unprefixed utilites to target mobile. Which is block currently and then prefixed larger screen which is sm:inline-flex at the moment, but right now, it displays block either way, what I'm doing worng exactly?