NuxtJS + Tailwind CSS Breakpoint Helper

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

Example

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