Tailwind Debug Breakpoints

A Tailwind CSS plugin that display the currently active screen (responsive breakpoint).

Installation

Using NPM

npm install -D tailwind-debug-breakpoints

Using Yarn

yarn add --dev tailwind-debug-breakpoints

Using PNPM

pnpm add -D tailwind-debug-breakpoints

Then, add class debug-breakpoints on body element to display breakpoint information.

Tailwind Configuration

import type { Config } from 'tailwindcss'

const TailwindConfig: Config = {
  content: [],
  theme: {
    extend: {},
    debugScreens: {
      position: ['bottom', 'right'],
      borderTopLeftRadius: '4px',
      printSize: true,
      prefix: '',
    },
  },
  plugins: [require('tailwind-debug-breakpoints')],
}

export default TailwindConfig

License

This project is open-sourced software licensed under the MIT License.

Copyrights in this project are retained by their contributors.

See the license file for more information.

🤫 Psst! If you like my work you can support me via GitHub sponsors.