DaisyUI, Tailwind, Vue and Vite

I've decided to document how to set-up and use DaisyUI, with Vue and Tailwind, having used it recently in a client project. I added DaisyUI to ensure there was some consistency in the application I was building. It was initially being developed by myself but then it quickly grew to being developed by developers in multiple teams. Features and components were built without any wire-frames or base styleguides to follow. Some groundwork had to be introduced before the UI became too fragmented.

Prerequisites

• You'll need Node installed globally on your machine.
• See what DaisyUI offers

Initial setup

We'll be using Vite as our development server. It's now the standard, over Webpack, for developing JS applications. I highly recommend moving your existing web app builds over to Vite. The speed increase is worth the migration process.

Pop open your terminal of choice and run the following commands:

• Run npm init vite projectName, where projectName will be the name of a new folder for your application
  • select vue using the arrow keys and press enter to select
  • select vue again
• Once that has completed, you should see a prompt to cd into your new project directory
  • run npm install to install the base dependencies
  • run npm run dev if you want to see the base Vue app. You can also experience how fast Vite is at getting your dev server running
  • If you've ran the last command, exit out of it so we can install the remaining dependencies
• Run npm install -D tailwindcss postcss autoprefixer to get tailwind, postcss and autoprefixer installed as Dev dependencies
  • run npx tailwindcss init -p to generate config files for Tailwind and PostCss
• Open your new project directory in your IDE
  • In tailwind.config.js we need to update content: [] with content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}",] to tell Tailwind to look at our index.html and our Vue.js files where we'll be using Tailwind classes
  • In ./src/ we need to create a new CSS file. It can be called anything you like. I call it index.css. Within this file we need to add the following to import Tailwind's directives for each of its layers:

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

  • In your ./src/main.js add the following line import './index.css', under import App from './App.vue' to import the new stylesheet. You should have:

    import { createApp } from "vue";
    import App from "./App.vue";
    import "./index.css";
    
    createApp(App).mount("#app");
    

  • Empty the contents of ./src/App.vue and add the below with Tailwind's classes:

    <template>
      <h1 class="text-3xl font-bold underline mb-10">Hello Vue!</h1>
    </template>
    

  • Back in your terminal, run npm run dev and go to the URL Vite has provided, e.g: http://localhost:3000
    • You should see a plain white page with Hello vue! in large bold text with an underline:
    • 

    • You can now exit this as we need to add DaisyUI to the application
  • In your terminal, run the following to install DaisyUI: npm i daisyui
    • In the tailwind.config.js file we need to add require("daisyui") within the plugins array. You should have the following in your tailwind.config.js file:

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
      theme: {
        extend: {},
      },
      plugins: [require("daisyui")],
    };
    

  • Back in your ./src/App.vue file we can start adding some DaisyUI classes, e.g:

    <template>
      <h1 class="text-3xl font-bold underline mb-10">Hello Vue!</h1>
      <button class="btn btn-primary">Hello Daisy button</button>
    </template>
    

  • In your terminal, run the following to see the changes npm run dev. You should now see an updated page with a theme and styled button:
    • 

• That's it! We've now got access to all of DaisyUI's components throughout our application

Taking it a step further for future applications

I feel like the following steps are important to create a template for any new applications you feel like building:

• Delete the contents of the following directories:
  • ./src/components/
  • ./src/assets/

That's it, You can now commit this to a repo and use it when you're starting new projects. I've created my version here for you to clone if you'd like.