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

• I. Download package
• II. Setup
  • II. a. With Vue-CLI
  • II. b. With Nuxt.js
• III. Usage
  • III. a. With Vue-CLI
  • III. b. With Nuxt.js
• IV. API
• V. Tailwind breakpoints
• License & example

I. Download package

Install it with Yarn or NPM

yarn add -D vue-tailwind-screens-helper

OR

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',
      },
    },
  },
}

License & example

MIT © @ewilan-riviere

If you want to test directly this plugin with this repo, clone it, install npm i -g @vue/cli-service-global and serve application with yarn dev