Installation

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:

In HTML:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>

Or in CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

Usage

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.