DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Add a Tailwind Datepicker to your Vue 3 application
Alexandre Le Corre
Alexandre Le Corre

Posted on

Add a Tailwind Datepicker to your Vue 3 application

Image description

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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

cd <your-project-name>
npm install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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

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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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'),
  ]
}
Enter fullscreen mode Exit fullscreen mode

Start your application

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

npm run serve
Enter fullscreen mode Exit fullscreen mode

You can find all the props here:

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.

Demo

You can find a demo on the main documentation

Also you can test vue-tailwind-datepicker on the official playground via Stackblitz

All good!

You can now use your datepicker on your app.

Please don't forget to add a start to the Github repo of the plugin:

https://github.com/elreco/vue-tailwind-datepicker

Thank you,
Alexandre.

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›