March 4, 2025 - Building a Simple Dashboard with Tailwind CLI

Tailwind CSS

Let's build a simple dashboard shell using Tailwind CSS's command-line approach. This method is perfect for quick prototyping and smaller projects where you don't need a full build system.

Step 1: Set Up Your Project

First, create a new project folder and initialize it:

mkdir tailwind-dashboard
cd tailwind-dashboard
npm init -y

Step 2: Install Tailwind CSS

Install Tailwind CSS as a development dependency:

npm install tailwindcss @tailwindcss/cli

Step 3: Create CSS Input File

Create a source CSS file that includes Tailwind:

// filepath: input.css
@import "tailwindcss";

Step 4: Create HTML File

Create an index.html file with our dashboard structure:

// filepath: index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Dashboard</title>
  <link rel="stylesheet" href="./output.css">
</head>

<body class="bg-gray-100">
  <div class="min-h-screen flex flex-col">
    <header class="bg-header shadow-md">
      <nav class="bg-gray-800">
        <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
          <div class="relative flex h-16 items-center justify-between">

            <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
              <div class="flex shrink-0 items-center">
                <img class="h-8 w-auto" src="https://picsum.photos/100" alt="Your Company">
              </div>
              <div class="hidden sm:ml-6 sm:block">
                <div class="flex space-x-4">
                  <a href="#" class="rounded-md bg-gray-900 px-3 py-2 text-sm font-medium text-white"
                    aria-current="page">FIRST</a>
                  <a href="#"
                    class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">SECOND</a>
                  <a href="#"
                    class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">THIRD</a>
                  <a href="#"
                    class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">FOURTH</a>
                </div>
              </div>
            </div>
            <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
              <button type="button"
                class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden">
                <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                  <path stroke-linecap="round" stroke-linejoin="round"
                    d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
                </svg>
              </button>


              <div class="relative ml-3">
                <div>
                  <button type="button"
                    class="relative flex rounded-full bg-gray-800 text-sm focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden"
                    id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                    <img class="size-8 rounded-full" src="https://picsum.photos/256/256" alt="">
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="sm:hidden" id="mobile-menu">
          <div class="space-y-1 px-2 pt-2 pb-3">
            <a href="#" class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white"
              aria-current="page">FIRST</a>
            <a href="#"
              class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">SECOND</a>
            <a href="#"
              class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">THIRD</a>
            <a href="#"
              class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">FOURTH</a>
          </div>
        </div>
      </nav>
    </header>

    <div class="flex flex-1 p-4">
      <aside id="sidebar" class="bg-sidebar w-64 fixed md:static">
        SIDEBAR
      </aside>

      <main class="flex-1">
        MAIN
      </main>
    </div>

    <footer class="bg-white py-4 px-6 shadow-inner">
      FOOTER
    </footer>
  </div>
</body>

</html>

Step 5: Build CSS

Now, let's use the Tailwind CLI to build our CSS file:

npx @tailwindcss/cli -i input.css -o output.css --watch

This command:

Takes our input.css with the Tailwind directives Processes it and outputs to output.css The --watch flag keeps the process running and rebuilds when files change

Step 6: View Your Dashboard

Open index.html in your browser to see your dashboard. As you modify your HTML, the CSS will automatically update thanks to the --watch flag.

Extending the Dashboard

Note that you have the basic shell, enhance it for your use case

Production Build

When you're ready for production, generate a minified CSS file:

npx tailwindcss -i input.css -o output.css --minify

This creates a smaller CSS file optimized for production.

Conclusion

You've successfully created a simple dashboard shell using Tailwind CSS's CLI approach. This method is perfect for prototyping and smaller projects where you don't need a complex build system.

The Tailwind CLI provides a streamlined workflow that makes it easy to create beautiful, responsive interfaces without the complexity of larger build systems.

For more information, check out the Tailwind CSS documentation.