Installation
WARNING
⚠️ Vue Tailwind Datepicker uses Tailwind CSS (with the @tailwindcss/forms plugin) & Day.js under the hood, you must install those packages before. You can follow this tutorial.
Install via npm
$ npm install vue-tailwind-datepicker$ npm install vue-tailwind-datepickerInstall via yarn
$ yarn add vue-tailwind-datepicker$ yarn add vue-tailwind-datepickerHow it works
Setup the component globally
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");// 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");Setup as a single component
vue
<!-- SFC file -->
<script setup>
import { ref } from "vue";
import VueTailwindDatepicker from "vue-tailwind-datepicker";
const dateValue = ref([]);
</script>
<template>
<vue-tailwind-datepicker v-model="dateValue" />
</template><!-- SFC file -->
<script setup>
import { ref } from "vue";
import VueTailwindDatepicker from "vue-tailwind-datepicker";
const dateValue = ref([]);
</script>
<template>
<vue-tailwind-datepicker v-model="dateValue" />
</template>Add Tailwind CSS 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")],
};// 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")],
};