Useful Tailwindcss Code Snippets

2023-03-02

tailwind , code , snippets

Tailwind CSS

Button as link in blade

	<button class="bg-sky-400 hover:bg-sky-600 mt-4 px-4 py-2 rounded-md text-white">
		<a href="{{ route('dashboard')  }}">Dashboard</a>
	</button>

Flex centering of icon and text

	<div class="flex items-center">
		<svg xmlns="http://www.w3.org/2000/svg"  fill="none"  viewBox="0 0 24 24"  stroke-width="1.5"  stroke="currentColor"  class="w-4 h-4">
			<path stroke-linecap="round"  stroke-linejoin="round"  d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"  />
		</svg>

		<span class="pl-2">
			Settings
		</span>
	</div>

To center align the text content of each grid cell - use text-center

<div class="grid grid-flow-row grid-cols-2 mx-auto my-4 text-center">

Display HR

<div class="h-1 border-b-2 border-gray-400 my-2"></div>