Add a Tailwind Datepicker to your Vue 3 application

#vue #tutorial #tailwindcss

Introduction

In this tutorial, I will show you how to add a datepicker widget in your Vue application.

We will use the vue-tailwind-datepicker plugin.

This will guide will start from the absolute beginning, we will install a Vue app then we will add the Tailwind CSS framework which is mandatory with vue-tailwind-datepicker.

Install VueJs

Let's begin by init the Vue projet:

npm init vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool.

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Once the project is created, follow the instructions to install dependencies and start the dev server:

cd <your-project-name>
npm install

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer

Add the paths to all of your template files in your tailwind.config.js file.

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

Add the @tailwind directives for each of Tailwind’s layers to your ./src/style.css file.

/* ./src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, ensure your CSS file is being imported in your ./src/main.js file:

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Install tailwindcss/forms

vue-tailwind-datepicker uses tailwindcss/forms, it provides a basic reset for form styles that makes form elements easy to override with utilities.

Install the plugin from npm:

npm install -D @tailwindcss/forms

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

Install day.js

Vue Tailwind Datepicker uses Day.js under the hood, we must install this package by simply running this command:

npm i dayjs

Install vue-tailwind-datepicker

Now we will follow the official package documentation, you can find it here:

vue-tailwind-datepicker.com

Install the package by running this command:

npm install vue-tailwind-datepicker

You can setup the component globally by using it on your app initialization:

// main.js
import { createApp } from 'vue'
import App from '@/App.vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
// ...

const app = createApp(App)

app.use(VueTailwindDatepicker)
app.mount('#app')

We must now complete our tailwind configuration by setting up the the datepicker colors.

We must add this line: "./node_modules/vue-tailwind-datepicker/**/*.js" to the content section.

Theme of Vue Tailwind Datepicker is customizable, so you can customize your theme with any color you want, via Tailwind CSS configuration. And all will work well.

Light mode color system using custom color vtd-primary.

Dark mode color system using color palette vtd-secondary. Vue Tailwind Datepicker work it well with Tailwind CSS dark mode configuration.

// tailwind.config.js
const colors = require("tailwindcss/colors")

module.exports = {
  content: [
    "./index.html", 
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/vue-tailwind-datepicker/**/*.js"
  ],
  theme: {
    extend: {
      colors: {
        "vtd-primary": colors.sky, // Light mode Datepicker color
        "vtd-secondary": colors.gray, // Dark mode Datepicker color
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

Start your application

You can now start your application and configure the datepicker to fit your attempts:

npm run serve

You can find all the props here:

https://vue-tailwind-datepicker.com/props.html

vue-tailwind-datepicker is a good plugin which is well integrated with Vue/tailwind projects, it's powerful and you got a lot of props available to customize your datepicker.