Package Exports

@hongvanpc10/tailwindcss-responsive
@hongvanpc10/tailwindcss-responsive/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hongvanpc10/tailwindcss-responsive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@hongvanpc10/tailwindcss-responsive

A plugin that provides utilities for responsive: show and hide element.

Installation

Install the plugin from npm:

npm install -D @hongvanpc10/tailwindcss-responsive

Or yarn:

yarn add @hongvanpc10/tailwindcss-responsive --dev

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@hongvanpc10/tailwindcss-responsive'),
    // ...
  ],
}

Usage

Use the show-on-{breakpoint} and hide-on-{breakpoint} utilities to specify when element should be shown or hidden

Examples

To show element on xl devices and higher:

<p class="show-on-xl">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum
  odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit
  delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas
  voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

Result:

@media (max-width: 1280px) {
  .show-on-xl {
    display: none;
  }
}

To hide element on xl devices and higher:

<p class="hide-on-xl">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum
  odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit
  delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas
  voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

Result:

@media (min-width: 1280px) {
  .hide-on-xl {
    display: none;
  }
}

To show element from md devices to lg devices:

<p class="show-on-md hide-on-lg">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum
  odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit
  delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas
  voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

Configuration

You can configure which breakpoints and value are generated by this plugin under the breakpoint key in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      breakpoints: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
    },
  },
}