Let's build: DaisyUI and Tailwind CSS dashboard - Part 1

Welcome to my multipart blog series where I'll be showing you how to build a sleek and modern dashboard using Tailwind CSS and DaisyUI.

In this series, we'll be taking a step-by-step approach to creating a fully functional dashboard that is both responsive and user-friendly. We'll start by setting up our project and getting familiar with the tools we'll be using, then move on to designing and implementing the different components of the dashboard.

Tailwind CSS is a highly customizable, low-level CSS framework that makes it easy to build professional-looking designs. It provides a set of utility classes that can be used to quickly and easily style elements on the page. DaisyUI is a set of pre-designed UI components built with Tailwind CSS that makes it easy to add a polished and consistent look to your project.

Throughout this series, I'll be providing helpful tips and tricks to make sure you get the most out of these tools, and I'll also be sharing my own personal experience and best practices for building dashboards. So whether you're a beginner or an experienced developer, you're sure to learn something new.

So grab a cup of coffee and let's get started building a beautiful dashboard with Tailwind and DaisyUI!

Step 1: Project Setup

First of we need to setup our project. We will be using Tailwind CLI and DaisyUI within multipage HTML files. However to make our lives easier we also be using http-server to serve our assets and run our project locally.

First up init our project in a new folder: run the following.

npm init -y

Change the settings as you see fit. Update you entry point file to ./dist/index.html inside of your package.json. Your package.json should look like this

{
  "name": "daisy-ui-dashboard",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Dylan Britz",
  "license": "ISC"
}

Next create a new folder and file we just mentioned above within the root of your project. It’s also good practice to setup git early on, so let’s go ahead and do that.

Run:

git init

If it has not created one by default, create a new file called .gitignore and add node_modules inside of the file and save.

Let’s go ahead and install tailwind css, copy and run the following commands inside your terminal:

npm install -D tailwindcss
npx tailwindcss init

You can read more about the tailwind setup here. Create a tailwind config file inside your root, the files is called, tailwind.config.js next up copy and paste the following inside of the file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./dist/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ok so here is a quick overview of how the tailwind cli works: first we create an input css file where we will import all of tailwinds necessary files, and when we run the tailwind cli it will parse and extract that css into pure vanilla css in an output file, we will then reference the output file inside of our html files.

First create a new file and folder within the root of your folder, src/input.css copy and paste the following into the new css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

To start the tailwind cli we will add a new script to our package.json, so add the following into the scripts object:

"tailwind": "npx tailwindcss -i ./src/input.css -o ./dist/styles/output.css --watch",

To test if it works run npm run tailwind and you should see the new styles/output.css created with some base css.

Congratulations you now have officially setup the Tailwind CLI!

Let’s go ahead and setup our http-server, for this we will be using http-server npm package to help us with this, this is useful for static sites where we do not want to setup a node server manually.

First install the package npm install --global http-server next add a start script to our package.json.

"start": "http-server ./dist -p 0 -c-1"

This script tells http-server to serve files from the ./dist directory, the flags -p 0 tells the http-server to use any available port, and the -c-1 disables caching. To test if our server works open the index.html file inside of our dist folder and add :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/output.css"></link>
    <title>Daisy UI Dashboard</title>
</head>
<body>
    <h1 class="text-xl">Hello World</h1>
</body>
</html>

Next run npm run start and open your browser and open your local server. you should see the following:

💡 Make sure your tailwind server is still running.

Next up is Daisy UI, kill all the services running in the terminals and let’s go ahead and install it: npm i daisyui open up your tailwind.config.js file and inside the plugins array add the following, require("daisyui") next open you index.html and add the following under the heading, <button *class*="btn">Button</button>

Before we test it out let’s make some adjustments to DaisyUI, so DaisyUI ships with multiple themes and they are all included by default. To help us not bloat our css we can specify which themes we want. First inside the tailwind.config.js file add the following after the plugin array.

daisyui: {
    themes: ["light", "dark"],
  },

This will ensure we only have two themes, The default dark and default light theme. One more plugin that we will use is the tailwind typography plugin, this will automatically add styles to certain elements such as p tags, heading tags, code tags etc. Read more about it here.

First install it like so:

npm install -D @tailwindcss/typography

Then add the plugin to your tailwind.config.jsfile.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./dist/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography'), require("daisyui")],
  daisyui: {
    themes: ["light", "dark"],
  },
}

Ok to test if everything is working run your server and start the tailwind cli, open the index.html file and this is what you should see:

Awesome stuff this concludes the setup of the project and the next step is to build our sign up page.