Tailwind Plugin

We have a Tailwind plugin that adds our device classes to your Tailwind config. It's really simple to use, which is why our docs are so short. Plus writing is hard.

Use addDeviceClass

To begin, include the addDeviceClass function into your project. This function appends the device class to the body tag. Run the function in the head of your base template or app file. Or don't, you should know what you're doing by now.

// Run client-side in the head of your base template or app file
addDeviceClass()

Add the Tailwind plugin

const { modDevices } = require('usemods')

module.exports = {
    // The rest of your config
    plugins: [
        // The rest of your plugins
        modDevices,
    ],
}

Use the classes

Now you can use the classes in your HTML. Here's an example:

<div class="hidden ios:flex">Show on iOS</div>
<div class="hidden android:flex">Show on Android</div>
<div class="hidden chrome:flex">Show on Chrome</div>
<div class="hidden safari:flex">Show on Safari</div>
<div class="hidden firefox:flex">Show on Firefox</div>
<div class="hidden edge:flex">You use Edge? Like on purpose?</div>