nuxt-tailwind-breakpoints

Show Tailwind CSS Breakpoints in Nuxtjs when using the tailwindcss-module

📖 Release Notes

Intro

Note: This is a simple fork of the nuxt-breaky module. It should look and act pretty much the same as the original. Minor changes include removing the node-sass dependency to make the module usable with node.js >= 16 and adding a landmark aria-role attribute to the div.current-breakpoint element.

DEMO

breaky helps you create your responsive designs faster. It extends the awesome tailwindcss-module. breaky reads your defined breakpoints within your tailwind config and shows the currently active breakpoint based on your browser window width.

The plugin will only be loaded during development mode and does not interfere with your production build.

Requirements

Make sure tailwindcss: ^5.0.0 and @nuxt/postcss8: ^1.1.3 (or higher) are installed.

Setup

1. Add nuxt-tailwind-breakpoints as a dev-dependency to your project

yarn add nuxt-tailwind-breakpoints --dev

# or npm install nuxt-tailwind-breakpoints --save-dev

2. Add nuxt-tailwind-breakpoints to the buildModules section of nuxt.config.js

NOTE: Use the modules section if you are using Nuxt older than v2.9. More Info

{
  buildModules: [
    // Simple usage
    'nuxt-tailwind-breakpoints',

    // With options
    [
      'nuxt-tailwind-breakpoints',
      {
        enabled: true,
        enableInProd: false,
        colorScheme: 'auto',
        position: 'bottomRight',
        configPath: '~~/tailwind.config.js',
      }
    ]
  ]
}

Usage

The breaky module automatically adds the breaky plugin when in development mode. No need to register or include it anywhere else.

Configuration

You can pass options to the breaky using both the module options and the Nuxt config way.

{
  buildModules: {
    ['nuxt-tailwind-breakpoints', { /* module options */ }]
  },

  breaky: {
    /* module options */
  }
}

Available Options

| Option | Type | Default | Options | Description | | -------------- | --------- | ------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | enabled | Boolean | true | true | false | Enable/Disable breaky | | enableInProd | Boolean | false | true | false | Enable breaky in production (overrides the enabled option; Please be aware this adds ~19.5KB (~3.5KB) to the client bundle size. More Info) | | colorScheme | String | auto | 'auto' | 'light' | 'dark' | Switch between different color schemes | | position | String | 'bottomRight' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | Breakys starting position | | parseRaw | Boolean | false | true | false | (Experimental) Enable parsing a screen's raw property and use a query's min-width pixel value if it specifies the device type as screen or doesn't specify device type at all. For example, lg: {raw: print, (min-width: 1024px)} would set lg to 1024 | | configPath | String | '~~/tailwind.config.js' | any valid path ponting to the file | Path to the tailwindcss config file | | breakpoints | Object | undefined | | An object representing all the breakpoints you'd like to identify in your configuration. If provided, it is used instead of screens from tailwind config |

Development

1. Clone this repository
2. Install dependencies using yarn install
3. Start development server using yarn dev

Release

1. yarn release
2. npm publish

License

MIT License

Copyright (c) teamnovu