If you use Tailwind Mobile with other frameworks (like Framework7 or Ionic), we still should specify Tailwind Mobile's globals (like theme) with the help of TailwindMobileProvider.

We also need to add twm-ios or twm-material class to the app's root element.

/* App.jsx */
import React from 'react';
// we use main App and Router components from Framework7
import { App, View, Page, Navbar } from 'framework7/react';
// we use TailwindMobileProvider instead
import { TailwindMobileProvider, Block, Button } from 'tailwind-mobile/react';

export default function MyApp() {
  return (
      {/* Wrap our app with TailwindMobileProvider */}
      <TailwindMobileProvider theme="ios">
        {/* We add extra `twm-ios` class to the app root element */}
        <App theme="ios" className="twm-ios">
              <Navbar title="My App" />
              {/*  Tailwind Mobile components */}
                <p>Here comes my app</p>
              <Block className="space-y-4">
                <p>Here comes the button</p>

TailwindMobileProvider Props


Include dark: variants (if dark theme is in use)

theme'ios' | 'material' | 'parent''material'

App theme. If set to 'parent' it will look for ios or md class on root <html> element, useful to use with parent framework like Framework7 or Ionic


Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components

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