Tailwind Mobile & Framework7

Let's see how to use Tailwind Mobile React components with Framework7 React.

Create Framework7 Project

First, create a Framework7 React project using Framework7 CLI

Install Tailwind CSS & Tailwind Mobile

Now in created Framework7 project, we need to install Tailwind CSS & Tailwind Mobile:

npm i tailwindcss tailwind-mobile

There is a postcss.config.js file in the project root, we need to add there tailwindcss plugin:

module.exports = {
  plugins: {
    tailwindcss: {}, // <- add this
    'postcss-preset-env': {},
  },
};

Create tailwind.config.js file and add it to the project root folder with the folowing content:

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

module.exports = tailwindMobile({
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './src/index.html'],
  darkMode: 'class',
});

Include Tailwind CSS to your app's styles. Add the following code in the beginning of your src/css/app.[css|scss|less]:

@tailwind base;
@tailwind components;
@tailwind utilities;

TailwindMobileProvider

Now we need to setup TailwindMobileProvider so we can set some global parameters (like theme).

We need to wrap main Framework7's App component with TailwindMobileProvider in the src/components/app.jsx:

import React from 'react';
import { TailwindMobileProvider } from 'tailwind-mobile/react';
import { App, /* ... */ } from 'framework7';

const MyApp = () => {
  // Framework7 Parameters
  const f7params = {
    theme: 'ios',
    ...
  };

  return (
    // Wrap Framework7's App with TailwindMobileProvider with theme="parent"
    <TailwindMobileProvider theme="parent">
      <App {...f7params}>
        ...
      </App>
    </TailwindMobileProvider>
  );
}

export default MyApp;

Usage

Framework7 has very powerful and flexible router, and to keep it work correctly we need to use Router-related components from Framework7: App, View, Page, Navbar, Toolbar.

The rest of components (if there is a Tailwind Mobile alternative) can be taken from Tailwind Mobile (tailwind-mobile/react)

Example Page

Now when everything is set up, we can use Tailwind Mobile React components in Framework7 page components.

For example, let's open src/pages/home.jsx and change it to the following:

import React from 'react';
// Use Page, Navbar, Toolbar from Framework7
import { Page, Navbar, Toolbar } from 'framework7-react';
// Tailwind Mobile components
import {
  Block,
  Button,
  List,
  ListItem,
  Link,
  BlockTitle,
} from 'tailwind-mobile/react';

const HomePage = () => (
  // Use Page, Navbar & Toolbar from Framework7
  <Page name="home">
    <Navbar title="My App" large />
    <Toolbar bottom>
      <Link toolbar>Left Link</Link>
      <Link toolbar>Right Link</Link>
    </Toolbar>
    {/* In page content we can use Tailwind Mobile components  */}
    <Block strong>
      <p>
        Here is your Framework7 & Tailwind Mobile app. Let's see what we have
        here.
      </p>
    </Block>
    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong className="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
);
export default HomePage;

As a result we should see the following page:

tailwind-mobile-framework7

Dark Mode

Pay attention that Tailwind CSS requires class dark to be added to enable Dark mode, while Framework7 requires class theme-dark.

So if you use dark mode, make sure you set/remove both dark theme-dark classes on root element (preferably on <html> element).

Color Theme

Framework7 and Tailwind Mobile use different sources for main theme color. While Framework7's theme color is configured via CSS custom properties, Tailwind Mobile theme should be set in tailwind.config.js.

ColorFramework7 CSS VarTailwind Mobile Prop
primary--f7-theme-colorprimary
primary dark--f7-theme-color-shadeprimary-dark
primary light--f7-theme-color-tintprimary-light

Let's say our theme color is #ff6b22, we need to set the following:

In app.css (to configure Framework7 theme color):

:root {
  --f7-theme-color: #ff6b22;
  --f7-theme-color-rgb: 255, 107, 34;
  --f7-theme-color-shade: #f85200;
  --f7-theme-color-tint: #ff864b;
}

And in tailwind.config.js (to configure Tailwind Mobile theme color):

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

module.exports = tailwindMobile({
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './src/index.html'],
  darkMode: 'class',
  // extend primary color
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#ff864b',
          DEFAULT: '#ff6b22',
          dark: '#f85200',
        },
      },
    },
  },
});
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.