# div-phone

A responsive Tailwind CSS iPhone component

Published: 2026-01-24

Canonical HTML: [View the HTML page](<https://www.evanstewart.org/projects/div-phone>)

## Links

- [View on GitHub](<https://github.com/heyecs/div-phone>)
- [Download from npm](<https://www.npmjs.com/package/div-phone>)

I've often used CSS to render physical devices on the canvas, wrapping `{children}` around interactive apps. [div-phone](<https://github.com/heyecs/div-phone>) packages that idea into a responsive iPhone frame for React, built with Tailwind CSS.

The default phone finish is `black`, although the latest `1.1.0` release allows you to also use the `color` prop to change color to `orange`.

## Install

```bash
npm install div-phone
```

## Tailwind setup

`div-phone` ships Tailwind utility classes rather than a compiled stylesheet.
Tailwind CSS v4 ignores `node_modules` during automatic source detection, so
register the package as a source in your main CSS file:

```css
@import 'tailwindcss';
@source "../node_modules/div-phone/dist";
```

The `@source` path is relative to the CSS file. Adjust the number of `../`
segments for your project structure.

If your project uses PostCSS, install the optional integration packages:

```bash
npm install --save-dev postcss @tailwindcss/postcss
```

Then configure the Tailwind v4 plugin:

```js
export default {
	plugins: {
		'@tailwindcss/postcss': {},
	},
};
```

## Usage

The black frame is the default phone color:

```tsx
import { Phone } from 'div-phone';

export const BlackPhone = () => (
	<Phone>
		<div className="h-full w-full bg-neutral-900 text-white">Your app goes here.</div>
	</Phone>
);
```

Select the orange finish with `color="orange"`:

```tsx
import { Phone } from 'div-phone';

export const OrangePhone = () => (
	<Phone color="orange">
		<div className="h-full w-full bg-neutral-900 text-white">Your app goes here.</div>
	</Phone>
);
```

## Props

- `children`: React content rendered inside the phone screen.
- `className`: Optional classes added to the outer wrapper.
- `color`: The phone frame finish, either `"black"` (default) or `"orange"`.
- `shadow`: Applies the outer shadow and defaults to `true`.

The color union is also exported for use in your own component APIs:

```ts
import type { PhoneColor } from 'div-phone';
```

## Requirements

- React 17, 18, or 19
- Tailwind CSS 4
- PostCSS 8 and `@tailwindcss/postcss` 4 when using the optional PostCSS integration
- Node.js 16.14 or newer

## Troubleshooting

If the phone renders without its frame styling, confirm that:

1. Your application imports Tailwind with `@import "tailwindcss"`.
2. Your CSS includes an `@source` path that resolves to `node_modules/div-phone/dist`.
3. You restarted the development server after installing or updating the package.

***

Using [div-phone](<https://github.com/heyecs/div-phone>) for something cool? [Tag me on 𝕏](<https://x.com/heyecs>) with what you've built!