custom color in tailwind config file not being recognized

[vital-tech-results]

Everything works great on this package. The docs are clear and helpful. I only have one issue. When I add a custom color to tailwind.config.js it's not registering. I've restarted expo but still doesn't work. This is my config file for tailwind:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./screens/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        "regal-blue": "#50d71e",  // this part is not working
      },
    },
  },
  plugins: [],
};

Do you have any suggestions? It's running
expo 5.4.11
react-native": "0.68.2
react": "17.0.2

[marklawlor]

Hey @vital-tech-results, can you please run the official Tailwind CLI on your project to generate a .css file to see if it includes your custom colours?

Which version of the library are you using as well?

[vital-tech-results]

Thanks for the quick reply @marklawlor

I'm running the following:

"nativewind": "^2.0.0-next.10"
"tailwindcss": "^3.1.3",
"typescript": "~4.3.5"

Apologies, I'm not sure what you meant by "which version of the library" I am using. I guess you mean your nativewind nom package?

I will look into the official Tailwind CLI you mentioned.

[vital-tech-results]

I looked at the official docs but I'm not sure how to build on a react-native project built using expo SDK. I will keep looking. The docs say:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

but this appears to target a single CSS file and output it into a dist directory. But there are several files using tailwind so I'll need to investigate further on how to output tailwind in a react-native project.

[marklawlor]

That command is correct. This library converts the CSS generated by the official tool into RN code - so if you don't see your custom class in the .css output then it's not being processed by RN either.

The content option of tailwind.config.js controls what classes are being processed. If your colour is not in the .css output it's probably not being included in the content glob

[vital-tech-results]

I may be confused but my project doesn't have .src directory. Instead I ran this code in the terminal in VS Code:

npx tailwindcss -i ./screens/* -o ./dist/output.css

I replaced src with screens and used * to indicate everything in the screens directory.

However, I don't see a file called output.css in my dist directory.

Attached is a screenshot of my project structure.

Thank you,

DJ

[marklawlor]

@vital-tech-results Let's take a couple of steps back and do troubleshooting 101: Does it work in a Hello World example.

Can you please follow the instructions in the quick start guide to create a new project with your custom color. If this doesn't work can you please post that code in a public repo.

If it does work, the only difference between the Hello World example and your main project should be the content setting of your tailwind.config.js. You can read more about that setting on the Tailwind CSS website https://tailwindcss.com/docs/content-configuration.

If your content is not correct, Tailwind CSS will not work - hence this library will not work.

In the examples I use ./src/**.* as an example of a content string because this is a common project folder structure and how the Tailwind CSS documentation is written. It's not a requirement to have a src directory, and if your folder structure is different, then you need to customise the content option to match your folder structure.

[vital-tech-results]

I installed a fresh project using the Quick Start guide and it works as expected in the Hello World project. I will take a look at the docs you mentioned.

Thanks for your support. This is a very practical package that solves a real problem. Thanks for creating this package.

[marklawlor]

Thanks for the support 💯

I'm going to close this issue as there doesn't appear to be an issue with custom colors, but you can still respond with questions if you need help debugging.

[fikkatra]

@vital-tech-results did you find what the problem was in your code? Running into the same issue.

[vital-tech-results]

Yes, I had to modify the content setting in the tailwind.config.js file.

Just like @marklawlor mentioned:

If it does work, the only difference between the Hello World example and your main project should be the content setting of your tailwind.config.js. You can read more about that setting on the Tailwind CSS website https://tailwindcss.com/docs/content-configuration.

If your content is not correct, Tailwind CSS will not work - hence this library will not work.

In the examples I use ./src/**.* as an example of a content string because this is a common project folder structure and how the Tailwind CSS documentation is written. It's not a requirement to have a src directory, and if your folder structure is different, then you need to customise the content option to match your folder structure.

[fikkatra]

Checked and double checked the config, I'm sure the right files are included. Since it's working for you, I'm sure it must be something on my side. But the strange thing is, if I switch back to using the tailwindcss-react-native package, using the exact same code and config (apart from adding the TailwindProvider), it works.

To clarify, with 'it doesn't work' I mean that when I define a custom color 'primary', and add the className text-primary on a Text component, it doesn't have any effect. With tailwindcss-react-native however, I see the text displaying in the primary color.

[marklawlor]

@fikkatra Can you publish a repo with a demonstration of your issue, I cannot replicate it on a new project.

Changing between tailwindcss-react-native and nativewind shouldn't matter as both just use Tailwind's compiler to process your theme.

You can test your projects configuration directly with Tailwind CLI. Run npx tailwind -o test.css and then open test.css and inspect the generated css for your custom color. If it didn't then you have a configuration issue with your project.

[fikkatra]

@marklawlor thanks a lot for looking into it. Here's a minimal repro: https://github.com/fikkatra/nativewind-repro

I can confirm that test.css contains the class .text-primary after running npx tailwind -o test.css. This was expected, as I use the exact same config as I do when using tailwindcss-react-native, so I believe this config is correct. The only problem is applying text-primary as a className, which doesn't seem to have any effect.

[marklawlor]

@fikkatra Can you try version 2.0.0-next.53 - I forgot that DEFAULT was a valid tailwind config option and it was interfering with the platform themes.

[crstnmac]

@fikkatra Can you try version 2.0.0-next.53 - I forgot that DEFAULT was a valid tailwind config option and it was interfering with the platform themes.

Using the mentioned version. Stil same issue.

colors.js

module.exports = {
  coral: {
    DEFAULT: '#D2D9E9',
    50: '#E0E5F0',
    100: '#D2D9E9',
    200: '#ACB9D7',
    300: '#8799C4',
    400: '#617AB2',
    500: '#485F93',
    600: '#35466D',
    700: '#232E47',
    800: '#111622',
    900: '#000000',
  },
}

tailwind.config.,js

const colors = require('./src/utils/colors')

module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './screens/**/*.{js,jsx,ts,tsx}',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      colors,
      fontFamily: {
        satoshiRegular: ['Satoshi-Regular', 'sans-serif'],
        satoshiBold: ['Satoshi-Bold', 'sans-serif'],
        satoshiLight: ['Satoshi-Light', 'sans-serif'],
        satoshi: ['Satoshi-Medium', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

[marklawlor]

Instead of commenting "same here" can you please share either your tailwind.config.js or your repo. This issue should be resolved, so if it's still occuring then I need more information.

[crstnmac]

Instead of commenting "same here" can you please share either your tailwind.config.js or your repo. This issue should be resolved, so if it's still occuring then I need more information.

My apologies, I edited the comment.

[crstnmac]

Custom colors worked after hard cleaning the proj

For Windows

del %appdata%\Temp\react-native-* & cd android & gradlew clean & cd .. & del node_modules/ & npm cache clean --force & npm install & npm start -- --reset-cache

[fikkatra]

@fikkatra Can you try version 2.0.0-next.53 - I forgot that DEFAULT was a valid tailwind config option and it was interfering with the platform themes.

I can confirm that with version 2.0.0-next.53, custom colors and their util classes work. Thanks a lot @marklawlor !

[chaosLegacy]

Is there a way to import the colors from a typescript file into tailwind.config.js?
I already added
/** @type {import('tailwindcss').Config} */
to support types but my inteliiSense crashes Tailwind CSS: Can't resolve './src/constants/colors'

Here is my colors.ts file

export const Colors = {
  blue: {
    light: '#ECEDF7',
    DEFAULT: '#212A85',
  },
  green: {
    light: '#EDFFFE',
    DEFAULT: '#02B6A9',
  },
  red: {
    light: '#FDE2DE',
    DEFAULT: '#F3705A',
  },
  yellow: {
    light: '#FFFAE9',
    DEFAULT: '#FFD15C',
  },
  grey: {
    lightest: '#F8F9FB',
    button: '#F0F1F5',
    medium: '#CED0DF',
    light: '#c3c9da',
    DEFAULT: '#83869A',
    ripple: 'rgba(50, 50, 50, 0.1)',
  },
  black: {
    darkest: '#000000',
    DEFAULT: '#414458',
  },
  white: '#FFFFFF',
  transparent: 'transparent',
  orange: {
    DEFAULT: '#FD7A02',
  },
};

And here is my tailwind.config.js

/** @type {import('tailwindcss').Config} */
const { Colors } = require('./src/constants/colors');
const brandTheme = require('./src/constants/theme');
module.exports = {
  darkMode: 'class',
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      // ...brandTheme,
      colors: {
        primary: Colors.green
      },
    },
  },
  plugins: [],
}

It works for importing .js file like brandTheme for example but not typescript, now I need the same code of my colors inside tailwind.config.js and colors.ts to bypass this error

[marklawlor]

No, Tailwind CSS only understands .js files.

If you'd like types in your colors file, just add them via comments https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html

[chaosLegacy]

Thank you for your answer, is there a way to make my theme.js readable in my typescript project?
I've added

    "allowJs": true,
    "checkJs": false,

in my tsconfig.json
I tried with

const theme = require('~/constants/theme');
import * as theme from ('~/constants/theme');

my theme.js file look like this

module.exports = {
  colors: {
    primary: {
      50: '#f4f5f9',
      100: '#dec9e9',
      200: '#dac3e8',
      300: '#c19ee0',
      400: '#b185db',
      500: '#a06cd5',
      600: '#9163cb',
      700: '#815ac0',
      800: '#7251b5',
      900: '#6247aa',
      DEFAULT: '#a06cd5',
    }
  },
};

but my project keep crashing

any idea how to fix this 🙏

[marklawlor]

https://www.nativewind.dev/guides/theme-values

[chaosLegacy]

@marklawlor really appreciate your help, but I'm not able to make it work as I can't import .js files into my projects,

// HomeScreen.tsx
import colors from "./colors";

export function MyActivityIndicator(props) {
  return <ActivityIndicator size="small" color={colors.tahiti.500} {...props} />;
}

I keep getting the same error as above

// HomeScreen.tsx
import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

Do I need to make extra changes in my babel.config.js or tsconfig.json?

[marklawlor]

Your importing import tailwindConfig from './tailwind.config.js', which means Metro is looking for a file called tailwind.config.js.js.

Unless you are using ESM, you do not include the file extension when importing files.

[chaosLegacy]

Still not working, when removing the file extension as you mentioned
import tailwindConfig from './tailwind.config'
I started getting the same error as the first time

Unexpected token '{'. import call expects exactly
one argument.
Unexpected token '{'. import call expects exactly
one argument.
no stack
no stack

//babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      "tailwindcss-react-native/babel",
      'react-native-reanimated/plugin',
      ["module:react-native-dotenv", {
        "moduleName": "@env",
        "path": ".env",
        "blacklist": null,
        "whitelist": null,
        "safe": false,
        "allowUndefined": true
      }],
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '~': './src',
            assets: './assets',
          },
        },
      ],
    ],
  };
};

//tailwind.config.js
const brandTheme = require('./src/constants/theme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./App.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      ...brandTheme,
      fontFamily: {
        satoshiRegular: ['Satoshi-Regular', 'sans-serif'],
        satoshiBold: ['Satoshi-Bold', 'sans-serif'],
        satoshiLight: ['Satoshi-Light', 'sans-serif'],
        satoshi: ['Satoshi-Medium', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

//tsconfig.js
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": ".",
    "allowJs": true,
    "checkJs": false,
    "strict": true,
    "paths": {
      "~/*": ["./src/*"],
      "assets/*": ["./assets/*"]
    }
  }
}

[marklawlor]

This doesn't appear to be an issue with NativeWind, an unfortunately I do not have the capacity to debug your project.

I would recommend following simple troubleshooting:

• can you import other js files
• does the same problem occur when creating a new project

Then you can use simple isolation techniques to find your cause.

[wizevlad]

this is also happening on version 2.011 @marklawlor

[marklawlor]

@wizevlad Please provide a code example. This issue has been resolved, all other reports I have received have been human error