Setting up Tailwind with Lynx

Lynx is a new web-stack-to-native mobile development platform by ByteDance, and with a little configuration can work very well with Tailwind. Let's get Tailwind set up with Lynx so we can use one of our favorite web dev tools for mobile development.

An easy way to get started is by following the Lynx Quick Start guide. This will get a basic UI up and running for you, and then we can add Tailwind to this configuration. We'll use the Quick Start demo app as a starting point for the instructions in this article, but you should be able to do similar configurations in any Lynx app.

Install Tailwind

Lynx currently works best with Tailwind 3. Lynx interprets CSS for the purposes of rendering a UI, and not all CSS rules are supported. There are some Tailwind presets we'll be using to make sure it's compatible. These presets work for Tailwind 3, so that's what we'll be installing.

Install Tailwind 3, along with it's additional dependencies, and run the tailwind init

pnpm install -D tailwindcss@3 postcss postcss-loader autoprefixer

npx tailwindcss init -p

Add the Lynx Tailwind presets

You'll also need to install the Tailwind presets from the Lynx team, which will help make sure that the Tailwind rules are compatible with Lynx.

pnpm install -D @lynx-js/tailwind-preset

Add the Lynx Tailwind preset and configure your content directory in tailwind.config.js

const lynxPreset = require('@lynx-js/tailwind-preset');

/** @type {import('tailwindcss').Config} */

export default {

  presets: [lynxPreset], // Use the preset

  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],

};

Add the Tailwind CSS directives

Add the Tailwind directives at the top of src/App.css

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

:root {
  background-color: #000;
  --color-text: #fff;
}

…
…
…

Done

And that's it! We're ready to start using Tailwind in our Lynx project. This should work well for most of the Tailwind classes you'll want to use, and should appear instantly with the Lynx hot-reloading.

You should now be able to make Tailwind class changes in your layout files, like App.tsx, and see the changes appear immediately in the simulator

Host your app with pnpm run dev, launch your device simulator, open the Lynx Explorer app, and open your layout. Add some Tailwind classes to App.tsx and save the files to see the changes.

Contact Us

Are you interested in working with a team to build a native app with Lynx? Contact us using the button below for a free consultation meeting about your project!