Vue Tailwind Modal Lightbox

A Vue component that creates a Modal\Lightbox using Tailwind CSS.

Supports Vue 2 and 3, TailwindCSS 1 and 2.

Note: Assumes you already have Tailwind CSS installed in your project (it is not a dependency of this package)

Project setup

npm install --save vue-tailwind-modal

or

yarn add vue-tailwind-modal

Using the modal

Installing globally

In your main js file:

import VueTailwindModal from "vue-tailwind-modal"
Vue.component("VueTailwindModal", VueTailwindModal)

Using within a component

In your component .vue file

import VueTailwindModal from 'vue-tailwind-modal'

export default {
  components: {
	VueTailwindModal,
	...
  },
  ...

Once installed simply use as any other component:

<vue-tailwind-modal
	:showing="true"
	@close="showModal = false"
	:showClose="true"
	:backgroundClose="true"
>
	<!-- Put your modal content here -->
</vue-tailwind-modal>

To hide and show the modal simply pass a boolean to the :showing attribute (true to show, false to hide). You can capture the close event using @close to hide the modal (as in the example above) and do further processing. If you do not wish to show the close button (top right) change :showClose to false.

By default clicking on the background will close the modal. To prevent this change backgroundClose parameter to false.

Custom CSS

You can pass an optional CSS parameter to the component to customise the modal. Simply pass an object with one or more of the following keys:

modalOptions: {
	background: "",
	modal: "max-h-90",
	close: "",
}

The right hand side should contain the Tailwind CSS or standard CSS classes you want to add to the modal.

Then add this to the Modal:

<vue-tailwind-modal
	:showing="true"
	@close="showModal = false"
	:showClose="true"
	:backgroundClose="true"
	:css="modalOptions"
/>

Background colour

If you would like to grey out the background you will need to add the "smoke" background colour to your tailwind.config.js file, an example below:

module.exports = {
	theme: {
		extend: {
			colors: {
				"smoke-900": "rgba(0, 0, 0, 0.9)",
				"smoke-800": "rgba(0, 0, 0, 0.75)",
				"smoke-600": "rgba(0, 0, 0, 0.6)",
				smoke: "rgba(0, 0, 0, 0.5)",
				"smoke-400": "rgba(0, 0, 0, 0.4)",
				"smoke-200": "rgba(0, 0, 0, 0.25)",
				"smoke-100": "rgba(0, 0, 0, 0.1)",
			},
		},
	},
	variants: {},
	plugins: [],
}

Animate in/out

An optional CSS file can be included (using your CSS management technique of choice) css/modal.css that will add a fade in and out animation to the modal.

@import "modal"; // postCSS

Purge CSS in production

When using purge CSS in production you will need to add the smoke background colour you use to the Purge CSS whitelist and inlcude the modules classes for purging. Below is an example tailwind.config.js extract:

module.exports = {
   purge: {
	content: [
		'./apps-ui/portal/layouts/**/*.vue',
		'./apps-ui/portal/pages/**/*.vue',
		'./apps-ui/portal/components/**/*.vue',
		'./apps-ui/portal/plugins/**/*.vue',
		'./apps-ui/portal/static/**/*.vue',
		'./apps-ui/portal/store/**/*.vue',
		'./node_modules/vue-tailwind-modal/src/VueTailwindModal.vue',
	],
	options: {
		// Include the bg-smoke for use when css is compressed
		// see: https://tailwindcss.com/docs/controlling-file-size
		whitelist: ['bg-smoke-800'],
	},
   },
}