Published on

Ultimate Guide: Create A Table With Tailwind CSS

Tags
Tables
Table

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Table ui component

When i was working on a project so i decided to create a table component.

Why use Tailwind CSS to make a Table ui component?

  • It can make the building process of Table ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Table component file.

The preview of Table ui component

Free download of the Table's source code

The source code of Table ui component

<div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 pr-10 lg:px-8">
                <div class="align-middle rounded-tl-lg rounded-tr-lg inline-block w-full py-4 overflow-hidden bg-white shadow-lg px-12">
                    <div class="flex justify-between">
                        <div class="inline-flex border rounded w-7/12 px-2 lg:px-6 h-12 bg-transparent">
                            <div class="flex flex-wrap items-stretch w-full h-full mb-6 relative">
                                <div class="flex">
                                    <span class="flex items-center leading-normal bg-transparent rounded rounded-r-none border border-r-0 border-none lg:px-3 py-2 whitespace-no-wrap text-grey-dark text-sm">
                                        <svg width="18" height="18" class="w-4 lg:w-auto" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8.11086 15.2217C12.0381 15.2217 15.2217 12.0381 15.2217 8.11086C15.2217 4.18364 12.0381 1 8.11086 1C4.18364 1 1 4.18364 1 8.11086C1 12.0381 4.18364 15.2217 8.11086 15.2217Z" stroke="#455A64" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M16.9993 16.9993L13.1328 13.1328" stroke="#455A64" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                </div>
                                <input type="text" class="flex-shrink flex-grow flex-auto leading-normal tracking-wide w-px flex-1 border border-none border-l-0 rounded rounded-l-none px-3 relative focus:outline-none text-xxs lg:text-xs lg:text-base text-gray-500 font-thin" placeholder="Search">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="align-middle inline-block min-w-full shadow overflow-hidden bg-white shadow-dashboard px-8 pt-3 rounded-bl-lg rounded-br-lg">
                    <table class="min-w-full">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 border-b-2 border-gray-300 text-left leading-4 text-blue-500 tracking-wider">ID</th>
                                <th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm leading-4 text-blue-500 tracking-wider">Fullname</th>
                                <th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm leading-4 text-blue-500 tracking-wider">Email</th>
                                <th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm leading-4 text-blue-500 tracking-wider">Phone</th>
                                <th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm leading-4 text-blue-500 tracking-wider">Status</th>
                                <th class="px-6 py-3 border-b-2 border-gray-300 text-left text-sm leading-4 text-blue-500 tracking-wider">Created At</th>
                                <th class="px-6 py-3 border-b-2 border-gray-300"></th>
                            </tr>
                        </thead>
                        <tbody class="bg-white">
                                <tr>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="flex items-center">
                                            <div>
                                                <div class="text-sm leading-5 text-gray-800">#1</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="text-sm leading-5 text-blue-900">Damilare Anjorin</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">[email protected]</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">+2348106420637</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">
                                        <span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                        <span aria-hidden class="absolute inset-0 bg-green-200 opacity-50 rounded-full"></span>
                                        <span class="relative text-xs">active</span>
                                    </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500 text-blue-900 text-sm leading-5">September 12</td>
                                    <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-500 text-sm leading-5">
                                        <button class="px-5 py-2 border-blue-500 border text-blue-500 rounded transition duration-300 hover:bg-blue-700 hover:text-white focus:outline-none">View Details</button>
                                    </td>
                          </tr>
                               <tr>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="flex items-center">
                                            <div>
                                                <div class="text-sm leading-5 text-gray-800">#1</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="text-sm leading-5 text-blue-900">Damilare Anjorin</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">[email protected]</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">+2348106420637</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">
                                        <span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                        <span aria-hidden class="absolute inset-0 bg-green-200 opacity-50 rounded-full"></span>
                                        <span class="relative text-xs">active</span>
                                    </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500 text-blue-900 text-sm leading-5">September 12</td>
                                    <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-500 text-sm leading-5">
                                        <button class="px-5 py-2 border-blue-500 border text-blue-500 rounded transition duration-300 hover:bg-blue-700 hover:text-white focus:outline-none">View Details</button>
                                    </td>
                          </tr>
                          <tr>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="flex items-center">
                                            <div>
                                                <div class="text-sm leading-5 text-gray-800">#1</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="text-sm leading-5 text-blue-900">Damilare Anjorin</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">[email protected]</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">+2348106420637</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">
                                        <span class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight">
                                        <span aria-hidden class="absolute inset-0 bg-red-200 opacity-50 rounded-full"></span>
                                        <span class="relative text-xs">not active</span>
                                    </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500 text-blue-900 text-sm leading-5">September 12</td>
                                    <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-500 text-sm leading-5">
                                        <button class="px-5 py-2 border-blue-500 border text-blue-500 rounded transition duration-300 hover:bg-blue-700 hover:text-white focus:outline-none">View Details</button>
                                    </td>
                          </tr>
                          <tr>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="flex items-center">
                                            <div>
                                                <div class="text-sm leading-5 text-gray-800">#1</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="text-sm leading-5 text-blue-900">Damilare Anjorin</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">[email protected]</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">+2348106420637</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">
                                        <span class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight">
                                        <span aria-hidden class="absolute inset-0 bg-green-200 opacity-50 rounded-full"></span>
                                        <span class="relative text-xs">active</span>
                                    </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500 text-blue-900 text-sm leading-5">September 12</td>
                                    <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-500 text-sm leading-5">
                                        <button class="px-5 py-2 border-blue-500 border text-blue-500 rounded transition duration-300 hover:bg-blue-700 hover:text-white focus:outline-none">View Details</button>
                                    </td>
                          </tr>
                          <tr>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="flex items-center">
                                            <div>
                                                <div class="text-sm leading-5 text-gray-800">#1</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500">
                                        <div class="text-sm leading-5 text-blue-900">Damilare Anjorin</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">[email protected]</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">+2348106420637</td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b text-blue-900 border-gray-500 text-sm leading-5">
                                        <span class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight">
                                        <span aria-hidden class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"></span>
                                        <span class="relative text-xs">disabled</span>
                                    </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-500 text-blue-900 text-sm leading-5">September 12</td>
                                    <td class="px-6 py-4 whitespace-no-wrap text-right border-b border-gray-500 text-sm leading-5">
                                        <button class="px-5 py-2 border-blue-500 border text-blue-500 rounded transition duration-300 hover:bg-blue-700 hover:text-white focus:outline-none">View Details</button>
                                    </td>
                          </tr>
                        </tbody>
                    </table>
                  <div class="sm:flex-1 sm:flex sm:items-center sm:justify-between mt-4 work-sans">
        <div>
            <p class="text-sm leading-5 text-blue-700">
                Showing
                <span class="font-medium">1</span>
                to
                <span class="font-medium">200</span>
                of
                <span class="font-medium">2000</span>
                results
            </p>
        </div>
        <div>
            <nav class="relative z-0 inline-flex shadow-sm">
                <div	>
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="Previous" v-on:click.prevent="changePage(pagination.current_page - 1)">
                        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>
                <div>
                    <a href="#" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-blue-700 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-tertiary active:text-gray-700 transition ease-in-out duration-150 hover:bg-tertiary">
                        1
                    </a>
                  <a href="#" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-blue-600 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-tertiary active:text-gray-700 transition ease-in-out duration-150 hover:bg-tertiary">
                        2
                    </a>
                   <a href="#" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-blue-600 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-tertiary active:text-gray-700 transition ease-in-out duration-150 hover:bg-tertiary">
                        3
                    </a>
                </div>
                <div v-if="pagination.current_page < pagination.last_page">
                    <a href="#" class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="Next">
                        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                        </svg>
                    </a>
                </div>
            </nav>
        </div>
    </div>
                </div>
            </div>

How to make a Table with Tailwind CSS?

Install tailwind css of verion 1.5.2

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.5.2

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to make a Table component

  • -my-2
  • py-2
  • overflow-x-auto
  • sm:-mx-6
  • sm:px-6
  • lg:-mx-8
  • pr-10
  • lg:px-8
  • inline-block
  • w-full
  • py-4
  • overflow-hidden
  • bg-white
  • px-12
  • flex
  • inline-flex
  • w-7/12
  • px-2
  • lg:px-6
  • h-12
  • bg-transparent
  • flex-wrap
  • h-full
  • mb-6
  • relative
  • border-r-0
  • border-none
  • lg:px-3
  • text-grey-dark
  • text-sm
  • w-4
  • lg:w-auto
  • flex-shrink
  • flex-grow
  • flex-auto
  • w-px
  • flex-1
  • border-l-0
  • px-3
  • text-xxs
  • lg:text-xs
  • lg:text-base
  • text-gray-500
  • min-w-full
  • px-8
  • pt-3
  • px-6
  • py-3
  • border-b-2
  • border-gray-300
  • text-left
  • text-blue-500
  • border-b
  • border-gray-500
  • text-gray-800
  • text-blue-900
  • py-1
  • text-green-900
  • absolute
  • bg-green-200
  • text-xs
  • text-right
  • px-5
  • border-blue-500
  • hover:bg-blue-700
  • hover:text-white
  • text-red-900
  • bg-red-200
  • text-orange-900
  • bg-orange-200
  • sm:flex-1
  • sm:flex
  • mt-4
  • text-blue-700
  • z-0
  • hover:text-gray-400
  • focus:z-10
  • focus:border-blue-300
  • active:bg-gray-100
  • active:text-gray-500
  • h-5
  • w-5
  • -ml-px
  • px-4
  • active:bg-tertiary
  • active:text-gray-700
  • hover:bg-tertiary
  • text-blue-600

88 steps to make a Table component with Tailwind CSS

  1. Control the vertical margin of an element to -0.5rem using the -my-2 utilities.

  2. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  3. Use overflow-x-auto to allow horizontal scrolling if needed.

  4. Control the horizontal margin of an element to -1.5rem at only small screen sizes using the sm:-mx-6 utilities.

  5. Control the horizontal padding of an element to 1.5rem at only small screen sizes using the sm:px-6 utilities.

  6. Control the horizontal margin of an element to -2rem at only large screen sizes using the lg:-mx-8 utilities.

  7. Control the padding on right side of an element to 2.5rem using the pr-10 utilities.

  8. Control the horizontal padding of an element to 2rem at only large screen sizes using the lg:px-8 utilities.

  9. Use inline-block utilities to wrap the element to prevent the text inside from extending beyond its parent.

  10. Use w-full to set an element to a 100% based width.

  11. Control the vertical padding of an element to 1rem using the py-4 utilities.

  12. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  13. Control the background color of an element to white using the bg-white utilities.

  14. Control the horizontal padding of an element to 3rem using the px-12 utilities.

  15. Use flex to create a block-level flex container.

  16. Use inline-flex to create an inline flex container that flows with text.

  17. Use w-7/12 to set an element to a fixed width(7/12).

  18. Control the horizontal padding of an element to 0.5rem using the px-2 utilities.

  19. Control the horizontal padding of an element to 1.5rem at only large screen sizes using the lg:px-6 utilities.

  20. Use h-12 to set an element to a fixed height(3rem).

  21. Control the background color of an element to transparent using the bg-transparent utilities.

  22. Use flex to create a block-level flex container.

  23. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  24. Control the margin on bottom side of an element to 1.5rem using the mb-6 utilities.

  25. Use relative to position an element according to the normal flow of the document.

  26. Control the border color of an element to r-0 using the border-r-0 utilities.

  27. Control the border color of an element to none using the border-none utilities.

  28. Control the horizontal padding of an element to 0.75rem at only large screen sizes using the lg:px-3 utilities.

  29. Control the text color of an element to grey-dark using the text-grey-dark utilities.

  30. Control the text color of an element to sm using the text-sm utilities.

  31. Use w-4 to set an element to a fixed width(1rem).

  32. The w-auto utility can be useful if you need to remove an element’s assigned width under a specific condition, like at a particular breakpoint.

  33. Use flex to create a block-level flex container.

  34. Use flex to create a block-level flex container.

  35. Use flex to create a block-level flex container.

  36. Use w-px to set an element to a fixed width(px).

  37. Use flex to create a block-level flex container.

  38. Control the border color of an element to l-0 using the border-l-0 utilities.

  39. Control the horizontal padding of an element to 0.75rem using the px-3 utilities.

  40. Control the text color of an element to xxs using the text-xxs utilities.

  41. Control the text color of an element to xs at only large screen sizes using the lg:text-xs utilities.

  42. Control the text color of an element to base at only large screen sizes using the lg:text-base utilities.

  43. Control the text color of an element to gray-500 using the text-gray-500 utilities.

  44. Set the minimum width/height of an element using the min-w-full utilities.

  45. Control the horizontal padding of an element to 2rem using the px-8 utilities.

  46. Control the padding on top side of an element to 0.75rem using the pt-3 utilities.

  47. Control the horizontal padding of an element to 1.5rem using the px-6 utilities.

  48. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  49. Control the border color of an element to b-2 using the border-b-2 utilities.

  50. Control the border color of an element to gray-300 using the border-gray-300 utilities.

  51. Control the text color of an element to left using the text-left utilities.

  52. Control the text color of an element to blue-500 using the text-blue-500 utilities.

  53. Control the border color of an element to b using the border-b utilities.

  54. Control the border color of an element to gray-500 using the border-gray-500 utilities.

  55. Control the text color of an element to gray-800 using the text-gray-800 utilities.

  56. Control the text color of an element to blue-900 using the text-blue-900 utilities.

  57. Control the vertical padding of an element to 0.25rem using the py-1 utilities.

  58. Control the text color of an element to green-900 using the text-green-900 utilities.

  59. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  60. Control the background color of an element to green-200 using the bg-green-200 utilities.

  61. Control the text color of an element to xs using the text-xs utilities.

  62. Control the text color of an element to right using the text-right utilities.

  63. Control the horizontal padding of an element to 1.25rem using the px-5 utilities.

  64. Control the border color of an element to blue-500 using the border-blue-500 utilities.

  65. Control the background color of an element to blue-700 using the hover:bg-blue-700 utilities on hover.

  66. Control the text color of an element to white on hover using the hover:text-white utilities.

  67. Control the text color of an element to red-900 using the text-red-900 utilities.

  68. Control the background color of an element to red-200 using the bg-red-200 utilities.

  69. Control the text color of an element to orange-900 using the text-orange-900 utilities.

  70. Control the background color of an element to orange-200 using the bg-orange-200 utilities.

  71. Use flex to create a block-level flex container at only small screen sizes.

  72. Use flex to create a block-level flex container at only small screen sizes.

  73. Control the margin on top side of an element to 1rem using the mt-4 utilities.

  74. Control the text color of an element to blue-700 using the text-blue-700 utilities.

  75. Control the stack order (or three-dimensional positioning) of an element to 0 in Tailwind, regardless of order it has been displayed, using the z-0 utilities.

  76. Control the text color of an element to gray-400 on hover using the hover:text-gray-400 utilities.

  77. Control the stack order (or three-dimensional positioning) of an element to 10 on focus in Tailwind, regardless of order it has been displayed, using the focus:z-10 utilities.

  78. Control the border color of an element to blue-300 using the focus:border-blue-300 utilities on focus.

  79. Control the background color of an element to gray-100 using the active:bg-gray-100 utilities on active.

  80. Control the text color of an element to gray-500 on active using the active:text-gray-500 utilities.

  81. Use h-5 to set an element to a fixed height(1.25rem).

  82. Use w-5 to set an element to a fixed width(1.25rem).

  83. Control the margin on left side of an element to px using the -ml-px utilities.

  84. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  85. Control the background color of an element to tertiary using the active:bg-tertiary utilities on active.

  86. Control the text color of an element to gray-700 on active using the active:text-gray-700 utilities.

  87. Control the background color of an element to tertiary using the hover:bg-tertiary utilities on hover.

  88. Control the text color of an element to blue-600 using the text-blue-600 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Table components, learn and follow along to implement your own components.