We assume you already have a configured project with Vue and Tailwind CSS .

Install Tailwind Mobile

At first, we need to install the Tailwind Mobile library:

npm i tailwind-mobile

Add Config

Then, we need to extend our Tailwind CSS config with Tailwind Mobile config.

In your tailwind.config.js file:

const tailwindMobileConfig = require('tailwind-mobile/config');

// wrap your config with tailwindMobileConfig
module.exports = tailwindMobileConfig({
  // JIT mode should be enabled
  mode: 'jit',
  // rest of your usual Tailwind CSS config here

tailwindMobileConfig will extend default (or your custom one) Tailwind CSS config with some extra variants and helper utilities required for Tailwind Mobile.

JIT Mode

As Tailwind Mobile comes with a bunch of extra utilities, it is intended to be uses with JIT (just-in-time) mode enabled

Roboto Font

Tailwind Mobile uses system font for iOS theme and Roboto font for Material Design theme.

If you develop a web app, you need to Roboto font to your app to display it correctly.

For example, it can be added from Google Fonts:


<link rel="preconnect" href="" />
<link rel="preconnect" href="" crossorigin />

Or in CSS:

@import url(',wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');


After installation process is done let's check how to use Tailwind Mobile components in our Vue application.

Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.