Installation

yarn add tamagui react-native-web

# for web, webpack, only:
yarn add tamagui-loader
# for react-native, only:
yarn add @tamagui/babel-plugin

const { shouldExclude } = require('tamagui-loader')

const tamaguiOptions = {
  config: './tamagui.config.ts',
  components: ['tamagui'],
  importsWhitelist: ['constants.js', 'colors.js'],
  logTimings: true,
  disableExtraction: process.env.NODE_ENV === 'development',
}

const projectRoot = __dirname

module.exports = {
  resolve: {
    alias: {
      // Resolve react-native to react-native-web
      'react-native$': require.resolve('react-native-web'),
      'react-native-web$': require.resolve('react-native-web'),
      // @tamagui/rnw exports a couple internal hooks from react-native-web
      // resolve both to CommonJS so they match
      '@tamagui/rnw': require.resolve('@tamagui/rnw'),
      // optional, for svg icons
      'react-native-svg': require.resolve('react-native-svg-web'),
    }
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        // you'll likely want to adjust this helper function,
        // but it serves as a decent start that you can copy/paste from
        exclude: path => shouldExclude(path, projectRoot, tamaguiOptions),
        use: [
          // optionally thread-loader for significantly faster compile!
          'thread-loader',

          // works nicely alongside esbuild
          {
            loader: 'esbuild-loader',
            options: {
              loader: 'tsx',
              minify: process.env.NODE_ENV === 'production',
            },
          },

          {
            loader: 'tamagui-loader',
            options: tamaguiOptions,
          },
        ]
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.TAMAGUI_TARGET': '"web"',
    })
  ]
}

// note next-compose-plugins somewhat unmaintained
// you can use a simple two-liner instead, see:
// https://github.com/cyrilwanner/next-compose-plugins/issues/59#issuecomment-1192523231
const withPlugins = require('next-compose-plugins')
const { withTamagui } = require('@tamagui/next-plugin')

export default withPlugins([
  // All options shows are optional, except config:
  withTamagui({
    // Path to your tamagui.config.ts file:
    config: './tamagui.config.ts',

    // Your design system (default: "tamagui")
    components: ['tamagui'],

    // Follow normalized imports matching these file names, attempt to evaluate
    // their exports for static extraction
    importsWhitelist: ['constants.js', 'colors.js'],

    // display detailed output (default true)
    logTimings: true,

    // disable static extraction, faster to iterate in dev mode (default false)
    disableExtraction: process.env.NODE_ENV === 'development',

    // disableExtraction only disables optimizations but keeps the debug ability and output
    // if you want faster builds, you can disable tamagui entirely with this (default false)
    disable: false,

    // Exclude react-native-web modules to lighten bundle
    excludeReactNativeWebExports: ['Switch', 'ProgressBar', 'Picker'],

    // The following options are for more unusual configurations

    // By default, we configure webpack to pass anything inside your root or design system
    // to the Tamagui loader. If you are importing files from an external package, use this:
    shouldExtract: (path: string, projectRoot: string) => {
      if (path.includes('../packages/my-app')) {
        return true
      }
    },

    // Many packages give difficulty to the nextjs server-side (node) runtime when un-bundled.
    // for example, tamagui configures aliases like `react-native` => `react-native-web`.
    // if you're running into a module that has errors importing react-native, you'll want to
    // use a custom shouldExcludeFromServer function to include it (or override the default).
    // this is the exact same return type as webpack.externals.
    // returning undefined will let tamagui handle it, boolean or other values to override.
    shouldExcludeFromServer: ({ fullPath, request }) => {
      if (fullPath.includes('my-module')) {
        return `commonjs ${commonjs}`
      }
      if (request === 'some-hard-to-bundle-package') {
        return true
      }
    }
  })
])

// only use babel-plugin for native:
process.env.TAMAGUI_TARGET = 'native'

module.exports = {
  plugins: [
    [
      '@tamagui/babel-plugin',
      {
        components: ['tamagui'],
        config: './tests/lib/tamagui.config.js',
        importsWhitelist: ['constants.js', 'colors.js'],
        logTimings: true,
        disableExtraction: process.env.NODE_ENV === 'development',
      }
    ],
    // be sure to set TAMAGUI_TARGET
    ['transform-inline-environment-variables', {
      include: 'TAMAGUI_TARGET'
    }]
  ]
}

import { createTamagui } from 'tamagui'

const config = createTamagui({
  // Initial theme
  defaultTheme: 'light',

  // Generates @media(prefers-color-scheme) queries for light/dark
  shouldAddPrefersColorThemes: true,

  // Shorthand properties
  shorthands: {
    px: 'paddingHorizontal',
  },

  // Themes, light/dark are treatest special
  themes: {
    light: {
      bg: '#fff',
      color: '#000'
    }
  },

  media: {
    xs: { maxWidth: 660 },
    gtXs: { minWidth: 660 + 1 },
    sm: { maxWidth: 860 },
    gtSm: { minWidth: 860 + 1 },
    md: { minWidth: 980 },
    gtMd: { minWidth: 980 + 1 },
    short: { maxHeight: 820 },
    tall: { minHeight: 820 },
    hoverNone: { hover: 'none' },
    pointerCoarse: { pointer: 'coarse' },
  },

  // ... see Themes docs
  tokens: {},
  fonts: {},
  animations: {},
})

type Conf = typeof config

declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}

export default config

import React, { Suspense } from 'react'

import Tamagui from './tamagui.config'

export default function App() {
  return (
    <Tamagui.Provider>
      {/* if you use suspense, you'll want one here */}
      <Suspense>{/* The rest of your app here */}</Suspense>
    </Tamagui.Provider>
  )
}

import '@tamagui/core/reset.css'

import { Button } from 'tamagui'

export default function Demo() {
  return <Button>Button</Button>
}