@hongvanpc10/tailwindcss-responsive
v1.0.3
Published
A plugin that provides utilities for responsive: show and hide element.
Downloads
9
Maintainers
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',
},
},
},
}