Tailwind CSS Snippets

Typography

<div class="text-center">
  <p class="text-red-500 text-xl">Red text</p>
  <p class="text-lg">Large text</p>
  <p class="font-bold">Bold text</p>
  <p class="text-center">Centered text</p>
</div>

Colors

<div class="bg-blue-200 text-center py-4">
  <p class="text-green-600">Green text</p>
  <div class="border border-purple-500 my-2 p-2">Purple border</div>
  <a class="hover:text-indigo-700" href="#">Hover me</a>
</div>

Layout

<div
  class="w-64 h-16 bg-gray-300 mx-auto mt-4 flex justify-center items-center"
>
  Width of 64 pixels, Height of 16 pixels
</div>

Flexbox

<div class="flex mt-4">
  <div class="flex-1 bg-blue-400 p-4">Flex item 1</div>
  <div class="flex-2 bg-green-400 p-4">Flex item 2</div>
</div>

Grid

<div class="grid grid-cols-2 gap-4 mt-4">
  <div class="bg-yellow-400 p-4">Grid item 1</div>
  <div class="bg-pink-400 p-4">Grid item 2</div>
</div>

Spacing

<div class="p-4 bg-red-400 mt-4">Padding of 1rem</div>
<div class="m-4 bg-blue-400">Margin of 1rem</div>

Sizing

<div class="w-16 h-16 bg-purple-400 mt-4 flex justify-center items-center">
  Width and height of 16 pixels
</div>
<div
  class="min-w-screen min-h-screen bg-indigo-400 mt-4 flex justify-center items-center"
>
  Minimum width and height of screen size
</div>
<div
  class="max-w-xs max-h-96 bg-orange-400 mt-4 flex justify-center items-center"
>
  Maximum width of 20rem and maximum height of 24rem
</div>

Borders

<div class="border border-gray-400 p-4 mt-4">Gray border</div>
<div class="rounded-lg bg-green-200 p-4 mt-4">Rounded corners</div>

Effects

<div class="shadow-lg bg-blue-200 p-4 mt-4">Box shadow</div>
<div class="opacity-75 bg-pink-200 p-4 mt-4">75% opacity</div>

Tables

<div class="overflow-x-auto mt-4">
  <table class="table-auto w-full">
    <thead>
      <tr>
        <th class="px-4 py-2 bg-yellow-300">Header 1</th>
        <th class="px-4 py-2 bg-yellow-300">Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="px-4 py-2 bg-purple-300">Row 1, Cell 1</td>
        <td class="px-4 py-2 bg-purple-300">Row 1, Cell 2</td>
      </tr>
      <tr>
        <td class="px-4 py-2 bg-pink-300">Row 2, Cell 1</td>
        <td class="px-4 py-2 bg-pink-300">Row 2, Cell 2</td>
      </tr>
    </tbody>
  </table>
</div>

Forms

<form class="w-64 mx-auto mt-4">
  <input
    class="w-full p-2 mb-2 bg-gray-200"
    type="text"
    placeholder="Username"
  />
  <select class="w-full p-2 mb-2 bg-gray-200">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
  <button class="w-full py-2 bg-indigo-500 text-white">Submit</button>
</form>

Responsive Classes

<div class="bg-gray-200 p-4">
  <div
    class="bg-white rounded-lg p-4 shadow-md sm:flex sm:items-center sm:justify-between"
  >
    <h2 class="text-xl font-bold mb-4 sm:mb-0">Card Title</h2>
    <div class="flex flex-col sm:flex-row sm:items-center">
      <p class="text-gray-600 sm:mr-4">Card content goes here.</p>
      <div class="flex mt-4 sm:mt-0">
        <button class="bg-blue-500 text-white py-2 px-4 rounded-md">
          Button 1
        </button>
        <button
          class="bg-green-500 text-white py-2 px-4 rounded-md ml-2 sm:ml-4"
        >
          Button 2
        </button>
      </div>
    </div>
  </div>
</div>