@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',
      },
    },
  },
}