npm i @idevelopthings/vue-tailwind-ui
yarn add @idevelopthings/vue-tailwind-ui

Tailwind Plugin for buttons/cards

/**
 * @type {import('tailwindcss/types/index').Config}
 */
module.exports = {
	content : ['index.html', './src/**/*.{js,jsx,ts,tsx,vue,html}'],
	theme   : {
		extend : {},
	},
	plugins : [
		require('@idevelopthings/vue-tailwind-ui/tailwind-plugin'),
	],
};

Form CSS Helper

Update your main tailwind css file to include the import:

@import "@idevelopthings/vue-tailwind-ui/src/components.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

Note: The import must come before @tailwind directives, read the tailwind docs for more information

Vue example:

<div class="form-group" :class="{'has-error' : form.errors?.name}">
    <label for="name" class="control-label">Name</label>
    <input id="name"
           type="text"
           class="form-control"
           name="name"
           v-model="form.name"
           required
    >
    <div class="help-block" v-if="form.errors?.name">
        <strong>{{ form.errors?.name }}</strong>
    </div>
</div>