Warning This package is no longer supported.

vue-breaky

Show Tailwind CSS Breakpoints in Vuejs when using the tailwindcss

📖 Release Notes

Intro

DEMO

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

The plugin will only be loaded during development mode and does not interfere with your production build.

Requirements

Make sure tailwindcss is installed.

Setup

1. Add @teamnovu/vue-breaky as a dev-dependency to your project

yarn add @teamnovu/vue-breaky --dev

# or npm install @teamnovu/vue-breaky --save-dev

2. Add the following code to your main.js

import resolveConfig from 'tailwindcss/resolveConfig' // used to merge tailwindcss default config with your custom config
import Breaky from '@teamnovu/vue-breaky/lib/plugin-vue'

Vue.use(Breaky, {
  tailwindConfig: resolveConfig(require('./tailwind.config')), // Required

  // Additional options
  enabled: true,
  enableInProd: process.env.DEPLOY_ENV === 'GH_PAGES',
  position: 'bottomRight',
  colorScheme: 'auto',
})

NOTE: Please be aware this adds 19.5KB (3.5KB) to the bundle size when you are in development mode.

Usage

The breaky module automatically adds the breaky plugin when in development mode. No need to register or include it anywhere else.

Configuration

You can pass options to the breaky using the Vue plugin options.

Vue.use(Breaky, {
  /* plugin options */
})

Available Options

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