Tailwindcss Debug Screens

A Tailwind CSS component that shows the currently active screen (responsive breakpoint).

Overview:

Tailwind CSS Debug Screens is a handy component that displays the active screen or responsive breakpoint in Tailwind CSS. It helps developers easily visualize and optimize the design for different screen sizes. The plugin requires Tailwind v1.0 or higher for installation.

Features:

Responsive Breakpoint Display: Shows the currently active screen size.
Installation: Easy to install by adding a class to the <body> tag.
Customization: Allows customization in the tailwind.config.js file.
Ignore Screens: Option to ignore specific screens like dark mode.
Position Configuration: Customize the position of the debug screen.
Default Styles: Default styles can be modified as needed.
Prefix and Selector Configuration: Modify the label prefix and element selector for flexibility.

Installation:

To install Tailwind CSS Debug Screens:

Ensure Tailwind v1.0 or higher is installed.

Add the plugin to your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  theme: {
    debugScreens: {},
  },
  plugins: [
    require('tailwindcss-debug-screens'),
  ],
}

Add the class debug-screens to your <body> tag:
```
<body class="debug-screens">
```

Summary:

Tailwind CSS Debug Screens is a useful plugin for visualizing and optimizing responsive designs in Tailwind CSS projects. With features like responsive breakpoint display, easy installation, customization options, and flexibility in ignoring screens or modifying styles, it offers developers a valuable tool for efficient web development.