Published on

Beginners Guide: Build A Dashboard Layout With Tailwind CSS

Tags
AlpinejsPagesWidget
Dashboard Layout

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 Dashboard Layout ui component

Start layout for dashboard projects build with tailwindcss and alpinejs.

Why use Tailwind CSS to build a Dashboard Layout ui component?

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

The preview of Dashboard Layout ui component

Free download of the Dashboard Layout's source code

The source code of Dashboard Layout ui component

<div>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
    
    <div x-data="{ sidebarOpen: false, darkMode: false }" :class="{ 'dark': darkMode }">
        <div class="flex h-screen bg-gray-100 dark:bg-gray-800 font-roboto">
            <div :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false"
                class="fixed z-20 inset-0 bg-black opacity-50 transition-opacity lg:hidden"></div>
    
            <div :class="sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
                class="fixed z-30 inset-y-0 left-0 w-60 transition duration-300 transform bg-white dark:bg-gray-900 overflow-y-auto lg:translate-x-0 lg:static lg:inset-0">
                <div class="flex items-center justify-center mt-8">
                    <div class="flex items-center">
                        <span class="text-gray-800 dark:text-white text-2xl font-semibold">Dashboard</span>
                    </div>
                </div>
    
                <nav class="flex flex-col mt-10 px-4 text-center">
                    <a href="#"
                        class="py-2 text-sm text-gray-700 dark:text-gray-100 bg-gray-200 dark:bg-gray-800 rounded">Overview</a>
                    <a href="#"
                        class="mt-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100  hover:bg-gray-200 dark:hover:bg-gray-800 rounded">Tickets</a>
                    <a href="#"
                        class="mt-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 rounded">Ideas</a>
                    <a href="#"
                        class="mt-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 rounded">Contacts</a>
                    <a href="#"
                        class="mt-3 py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 rounded">Settings</a>
                </nav>
            </div>
    
            <div class="flex-1 flex flex-col overflow-hidden">
                <header class="flex justify-between items-center p-6">
                    <div class="flex items-center space-x-4 lg:space-x-0">
                        <button @click="sidebarOpen = true"
                            class="text-gray-500 dark:text-gray-300 focus:outline-none lg:hidden">
                            <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M4 6H20M4 12H20M4 18H11" stroke="currentColor" stroke-width="2"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </button>
    
                        <div>
                            <h1 class="text-2xl font-medium text-gray-800 dark:text-white">Overview</h1>
                        </div>
                    </div>
    
                    <div class="flex items-center space-x-4">
                        <button @click="darkMode = !darkMode"
                            class="flex text-gray-600 dark:text-gray-300 focus:outline-none" aria-label="Color Mode">
                            <svg x-show="darkMode" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
                                    clip-rule="evenodd" />
                            </svg>
                            <svg x-show="!darkMode" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
                            </svg>
                        </button>
                        <button class="flex text-gray-600 dark:text-gray-300 focus:outline-none">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </button>
    
                        <button class="flex text-gray-600 dark:text-gray-300 focus:outline-none">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </button>
    
                        <div x-data="{ dropdownOpen: false }" class="relative">
                            <button @click="dropdownOpen = ! dropdownOpen"
                                class="flex items-center space-x-2 relative focus:outline-none">
                                <h2 class="text-gray-700 dark:text-gray-300 text-sm hidden sm:block">Jones Ferdinand</h2>
                                <img class="h-9 w-9 rounded-full border-2 border-purple-500 object-cover"
                                    src="https://images.unsplash.com/photo-1553267751-1c148a7280a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
                                    alt="Your avatar">
                            </button>
    
                            <div class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-10"
                                x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform"
                                x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                                x-transition:leave="transition ease-in duration-75 transform"
                                x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
                                @click.away="dropdownOpen = false">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-600 hover:text-white">Profile</a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-600 hover:text-white">Tickets</a>
                                <a href="/login"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-600 hover:text-white">Logout</a>
                            </div>
                        </div>
                    </div>
                </header>
    
                <main class="flex-1 overflow-x-hidden overflow-y-auto">
                    <div class="container mx-auto px-6 py-8">
                        <div
                            class="grid place-items-center h-96 text-gray-500 dark:text-gray-300 text-xl border-4 border-gray-300 border-dashed">
                            Content
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>
</div>

How to build a Dashboard Layout with Tailwind CSS?

Install tailwind css of verion 3.0.18

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

<link href=https://tailwindcomponents.com/css/component.dashboard-layout.css rel="stylesheet">

All the unility class needed to build a Dashboard Layout component

  • flex
  • h-screen
  • bg-gray-100
  • dark:bg-gray-800
  • block
  • hidden
  • fixed
  • z-20
  • bg-black
  • lg:hidden
  • z-30
  • left-0
  • w-60
  • bg-white
  • dark:bg-gray-900
  • overflow-y-auto
  • lg:static
  • mt-8
  • text-gray-800
  • dark:text-white
  • text-2xl
  • flex-col
  • mt-10
  • px-4
  • text-center
  • py-2
  • text-sm
  • text-gray-700
  • dark:text-gray-100
  • bg-gray-200
  • mt-3
  • text-gray-600
  • dark:text-gray-400
  • hover:text-gray-700
  • hover:bg-gray-200
  • flex-1
  • overflow-hidden
  • p-6
  • text-gray-500
  • dark:text-gray-300
  • h-6
  • w-6
  • h-5
  • w-5
  • relative
  • sm:block
  • h-9
  • w-9
  • border-2
  • border-purple-500
  • absolute
  • right-0
  • mt-2
  • w-48
  • z-10
  • hover:bg-purple-600
  • hover:text-white
  • mx-auto
  • px-6
  • py-8
  • grid
  • h-96
  • text-xl
  • border-4
  • border-gray-300
  • border-dashed

66 steps to build a Dashboard Layout component with Tailwind CSS

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

  2. Use h-screen to make an element span the entire height of the viewport.

  3. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  4. Control the background color of an element to gray-800 using the dark:bg-gray-800 utilities in dark theme.

  5. Use inline utilities to put the element on its own line and fill its parent.

  6. Use hidden to set an element to display: none and remove it from the page layout.

  7. Use fixed to position an element relative to the browser window.

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

  9. Control the background color of an element to black using the bg-black utilities.

  10. Use hidden to set an element to display: none and remove it from the page layout at only large screen sizes.

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

  12. Use the left-0 utilities to set the left position of a positioned element to 0rem.

  13. Use w-60 to set an element to a fixed width(15rem).

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

  15. Control the background color of an element to gray-900 using the dark:bg-gray-900 utilities in dark theme.

  16. Use overflow-y-auto to allow vertical scrolling if needed.

  17. Use static to position an element according to the normal flow of the document at only large screen sizes.

  18. Control the margin on top side of an element to 2rem using the mt-8 utilities.

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

  20. Control the text color of an element to white in dark theme using the dark:text-white utilities.

  21. Control the text color of an element to 2xl using the text-2xl utilities.

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

  23. Control the margin on top side of an element to 2.5rem using the mt-10 utilities.

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

  25. Control the text color of an element to center using the text-center utilities.

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

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

  28. Control the text color of an element to gray-700 using the text-gray-700 utilities.

  29. Control the text color of an element to gray-100 in dark theme using the dark:text-gray-100 utilities.

  30. Control the background color of an element to gray-200 using the bg-gray-200 utilities.

  31. Control the margin on top side of an element to 0.75rem using the mt-3 utilities.

  32. Control the text color of an element to gray-600 using the text-gray-600 utilities.

  33. Control the text color of an element to gray-400 in dark theme using the dark:text-gray-400 utilities.

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

  35. Control the background color of an element to gray-200 using the hover:bg-gray-200 utilities on hover.

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

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

  38. Control the padding on all sides of an element to 1.5rem using the p-6 utilities.

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

  40. Control the text color of an element to gray-300 in dark theme using the dark:text-gray-300 utilities.

  41. Use h-6 to set an element to a fixed height(1.5rem).

  42. Use w-6 to set an element to a fixed width(1.5rem).

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

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

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

  46. Use inline utilities to put the element on its own line and fill its parent at only small screen sizes.

  47. Use h-9 to set an element to a fixed height(2.25rem).

  48. Use w-9 to set an element to a fixed width(2.25rem).

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

  50. Control the border color of an element to purple-500 using the border-purple-500 utilities.

  51. 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.

  52. Use the right-0 utilities to set the right position of a positioned element to 0rem.

  53. Control the margin on top side of an element to 0.5rem using the mt-2 utilities.

  54. Use w-48 to set an element to a fixed width(12rem).

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

  56. Control the background color of an element to purple-600 using the hover:bg-purple-600 utilities on hover.

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

  58. Control the horizontal margin of an element to auto using the mx-auto utilities.

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

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

  61. Use grid to create a grid container.

  62. Use h-96 to set an element to a fixed height(24rem).

  63. Control the text color of an element to xl using the text-xl utilities.

  64. Control the border color of an element to 1rem using the border-4 utilities.

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

  66. Control the border color of an element to dashed using the border-dashed utilities.

Conclusion

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