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:
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
- Clone this repository
- Install dependencies using
yarn install
- Start development server using
yarn dev
Release
yarn release
npm publish
License
MIT License
Copyright (c) teamnovu