Vue-tailwind-screens-helper NPM

Vue Tailwind Screens Helper

Display an helper at th left bottom corner in development mode, this helper display current breakpoint (xs, sm, md, lg or xl) with icon and exact window width in pixels.

You can click on it to hide it

vue-tailwind-screens-helper

I. Download package

Install it with Yarn or NPM

yarn add -D vue-tailwind-screens-helper

npm i vue-tailwind-screens-helper --save-dev

II. Setup

II. a. With Vue-CLI

Import it, ES6 way, in main.js / app.js file

import TailwindHelper from 'vue-tailwind-screens-helper'

Vue.use(TailwindHelper)

II. b. With Nuxt.js

Create a plugins: plugins/vue-tailwind-screens.js

import Vue from 'vue'
import TailwindHelper from 'vue-tailwind-screens-helper'

Vue.use(TailwindHelper)

Import plugin into nuxt.config.js

plugins: [
  // ...
  { src: '~/plugins/vue-tailwind-screens', ssr: false },
],

III. Usage

III. a. With Vue-CLI

Use it in a .vue file, like App.vue

<template>
  <div>
    <tailwind-helper />
  </div>
</template>

III. b. With Nuxt.js

Use it in a vue file, like layouts/default.vue, don't forget to add client-only to setup it properly.

<template>
  <client-only>
      <tailwind-helper />
    </client-only>
</template>

IV. API

Props	Type	Default value	Description
sneak	Boolean	false	Display helper in sneak mode
pixels	Boolean	true	Display pixels width

V. Tailwind breakpoints

You can change Tailwind CSS breakpoints into tailwind.config.js, helper will adapt it-self when breakpoints change.

module.exports = {
  theme: {
    // ...
    extend: {
      // ...
      screens: {
        xl: '1600px',
        lg: '1000px',
        md: '770px',
        sm: '400px',
      },
    },
  },
}