Forked from: 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 lmuzquiz-vue-tailwind-screens-helper

OR

npm i lmuzquiz-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 'lmuzquiz-vue-tailwind-screens-helper'

Vue.use(TailwindHelper)

II. b. With Nuxt.js

Create a plugins: plugins/lmuzquiz-vue-tailwind-screens.client.js notice that the .client part tells nuxt to run the plugin on the client only

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

Vue.use(TailwindHelper)

Import plugin into nuxt.config.js

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

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. My opinionated Tailwind breakpoints

These are my opinionated breakpoints, you can change Tailwind CSS breakpoints into tailwind.config.js, helper will adapt it-self when breakpoints change.

module.exports = {
  theme: {
    // ...
    extend: {
      // ...
      screens: {
        xs: '320px',
        sm: '640px',
        md: '768px',
        lg: '992px',
        xl: '1280px',
        '2xl': '1440px',
        '3xl': '1680px',
        '4xl': '1920px',
        '5xl': '2048px',
        '6xl': '2160px',
        '7xl': '2560px',
      },
    },
  },
}

License & example

MIT © @ewilan-riviere

If you want to test directly this plugin with this repo, clone it, install npm i @vue/cli-service-global --dev or yarn add @vue/cli-service --dev (might need to use sudo) and then serve application with yarn dev