📱 Tailwind Screen Size

A lightweight, framework-agnostic component that helps you visualize your screen size and breakpoints during development. While it's optimized for TailwindCSS, it can be customized to work with any CSS framework or vanilla CSS!

✨ Features

• 📏 Show different screen sizes you're on for TailwindCSS
• 📐 Show the exact width and height
• 🎯 Framework agnostic - works with any JavaScript framework
• 📍 Customizable positioning (6 different positions)
• 🎨 Rich theme system with 20+ built-in themes
• 💅 Customizable with TailwindCSS classes, other frameworks, or vanilla CSS
• 🔧 Development-mode aware (configurable)
• 📐 Custom breakpoints support
• 🔍 Automatic TailwindCSS detection

📦 Installation

Using npm:

npm install tailwind-screen-size

Using yarn:

yarn add tailwind-screen-size

Using pnpm:

pnpm add tailwind-screen-size

Using bun:

bun add tailwind-screen-size

🔧 Tailwind CSS Configuration

For Tailwind CSS v3 and below

Add the following to your tailwind.config.js or tailwind.config.ts:

content: [
  "./node_modules/tailwind-screen-size/**/*.{js,ts,jsx,tsx,vue,svelte}",
];

For Tailwind CSS v4.0 (Beta)

Add the following to your styles.css:

@source "./node_modules/tailwind-screen-size/**/*.{js,ts,jsx,tsx,vue,svelte}";

> Note: This package is compatible with Tailwind CSS 4.0.

🚀 Usage

React

import { TailwindScreenSize } from "tailwind-screen-size/react";

function App() {
  return (
    <div>
      
      {/* Your app content */}
    </div>
  );
}

Svelte (Beta)

> ⚠️ Note: The Svelte implementation is currently in beta and may have some instability. However, it works seamlessly with both Svelte 4 and Svelte 5 (runes) out of the box!

<div>
  
  
</div>

⚙️ Props

🎨 Customization

### 🎭 Available Themes

#### Base Themes

- 🌑 `dark` - Dark background with light text
- 🌕 `light` - Light background with dark text
- ✨ `glass` - Frosted glass effect with backdrop blur
- 🎯 `minimal` - Transparent background with adaptive colors

#### Color Themes

All Tailwind colors are available as themes:

##### Gray Scales

- `slate` - Sophisticated gray
- `gray` - Pure gray
- `zinc` - Neutral gray
- `neutral` - True neutral
- `stone` - Warm gray

##### Colors

- `red` - Error, danger, passion
- `orange` - Energy, creativity
- `amber` - Warning, warmth
- `yellow` - Attention, optimism
- `lime` - Fresh, natural
- `green` - Success, growth
- `emerald` - Rich, prosperity
- `teal` - Calm, sophistication
- `cyan` - Technology, clarity
- `sky` - Openness, freedom
- `blue` - Trust, depth
- `indigo` - Wisdom, integrity
- `violet` - Luxury, mystery
- `purple` - Royalty, creativity
- `fuchsia` - Energy, excitement
- `pink` - Playful, feminine
- `rose` - Love, beauty

### 📐 Default Breakpoints

```typescript
const defaultBreakpoints = [
  { screenTitle: "XS", minWidth: 0 },
  { screenTitle: "SM", minWidth: 640 },
  { screenTitle: "MD", minWidth: 768 },
  { screenTitle: "LG", minWidth: 1024 },
  { screenTitle: "XL", minWidth: 1280 },
  { screenTitle: "2XL", minWidth: 1536 },
];

## 🔧 Development Mode

By default, the component only shows in development mode (`process.env.NODE_ENV === "development"`). You can override this behavior with the `show` prop:

```jsx
// Always show in any environment


// Never show


## 📄 License

MIT