How to add custom colors?

[stesvis]

The goal is to add custom colors as described here in the official Tailwind documentation.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    colors: {
     primary: "#f00000",
    },
  },
}

but if i do this and use the colors with

style={tw`bg-primary`}

I get the runtime error:

primary unknown or invalid utility

even tho the color is recognized:

so far the only solution that seems to work is this:

// colors.ts
export const Colors = {
  primary: "#f00000"
};

// MyComponent
import { Colors } from "./colors";

<View style={tw`bg-[${Colors.primary}]`} />

Is it possible to leverage the tailwing.config.js file instead?

[jaredh159]

this definitely works. my best guess why you might be getting that warning is that possibly you're not using a version of tw that has been initialized with your custom config, as described here:

https://github.com/jaredh159/tailwind-react-native-classnames?tab=readme-ov-file#customization

[codearis]

I have the same issue

//styles/twrnc.ts

import { create } from "twrnc";

// create the customized version...
export const tw = create(require(`../tailwind.config.js`));

// tailwind.config.js

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    colors: {
      primary: "#FBA93B",
    },
    fontFamily: {
      regular: ["Roboto-Regular", "sans-serif"],
      medium: ["Roboto-Medium", "sans-serif"],
      bold: ["Roboto-Black", "sans-serif"],
    },
    extend: {
      spacing: {
        "8xl": "96rem",
        "9xl": "128rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },

Don't know why is not working, the message is "'primary' unknown or invalid utility" when trying to use anywhere with "bg-primary". Everything else just works fine.

I also wondering why I can't use original tailwind colors? Isn't theme supposed to be extended? The definition in tailwind.config.js suggests it's replaced.

[jaredh159]

@codearis can you try moving your color customization into the "extend": key and see if that fixes it?

[codearis]

@codearis can you try moving your color customization into the "extend": key and see if that fixes it?

Tried, it broke all the colors definitions.

Edit: Nevermind, I was already using the extend key for spacing and borderRadius, moved colors to it but "bg-primary" is still unknow.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: "#FBA93B",
      },
      spacing: {
        "8xl": "96rem",
        "9xl": "128rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
    fontFamily: {
      regular: ["Roboto-Regular", "sans-serif"],
      medium: ["Roboto-Medium", "sans-serif"],
      bold: ["Roboto-Black", "sans-serif"],
    },
  },
};

[jaredh159]

strange, this is something that tons of users are doing with success, i'm not sure what might be the case with your project. it's not open source is it, so i could look at the code? or could you make a minimal reproduction for me to look at?

[codearis]

strange, this is something that tons of users are doing with success, i'm not sure what might be the case with your project. it's not open source is it, so i could look at the code? or could you make a minimal reproduction for me to look at?

I have an update on this. I was wrongly importing the tw from twrnc instead from my custom theme.

- import tw from "twrnc"
+ import { tw } from "@/styles/twrnc";

These changes fixed the errors and now I can use custom colors. Thanks for the support @jaredh159