# tailwindcss-mobile-precision

> Tailwind CSS plugin to add media queries specific to phones and tablets for preicision layouts.

Latest version **2.0.4** (published 2020-07-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install tailwindcss-mobile-precision
pnpm add tailwindcss-mobile-precision
yarn add tailwindcss-mobile-precision
bun add tailwindcss-mobile-precision
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2020-07-22 |
| First published | 2020-07-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 23.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Rob Sawyer |
| Maintainers | robksawyer |

## Links

- npm: https://www.npmjs.com/package/tailwindcss-mobile-precision
- Repository: https://github.com/robksawyer/tailwindcss-mobile-precision
- Issues: https://github.com/robksawyer/tailwindcss-mobile-precision/issues
- npm.io page: https://npm.io/package/tailwindcss-mobile-precision

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.19
- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^6.0.2

## Recent versions

- 2.0.4 (latest) — 2020-07-22
- 2.0.3 — 2020-07-22
- 2.0.2 — 2020-07-22
- 2.0.1 — 2020-07-22
- 2.0.0 — 2020-07-22

## README

# Mobile Variant Plugin for Tailwind CSS
This plugin allows you to quickly add media queries for phones and tablets (mostly Apple ones ATM).

## Requirements

This plugin requires Tailwind CSS 1.2 or later.

## Installation

```bash
yarn add tailwindcss-media-precision
```

## Usage

The following plugin options are available. See below how these are passed (via an array) to the plugin in your `tailwind.config.js`.

### LEGEND
 [mobile-type][size][both/portrait/landscape]
**p**
  Beginning: phone e.g. psm = phone, small
  End: portrait e.g. psmp = phone, small, portrait (only)
**t**
  Beginning: tablet e.g. tsmp = tablet, small, portrait (only)


## Options Available
### Phone Options
#### Small Phones
- iPhone 5/SE: [psm, psmp, psml]

#### Medium Phones
- iPhone iPhone 6, 6S, 7 and 8: [pmd, pmdp, pmdl]

#### Large Phones
- iPhone 6+, 7+ and 8+: [plg, plgp, plgl]

#### X-Large Phones
- iPhone X: [pxl, pxlp, pxll]

#### All Phones
[psm, psmp, psml, pmd, pmdp, pmdl, plg, plgp, plgl, pxl, pxlp, pxll]

### Tablet Options
#### Small Tablets
- iPad 1, 2, Mini and Air: [tsm, tsmp, tsml]

#### Medium Tablets
- iPad 3, 4 and Pro 9.7": [tmd, tmdp, tmdl]

#### Large Tablets
- iPad Pro 10.5": [tlg, tlgp, tlgl]

#### X-Large Tablets
- iPad Pro 12.9": [txl, txlp, txll]

#### All Tablets
[tsm, tsmp, tsml, tmd, tmdp, tmdl, tlg, tlgp, tlgl, txl, txlp, txll]

```js
// tailwind.config.js
module.exports = {
  plugins: [
    require('tailwindcss-media-precision')(['psm']),
  ],
};
```

The above configuration would generate the following CSS:

```css
@media (min-width: only screen and (-webkit-device-pixel-ratio: 1) and (min-width: 320px) and (max-width: 568px)) {
  .psm\:block {
    display: block
  }

  .psm\:inline-block {
    display: inline-block
  }

  .psm\:inline {
    display: inline
  }

  .psm\:flex {
    display: flex
  }

  .psm\:inline-flex {
    display: inline-flex
  }

  .psm\:table {
    display: table
  }

  .psm\:table-caption {
    display: table-caption
  }

  .psm\:table-cell {
    display: table-cell
  }

  .psm\:table-column {
    display: table-column
  }

  .psm\:table-column-group {
    display: table-column-group
  }

  .psm\:table-footer-group {
    display: table-footer-group
  }

  .psm\:table-header-group {
    display: table-header-group
  }

  .psm\:table-row-group {
    display: table-row-group
  }

  .psm\:table-row {
    display: table-row
  }

  .psm\:flow-root {
    display: flow-root
  }

  .psm\:grid {
    display: grid
  }

  .psm\:inline-grid {
    display: inline-grid
  }

  .psm\:hidden {
    display: none
  }
}
/* etc. */
```

Which you can then use in your HTML like this:

```html
<div class="psm:hidden lg:block">
  <p>I'm hidden on small phones.</p>
</div>
```

The above depends on the order of the generated CSS.

---
_Source: https://npm.io/package/tailwindcss-mobile-precision · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._