@dashers/nuxt-tailwind-breakpoint-helper

1.0.4 • Public • Published

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

Package Sidebar

Install

npm i @dashers/nuxt-tailwind-breakpoint-helper

Weekly Downloads

8

Version

1.0.4

License

MIT

Unpacked Size

9.41 kB

Total Files

11

Last publish

Collaborators

  • jirkanagy
  • dimot9