TailwindMobileProvider

Usage

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">
          <View>
            <Page>
              <Navbar title="My App" />
              {/*  Tailwind Mobile components */}
              <Block>
                <p>Here comes my app</p>
              </Block>
              <Block className="space-y-4">
                <p>Here comes the button</p>
                <Button>Action</Button>
              </Block>
            </Page>
          </View>
        </App>
      </TailwindMobileProvider>
    </>
  );
}

TailwindMobileProvider Props

NameTypeDefaultDescription
darkbooleanfalse

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

touchRipplebooleantrue

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.