Published on

How To Make A Sidebar Purple With Tailwind CSS In 5 Easy Steps

Tags
TabsWidget
Sidebar Purple

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 Sidebar Purple ui component

Elegant sidebar purple dor dashboard

Why use Tailwind CSS to create a Sidebar Purple ui component?

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

The preview of Sidebar Purple ui component

Free download of the Sidebar Purple's source code

The source code of Sidebar Purple ui component

<div>
      <nav class="flex flex-col bg-purple-900 w-64 h-screen px-4 tex-gray-900 border border-purple-900">
        <div class="flex flex-wrap mt-8">
          <div class="w-1/2">
            <img
              src="https://randomuser.me/api/portraits/women/27.jpg"
              class="mx-auto w-20 h-20 rounded-full"
            />
          </div>
          <div class="w-1/2">
            <span class="font-semibold text-white">Ava Harper</span>
            <button class="bg-green-500 text-white px-4 py-2 rounded-md border border-blue-500 hover:bg-white hover:text-green-500">
              Premium
            </button>
          </div>
        </div>
        <div class="mt-10 mb-4">
          <ul class="ml-4">
            <li class="mb-2 px-4 py-4 text-gray-100 flex flex-row  border-gray-300 hover:text-black   hover:bg-gray-300  hover:font-bold rounded rounded-lg">
              <span>
                <svg class="fill-current h-5 w-5 " viewBox="0 0 24 24">
                  <path
                    d="M16 20h4v-4h-4m0-2h4v-4h-4m-6-2h4V4h-4m6
                        4h4V4h-4m-6 10h4v-4h-4m-6 4h4v-4H4m0 10h4v-4H4m6
                        4h4v-4h-4M4 8h4V4H4v4z"
                  ></path>
                </svg>
              </span>
              <a href="#">
                <span class="ml-2">Dashboard</span>
              </a>
            </li>
            <li class="mb-2 px-4 py-4 text-gray-100 flex flex-row  border-gray-300 hover:text-black   hover:bg-gray-300  hover:font-bold rounded rounded-lg">
              <span>
                <svg
                  class="fill-current h-5 w-5 "
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7Z"
                    fill="currentColor"
                  />
                  <path
                    d="M16 15C16 14.4477 15.5523 14 15 14H9C8.44772 14 8 14.4477 8 15V21H6V15C6 13.3431 7.34315 12 9 12H15C16.6569 12 18 13.3431 18 15V21H16V15Z"
                    fill="currentColor"
                  />
                </svg>
              </span>
              <a href="#">
               
                <span class="ml-2">Customers</span>
              </a>
            </li>
            <li class="mb-2 px-4 py-4 text-gray-100 flex flex-row  border-gray-300 hover:text-black   hover:bg-gray-300  hover:font-bold rounded rounded-lg">
              <span>
                <svg class="fill-current h-5 w-5 " viewBox="0 0 24 24">
                  <path
                    d="M19 19H5V8h14m-3-7v2H8V1H6v2H5c-1.11 0-2 .89-2
                        2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0
                        00-2-2h-1V1m-1 11h-5v5h5v-5z"
                  ></path>
                </svg>
              </span>
              <a href="#">
               
                <span class="ml-2">Milestones</span>
              </a>
            </li>
            <li class="mb-2 px-4 py-4 text-gray-100 flex flex-row  border-gray-300 hover:text-black   hover:bg-gray-300  hover:font-bold rounded rounded-lg">
              <span>
                <svg class="fill-current h-5 w-5" viewBox="0 0 24 24">
                  <path
                    d="M12 4a4 4 0 014 4 4 4 0 01-4 4 4 4 0 01-4-4 4 4 0
                        014-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4
                        8-4z"
                  ></path>
                </svg>
              </span>
              <a href="#">
                <span class="ml-2">Team</span>
              </a>
            </li>
            <li class="mb-2 px-4 py-4 text-gray-100 flex flex-row  border-gray-300 hover:text-black   hover:bg-gray-300  hover:font-bold rounded rounded-lg">
              <span>
                <svg class="fill-current h-5 w-5 " viewBox="0 0 24 24">
                  <path
                    d="M12 13H7v5h5v2H5V10h2v1h5v2M8
                        4v2H4V4h4m2-2H2v6h8V2m10 9v2h-4v-2h4m2-2h-8v6h8V9m-2
                        9v2h-4v-2h4m2-2h-8v6h8v-6z"
                  ></path>
                </svg>
              </span>
              <a href="#">
                <span class="ml-2">Tasks</span>
              </a>
            </li>
            <li class="mb-2 px-4 py-4 text-gray-100 flex flex-row  border-gray-300 hover:text-black   hover:bg-gray-300  hover:font-bold rounded rounded-lg">
              <span>
                <svg
                  class="fill-current h-5 w-5 "
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7 3C8.86384 3 10.4299 4.27477 10.874 6H19V8H10.874C10.4299 9.72523 8.86384 11 7 11C4.79086 11 3 9.20914 3 7C3 4.79086 4.79086 3 7 3ZM7 9C8.10457 9 9 8.10457 9 7C9 5.89543 8.10457 5 7 5C5.89543 5 5 5.89543 5 7C5 8.10457 5.89543 9 7 9Z"
                    fill="currentColor"
                  />
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M17 20C15.1362 20 13.5701 18.7252 13.126 17H5V15H13.126C13.5701 13.2748 15.1362 12 17 12C19.2091 12 21 13.7909 21 16C21 18.2091 19.2091 20 17 20ZM17 18C18.1046 18 19 17.1046 19 16C19 14.8954 18.1046 14 17 14C15.8954 14 15 14.8954 15 16C15 17.1046 15.8954 18 17 18Z"
                    fill="currentColor"
                  />
                </svg>
              </span>
              <a href="#">
                <span class="ml-2">Settings</span>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </div>

How to create a Sidebar Purple with Tailwind CSS?

Install tailwind css of verion 1.6.2

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

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

All the unility class needed to create a Sidebar Purple component

  • flex
  • flex-col
  • bg-purple-900
  • w-64
  • h-screen
  • px-4
  • border-purple-900
  • flex-wrap
  • mt-8
  • w-1/2
  • mx-auto
  • w-20
  • h-20
  • text-white
  • bg-green-500
  • py-2
  • border-blue-500
  • hover:bg-white
  • hover:text-green-500
  • mt-10
  • mb-4
  • ml-4
  • mb-2
  • py-4
  • text-gray-100
  • flex-row
  • border-gray-300
  • hover:text-black
  • hover:bg-gray-300
  • h-5
  • w-5
  • ml-2

32 steps to create a Sidebar Purple component with Tailwind CSS

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

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

  3. Control the background color of an element to purple-900 using the bg-purple-900 utilities.

  4. Use w-64 to set an element to a fixed width(16rem).

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

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

  7. Control the border color of an element to purple-900 using the border-purple-900 utilities.

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

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

  10. Use w-1/2 to set an element to a fixed width(1/2).

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

  12. Use w-20 to set an element to a fixed width(5rem).

  13. Use h-20 to set an element to a fixed height(5rem).

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

  15. Control the background color of an element to green-500 using the bg-green-500 utilities.

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

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

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

  19. Control the text color of an element to green-500 on hover using the hover:text-green-500 utilities.

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

  21. Control the margin on bottom side of an element to 1rem using the mb-4 utilities.

  22. Control the margin on left side of an element to 1rem using the ml-4 utilities.

  23. Control the margin on bottom side of an element to 0.5rem using the mb-2 utilities.

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

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

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

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

  28. Control the text color of an element to black on hover using the hover:text-black utilities.

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

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

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

  32. Control the margin on left side of an element to 0.5rem using the ml-2 utilities.

Conclusion

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