Working with sibling directory files

[yoodame]

TailwindCSS Not Watching *.cljs Files in Sibling Directory with GlueStack-UI

Description:
I’m having trouble getting TailwindCSS to properly watch *.cljs files located in a sibling directory while using GlueStack-UI with NativeWind in an Expo React Native app.

Setup:

• Framework: Expo
• UI Library: GlueStack-UI
• Styling: NativeWind + TailwindCSS
• Codebase: JS (.js) + ClojureScript (.cljs)
• Structure:

/mobile (Expo root)
  ├── tailwind.config.js
  ├── metro.config.js
/src (Sibling directory)
  ├── main/
      ├── components/header.cljs

Key Configurations

tailwind.config.js:

const path = require('path');
module.exports = {
  content: [
    path.resolve(__dirname, '../src/main/**/*.{cljs,cljc}'),
    './app/**/*.{js,jsx,ts,tsx}',
  ],
};

metro.config.js:

const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');
const config = getDefaultConfig(__dirname);

config.watchFolders = [path.resolve(__dirname, '../src/main')];
config.resolver.sourceExts = ['js', 'jsx', 'ts', 'tsx', 'cljs', 'cljc'];

module.exports = config;

What I Tried:

1. Added sibling path to tailwind.config.js.

2. Verified sibling files are detected in --dry-run:

npx tailwindcss --content ../src/main/**/*.{cljs,cljc} --dry-run

3. Updated watchFolders and sourceExts in metro.config.js.

4. Cleared Metro cache: expo start --clear.

Issue:

• Tailwind detects *.cljs files in --dry-run.
• Styles from *.cljs files are not applied during development (expo start).

Questions:

1. Does NativeWind support sibling directories in the content array?
2. Are there recommended approaches for sibling directories in GlueStack + Expo projects?
3. Could Metro Bundler interfere with Tailwind’s file scanning?

Any insights would be greatly appreciated! 🚀 Thanks! 😊

[yoodame]

Solved!

I wanted to share the solution I found for TailwindCSS not applying styles from *.cljs files in a sibling directory while using GlueStack-UI with NativeWind in an Expo app.

1. Ensure Tailwind is Watching *.cljs Files in content
   Update your tailwind.config.js to include the sibling directory:

content: [
    "../src/main/app/**/*.{cljc,cljs}", // Watch ClojureScript files in sibling directory
    "components/**/*.{tsx,jsx,ts,js}"  // Watch local JS/TSX files
],

This ensures Tailwind detects changes in your *.cljs files.

2. Import global.css in Your Main Entry File
   In your index.js (or main entry file), make sure to explicitly import global.css:

import "@/global.css"; // This is critical to initialize Tailwind styles
import "./app/index.js"; // Generated shadow-cljs entry file

global.css initializes the TailwindCSS styles, and without it, styles from *.cljs files won’t be applied correctly.

Why This Fix Works
• Tailwind content: Properly tells Tailwind where to watch for class names, including *.cljs files.
• Importing global.css: Ensures that TailwindCSS runtime styles are applied globally, including the dynamically generated ones from NativeWind.