Add a Tailwind Datepicker to your Vue 3 application
Tags: vue, tutorial, tailwindcss
Published: 2022-09-07 21:28:42

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bo2ztyj449j6xr3v0jnb.png)

## 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](https://www.npmjs.com/package/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:

```console
npm init vue@latest
```

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

```console
✔ 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:

```console
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.



```js
// 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.

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

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

```js
// 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:

```js
// 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:

```console
npm i dayjs
```

## Install vue-tailwind-datepicker


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

[vue-tailwind-datepicker.com](https://vue-tailwind-datepicker.com)

Install the package by running this command:

```console
npm install vue-tailwind-datepicker 
```

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


```js
// 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.

```js
// 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](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.

## Demo

You can find [a demo on the main documentation](https://vue-tailwind-datepicker.com/demo.html)

Also you can test **vue-tailwind-datepicker** [on the official playground via Stackblitz](https://vue-tailwind-datepicker.com/demo.html)

## 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.