this package is deprecated (for now)

I maybe plan to revive this package in the future for vue 3 and tailwind 3+, but for now I'm not in need of samey looking components.

Vue Tailwind Components

Easy to use vue components utilizing tailwindcss. (Vue 2.6 +, Tailwindcss 1.1 +)

Components

• Navbar
• Burger
• more to come (lol)

Demo

You can find demo here.

Installation

yarn add @kreejzak/vue-tailwind-components

Usage

Import styles and components you want to use and register them in your components object.

import '@kreejzak/vue-tailwind-components/dist/vue-tailwind-components.css'
import { VtcNavbar } from '@kreejzak/vue-tailwind-components'
export default {
    components: {
        VtcNavbar
    }
}

* Styles are not necessary but following components may not function properly:

• Burger

VtcNavbar

Responsive Navbar component. Use slots: logo, menu, burger for placing content into corresponding place of this component. You have showMobileMenu variable at your disposal on every slot. Use the vtcClass variable on the root element in menu slot for proper function of the mobile menu.

Props

| name | type | description | | ----------------- | ------- | --------------------------------------------------------------------------------------------- | | value | Boolean | This prop controls mobile menu from outside of the component (using v-model is recommended) | | mobileBreakpoint | String | Tailwindcss breakpoint for switching to desktop version (undefined = always mobile version) | | burgerColor | String | Tailwindcss color name for the lines of default Burger | | scrolledThreshold | Number | Number of pixels scrolled from top of page fires event | | unscrolledClass | String | class applied to Navbar when window.scrollY < scrolledThreshold | | scrolledClass | String | class applied to Navbar when window.scrollY >= scrolledThreshold |

<VtcNavbar
    class="py-2"
    unscrolledClass="bg-white"
    scrolledClass="bg-blue-100 shadow"
    mobileBreakpoint="md"
    burgerColor="red-500"
    :scrolledThreshold="100"
    v-model="openMobileMenu"
>

    <template #logo="{ showMobileMenu, scrolled }">

        <div
            class="font-bold uppercase py-2"
            :class="{
                'text-red-500 md:text-black': showMobileMenu
            }"
        >
             logo
        </div>

    </template>

    <template #menu="{ showMobileMenu, scrolled, vtcClass }">

        <div
            :class="[
                vtcClass,
                {
                    'bg-blue-100 md:bg-transparent': showMobileMenu
                }
            ]"
        >

            <div class="container mx-auto px-4">

                <ul class="flex flex-col md:flex-row justify-end -mx-4">

                    <li class="ml-4">item 1</li>

                    <li class="ml-4">item 2</li>

                    <li class="ml-4">item 3</li>

                    <li class="ml-4">item 4</li>

                </ul>

            </div>

        </div>

    </template>

</VtcNavbar>

VtcBurger

Default Burger component for mobile version of navbar.

Props

| name | type | description | | ----- | ------- | ----------------------------------------------------------------- | | value | Boolean | Controls state of burger (using v-model instead is recommended) | | color | String | Tailwindcss color name for the lines of Burger |

<VtcBurger color="blue-500" v-model="showMobileMenu" />