## Introduction While developing the [Financial data analyzer][1] series, a dashboard became necessary for presenting the analyzed data intuitively and visually appealingly. Although I'm not a UI/UX designer, I appreciate well-designed interfaces with modern visual cues. This article details my process of creating such a dashboard from scratch with TailwindCSS v4 without using external frameworks. ## Prerequisite This article assumes you're familiar with HTML5, CSS3, and JavaScript (ES syntax). Familiarity with TailwindCSS is also helpful. I'll present two ways to set up your development environment for working with TailwindCSS from scratch, without external frameworks. ### Setup for Tailwind CSS v4 for Node.js users To get started with Tailwind CSS v4 for your dashboard project using Node.js, follow these steps: 1. Create your project directory (e.g., `finance-dashboard`) and navigate into it: ```sh mkdir finance-dashboard cd finance-dashboard ``` 2. Install Tailwind CSS, the Tailwind CSS CLI, and the `@tailwindcss/forms` plugin as development dependencies: ```sh npm install -D tailwindcss @tailwindcss/cli @tailwindcss/forms ``` 3. Create an input CSS file (e.g., `assets/css/input.css`) and add the following: ```css :assets/css/input.css: @import "tailwindcss"; @plugin "@tailwindcss/forms"; @custom-variant dark (&:where(.dark, .dark *)); @layer base { html { scroll-behavior: smooth; } body { overflow-y: scroll; font-family: "Fira Sans", sans-serif; } input[type], textarea, select { @apply appearance-none border-none ring-0 outline-hidden; &:focus { @apply border-none ring-0 outline-hidden; } &:focus-visible { @apply border-none ring-0 outline-hidden; } } button { @apply cursor-pointer; } } ``` This CSS file imports Tailwind CSS, registers the `@tailwindcss/forms` plugin and sets up a custom `dark` variant for enabling dark mode via CSS classes. It also includes basic styling for smooth scrolling, font family, and form elements.

Note: TailwindCSS v4

We are using strictly TailwindCSS v4 here hence we ditched tailwind.config.[j|t]s file. You can read more in my v3 to v4 migration guide with plugins.

4. Create your main HTML file (e.g., `index.html`) with the following structure: ```html :index.html: Dashboard | John Owolabi Idogun ``` This is a basic HTML structure that includes Google Fonts, [ApexCharts (for placeholder charts)][2], and links to your compiled CSS and JavaScript files. The body includes classes for light and dark modes. 5. Generate the compiled CSS file, `assets/css/style.css`: ```sh npx tailwindcss -i ./assets/css/input.css -o ./assets/css/style.css --watch --minify ``` ### Tailwind CSS v4 Setup without Node.js For those who prefer not to use Node.js, you can use TailwindCSS's [Standalone CLI][3]. Follow the guide to install it based on your operating system. Then, complete steps 1, 3, and 4 from the Node.js setup, skipping steps 2 and 5. To compile your CSS, run: ```sh ./tailwindcss -i input.css -o output.css --watch --minify ``` This setup provides a foundation for building the dashboard with Tailwind CSS v4, utilizing vanilla JavaScript for interactivity and ApexCharts for data visualization. ## Live version

## Source code

Sirneij/finance-dashboard

An aesthetic personal finance dashboard built with vanilla JS, tailwindcss v4 and HTML5

html5javascriptcss3

## Implementation ### Step 1: Header and Sidebar First off, we will build out the header and sidebar of the dashboard. Let's add this to the body of the page: ```html

``` The entire page is meant to take the height of the screen (`h-screen`). This ensures the page remains in view. The sidebar inherits this property. It contains both icons and labels. We'll use both so that when the sidebar is fully open, both are visible, but when it's collapsed, only the icons are displayed. Next, we will add the main content markup: ```html

Dashboard

``` At the top, we have the header with the "Dashboard" inscription. It also houses the icons that toggle light/dark modes. The `main` page takes the remaining height available on the page (`h-[calc(100vh-4rem)]`) and allows vertical scrolling in case of overflow (`overflow-y-auto`). The remaining markups are easy to follow, so we won't paste them here. You can always visit the project's repo to copy them. They look like this for now: ![Dark themed dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx3qtj3qh7dnc32z1jhx.png "Dark themed dashboard - a sleek, dark interface") ![Light themed dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqj9egjum5cj9d0nbg6x.png "Light themed dashboard - a clean, light interface") We'll proceed to write the theme-switching logic and responsive triggers. ### Step 2: Responsive triggers and Theme Switching logic Make your `assets/js/app.js` look like this: ```js :assets/js/app.js: class SidebarController { constructor() { this.isSidebarOpen = true; this.isMobile = window.innerWidth < 768; this.navLinks = document.querySelectorAll("[data-nav-link]"); this.host = window.location.origin; // Cache DOM elements this.sidebar = document.getElementById("sidebar"); this.main = document.getElementById("main"); this.mobileOverlay = document.getElementById("mobile-overlay"); this.logo = document.getElementById("logo"); this.togglePath = document.getElementById("toggle-path"); this.navLabels = document.querySelectorAll("[data-nav-label]"); // Bind methods this.checkWidth = this.checkWidth.bind(this); this.toggle = this.toggle.bind(this); // Set initial state requestAnimationFrame(() => { this.checkWidth(); this.updateUI(true); // true for initial load this.highlightCurrentPage(); }); window.addEventListener("resize", this.checkWidth); } checkWidth() { const wasMobile = this.isMobile; this.isMobile = window.innerWidth < 768; if (wasMobile !== this.isMobile) { this.isSidebarOpen = !this.isMobile; this.updateUI(); } } toggle() { this.isSidebarOpen = !this.isSidebarOpen; this.updateUI(); } updateUI(isInitialLoad = false) { // Mobile specific if (this.isMobile) { this.sidebar.classList.toggle("-translate-x-full", !this.isSidebarOpen); this.main.classList.toggle("overflow-hidden", this.isSidebarOpen); this.mobileOverlay?.classList.toggle("hidden", !this.isSidebarOpen); // Reset desktop classes this.main.classList.remove("md:ml-64", "md:ml-20"); } else { // Desktop specific if (isInitialLoad) { // Force initial margin on load this.main.classList.add("md:ml-64"); } else { this.main.classList.toggle("md:ml-64", this.isSidebarOpen); this.main.classList.toggle("md:ml-20", !this.isSidebarOpen); } // Reset mobile classes this.sidebar.classList.remove("-translate-x-full"); this.main.classList.remove("overflow-hidden"); this.mobileOverlay?.classList.add("hidden"); } // Common updates this.sidebar.classList.toggle("w-64", this.isSidebarOpen); this.sidebar.classList.toggle("w-20", !this.isSidebarOpen); // Update logo if (this.logo) { const logoURL = this.host.includes("sirneij.github.io") ? `${this.host}/finance-dashboard/assets/images/logo.svg` : "./assets/images/logo.svg"; const logoSmallURL = this.host.includes("sirneij.github.io") ? `${this.host}/finance-dashboard/assets/images/logo-small.svg` : "./assets/images/logo-small.svg"; this.logo.src = this.isSidebarOpen ? logoURL.replace("null", ".") : logoSmallURL.replace("null", "."); this.logo.classList.toggle("h-12", this.isSidebarOpen); this.logo.classList.toggle("h-8", !this.isSidebarOpen); } // Update toggle icon if (this.togglePath) { this.togglePath.setAttribute( "d", this.isSidebarOpen ? "M15 19l-7-7 7-7" : "M9 19l7-7-7-7" ); } // Update labels this.navLabels.forEach((label) => { label.style.display = this.isSidebarOpen ? "block" : "none"; }); } highlightCurrentPage() { const currentPath = window.location.pathname; this.navLinks.forEach((link) => { const linkPath = link.getAttribute("href"); const isActive = currentPath === linkPath || (currentPath === "/" && linkPath === "/") || (currentPath !== "/" && linkPath !== "/" && currentPath.includes(linkPath)) || (currentPath === "/" && linkPath === "index.html"); // Remove existing active classes link.classList.remove( "bg-gray-100", "text-primary-600", "dark:bg-gray-700", "dark:text-primary-500" ); // Add active classes if current page if (isActive) { link.classList.add( "bg-gray-100", "text-primary-600", "dark:bg-gray-700", "dark:text-primary-500" ); } }); } } // Theme handling const themeController = { init() { const userTheme = localStorage.getItem("theme"); const systemTheme = window.matchMedia("(prefers-color-scheme: dark)"); const theme = userTheme || (systemTheme.matches ? "dark" : "light"); this.updateTheme(theme === "dark"); systemTheme.addEventListener("change", (e) => { if (!localStorage.getItem("theme")) { this.updateTheme(e.matches); } }); }, toggle() { const isDark = document.documentElement.classList.contains("dark"); this.updateTheme(!isDark); localStorage.setItem("theme", !isDark ? "dark" : "light"); }, updateTheme(isDark) { document.documentElement.classList.toggle("dark", isDark); document.getElementById("sun-icon").classList.toggle("hidden", !isDark); document.getElementById("moon-icon").classList.toggle("hidden", isDark); }, }; // Initialize when DOM is ready document.addEventListener("DOMContentLoaded", () => { window.sidebarController = new SidebarController(); themeController.init(); }); ``` This JavaScript code sets up the responsive sidebar and theme-switching logic for the dashboard. `SidebarController` handles the sidebar's behavior on different screen sizes, including toggling the sidebar and highlighting the current page in the navigation. The `ThemeController` manages the theme (light/dark) based on user preference or system settings, persisting the choice in local storage. The code uses classes and event listeners for efficient state management and dynamic UI updates. I opted for classes due to state management issues, especially `isSidebarOpen` and `isMobile`. Binding them up here makes it very easy to elegantly manage. The collapsed versions should look like these: ![Dark themed dashboard (collapsed)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnwxwhhme4kd67ipm00x.png "Dark themed dashboard - a sleek, dark interface") ![Light themed dashboard (collapsed)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zxflmyzm331ak4c70x2.png "Light themed dashboard - a clean, light interface") ### Step 3: ApexCharts configurations For a little taste of the awesome and relatively lightweight charting library (the reason it was preferred compared to Chart.js): ```js :assets/js/index.chart.js: function initializeMonthlyChart() { const options = { series: [ { name: "Income", data: [3000, 3500, 4000, 3800, 4200, 4500], }, { name: "Expenses", data: [2500, 2800, 3000, 2900, 3100, 3300], }, { name: "Savings", data: [500, 700, 1000, 900, 1100, 1200], }, ], chart: { type: "area", height: 300, toolbar: { show: true, tools: { download: true, selection: true, zoom: true, zoomin: true, zoomout: true, pan: true, reset: true, }, autoSelected: "zoom", }, fontFamily: "inherit", background: "transparent", }, colors: ["#22c55e", "#ef4444", "#3b82f6"], fill: { type: "gradient", gradient: { shadeIntensity: 1, inverseColors: false, opacityFrom: 0.5, opacityTo: 0, stops: [0, 90, 100], }, }, dataLabels: { enabled: false }, stroke: { width: 2, curve: "smooth", }, grid: { borderColor: "rgba(156, 163, 175, 0.1)", strokeDashArray: 4, yaxis: { lines: { show: true } }, xaxis: { lines: { show: false } }, }, xaxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], labels: { style: { colors: "rgba(156, 163, 175, 0.9)", }, }, }, yaxis: { labels: { formatter: (value) => `$${value}`, style: { colors: "rgba(156, 163, 175, 0.9)", }, }, }, legend: { show: false, }, theme: { mode: document.documentElement.classList.contains("dark") ? "dark" : "light", }, }; return new ApexCharts( document.querySelector("#monthly-summary-chart"), options ); } function initializeFinancialChart() { const options = { series: [ { name: "Income", data: [1500, 2000, 1800, 2200, 1900], }, { name: "Expenses", data: [1200, 1400, 1100, 1600, 1300], }, { name: "Balance", data: [300, 600, 700, 600, 600], }, ], chart: { type: "area", height: "100%", toolbar: { show: true, tools: { download: true, selection: true, zoom: true, zoomin: true, zoomout: true, pan: true, reset: true, }, autoSelected: "zoom", }, fontFamily: "inherit", background: "transparent", }, colors: ["#22c55e", "#ef4444", "#3b82f6"], fill: { type: "gradient", gradient: { shadeIntensity: 1, inverseColors: false, opacityFrom: 0.5, opacityTo: 0, stops: [0, 90, 100], }, }, dataLabels: { enabled: false }, stroke: { width: 2, curve: "smooth", dashArray: [0, 0, 5], }, grid: { borderColor: "rgba(156, 163, 175, 0.1)", strokeDashArray: 4, yaxis: { lines: { show: true } }, xaxis: { lines: { show: false } }, }, xaxis: { categories: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"], labels: { style: { colors: "rgba(156, 163, 175, 0.9)", }, }, }, yaxis: { labels: { formatter: (value) => `$${value}`, style: { colors: "rgba(156, 163, 175, 0.9)", }, }, }, legend: { show: false, }, theme: { mode: document.documentElement.classList.contains("dark") ? "dark" : "light", }, }; return new ApexCharts( document.querySelector("#financial-trends-chart"), options ); } // Initialize charts when DOM is loaded document.addEventListener("DOMContentLoaded", () => { const monthlyChart = initializeMonthlyChart(); const financialChart = initializeFinancialChart(); monthlyChart.render(); financialChart.render(); // Handle theme changes const observer = new MutationObserver(() => { const isDark = document.documentElement.classList.contains("dark"); monthlyChart.updateOptions({ theme: { mode: isDark ? "dark" : "light" } }); financialChart.updateOptions({ theme: { mode: isDark ? "dark" : "light" }, }); }); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); // Handle resize window.addEventListener( "resize", debounce(() => { monthlyChart.updateOptions({}); financialChart.updateOptions({}); }, 300) ); }); function debounce(fn, ms) { let timer; return function () { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, arguments), ms); }; } ``` This code configures and initializes ApexCharts for the dashboard. `initializeMonthlyChart` and `initializeFinancialChart` functions define the options for two different area charts, including series data, chart type, colors, and grid settings. The code also includes a `MutationObserver` to handle theme changes and a `debounce` function to optimize resize event handling, ensuring the charts are responsive and adapt to the selected theme. There are other pages implemented and the repo has them. You can also preview its live version. ## Outro Enjoyed this article? I'm a Software Engineer, Technical Writer, and Technical Support Engineer actively seeking new opportunities, particularly in areas related to web security, finance, healthcare, and education. If you think my expertise aligns with your team's needs, let's chat! You can find me on [LinkedIn](https://www.linkedin.com/in/john-owolabi-idogun/) and [X](https://x.com/Sirneij). I am also an [email](mailto:john@johnowolabiidogun.dev) away. If you found this article valuable, consider sharing it with your network to help spread the knowledge! [1]: https://johnowolabiidogun.dev/blog?series=679c6ddc40997d46a81bd527 "Building an AI-powered Financial Data Analyzer" [2]: https://apexcharts.com/ "APEXCHARTS.JS - Modern & Interactive Open-source Charts" [3]: https://tailwindcss.com/blog/standalone-cli "Standalone CLI: Use Tailwind CSS without Node.js"

Blog Posts