Warning This package is no longer supported.

vue-breaky-core

Show Tailwind CSS Breakpoints in Vuejs

📖 Release Notes

Intro

DEMO

breaky helps you create your responsive designs faster. breaky reads your defined breakpoints within your tailwind config and shows the currently active breakpoint based on your browser window width.

Setup

NOTE: We highly recommend you to use one of the following packages:

• Nuxtjs: nuxt-breaky
• Vuejs: vue-breaky

These packages will help you install the breaky core.

If you only want to use the breaky core vue component and want to include it and the tailwind config yourself, feel free to do so but we won't guide your through the whole installation.

Just to get you started: Importing @teamnovu/vue-breaky-core imports the core component which you want to include on your page.

Configuration

Props

Prop	Type	Default	Options	Description
breakpoints	Object	none, Required		The configured breakpoints (screens) as stored in the tailwind.config.js
colorScheme	String	auto	'auto' | 'light' | 'dark'	Switch between different color schemes
position	String	'bottomRight'	'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'	Breakys starting position

Development

1. Clone this repository
2. Install dependencies using yarn install
3. Start development server using yarn dev

Release

1. yarn release
2. npm publish

License

MIT License

Copyright (c) teamnovu