@dashers/nuxt-tailwind-breakpoint-helper

NuxtJS module which shows current screen size based on your TailwindCSS config file in development mode.

Usage no npm install needed!

<script type="module">
  import dashersNuxtTailwindBreakpointHelper from 'https://cdn.skypack.dev/@dashers/nuxt-tailwind-breakpoint-helper';
</script>

README

NuxtJS + Tailwind CSS Breakpoint Helper

npm (scoped) npm NPM

NuxtJS module which shows current screen size based on your TailwindCSS config file in development mode.

Example

Example GIF

Demo in Codesandbox

Features

  • Automatically mounts to your app
  • Automatically loads your tailwind.config.js file
  • You can pass another path to config file
  • Customize colors and size

Setup

Install with Yarn or NPM

# yarn
yarn add -D @dashers/nuxt-tailwind-breakpoint-helper

# npm
npm i @dashers/nuxt-tailwind-breakpoint-helper --save-dev

Basic usage

You need to add @dashers/nuxt-tailwind-breakpoint-helper to your Nuxt config.

// nuxt.config.js
{
  buildModules: [
    [
      "@dashers/nuxt-tailwind-breakpoint-helper",
      {
        // options
        style: {
          backgroundColor: "green",
          textColor: "#fff",
        },
      },
    ],
  ],
}

Or through separate options object

// nuxt.config.js
{
  buildModules: ['@dashers/nuxt-tailwind-breakpoint-helper'],
  breakpointHelper: {
    style: {
      backgroundColor: 'green',
      textColor: '#fff',
    },
  },
}

Then it will automatically loads your Tailwind config file and mounts helper to your Nuxt app.

Options


// this is default options
{
  tailwindConfigPath: "./tailwind.config.js", // relative path from nuxt.config.js file
  // css3 values
  style: {
    backgroundColor: "#151515", // background-color
    textColor: "#fff50a", // color
    width: "5rem",
    height: "5rem",
  },
}

Todo

  • Minimize / hide breakpoint helper
  • Draggable breakpoint helper
  • Keyboard shortcuts

Issues, questions & requests

If you have any questions or issues, please create an issue or a merge request in our Gitlab repository.

License

MIT License - Copyright (c) Dasher