Writing components that are not shared between Next & Expo

[marytal]

Hi!
There are components that I don't need to share between platforms so it seemed fitting to build them out using divs in the /next app folder.

This is working fine except that the tailwind styles aren't applying properly and I can't figure out how to adjust the configs to make this happen.

I changed my pages/index.tsx file to be:

import React from 'react'

import { HomeScreen } from 'app/features/home/screen'
import { WebOnlyComponent } from '../components/WebOnlyComponent'

export const NewHomeScreen = () => {
  return (
    <>
      <WebOnlyComponent />
      <HomeScreen />
    </>
  )
}

export default NewHomeScreen

Any thoughts on why this might be? Is this a bad pattern for Solito? Should we be writing all our components in /packages/app regardless of whether they are shared or not?

[nandorojo]

I assume your tailwind config isn’t pointing to the correct directories?

[nandorojo]

(This is a fine pattern)

[marytal]

That was it 😅 .
Okay, good to know! Thank you :)

[TakshPanchal]

Hey facing the same issue, can you share which config worked for you?

[marytal]

In apps/next/tailwind.config.js

const { theme } = require('app/design/tailwind/theme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}', // I added my web only components into a new "components" directory in the next app
    '../../packages/**/*.{js,jsx,ts,tsx}',
  ],
  plugins: [require('nativewind/tailwind/css')],
  important: 'html',
  theme: {
    ...theme,
  },
}