TailwindCSS Certain Custom Colors Don't Work

Question

I'm currently using NativeWind for a React Native project and I am having some issues with custom colors rendering in the project. NativeWind is built on top of TailwindCSS so I think the issue is the same as in TailwindCSS.

I have some custom colors in the tailwind.config.js file and most of them render fine in the codebase. However, certain ones don't render.

tailwind.config.js

module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/screens/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
    "./src/components/MapComponents/**/*.{js,jsx,ts,tsx}",
    "./src/assets/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontSize: {
        xs: "11px",
        sm: "12px",
        base: "15px",
        lg: "18px",
        xl: "20px",
        "2xl": "26px",
        "3xl": "32px",
      },
      colors: {
        gray: {
          base: "#e5e7eb",
          dark: "#69686D",
        },
        blue: {
          accent: "#0085ff",
          dark: "#5a49d9",
        },
        red: {
          base: "#FF0000",
        },
        food: {
          inner: "#ffc0c1",
          outer: "#ff6665",
        },
        deal: {
          inner: "#7ba8cc",
          outer: "#277bc0",
        },
        challenge: {
          inner: "#cfc0fe",
          outer: "#7446ae",
        },
        event: {
          inner: "#f09b72",
          outer: "#ea047e",
        },
        music: {
          inner: "#76ba99",
          outer: "#00ffab",
        },
        sport: {
          inner: "#F87070",
          outer: "#FE3E3E",
        },
        outdoors: {
          inner: "#4ABE21",
          outer: "#49AC26",
        },
        business: {
          inner: "#DEEE2B",
          outer: "#CEDD26",
        },
      },
    },
  },
  plugins: [],
};

Rendering a View container with bg-blue-accent, it renders the background color of that View to the associated custom color. However, bg-food-outer does not work for some reason. Along with others like deal, challenge, music, etc. I also have the tailwind extension from vscode that shows the css code for the tailwindstyle and in the code base when I type bg-food-outer, it shows the right css color.

I tried doing expo start -c to clear the cache but that doesn't seem to work either. How can I render the rest of the custom colors?

I have the same issue, and I follow this steps: stackoverflow.com/questions/73584046/…. — Lucas
– Lucas, Commented Jan 22, 2023 at 23:14

Nataniel O. · Accepted Answer · 2023-06-07 08:04:03Z

4

I assume you're using NativeWind, since support for TailwindCSS ended for React Native recently.

First stop the expo server. Then, instead of starting it with expo start, run expo start -c to wipe the cache that NativeWind adds and restart the server.

Source: https://www.nativewind.dev/guides/troubleshooting

answered Jun 7, 2023 at 8:04

Nataniel O.

414 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cayce Collins Over a year ago

Thanks, I overlooked this in the docs!

Ethan Jun 24 at 19:23

Same goes in storybook with react native web. Make sure to restart the server

Dolat Hamza · Accepted Answer · 2024-08-27 15:31:48Z

You could try using the safelist approach in your tailwind.config.js file. this explicitly lists the custom classes that tailwind should generate, thus preventing them from being purged during build process Here is a sample code on how you can implement the safelist approach in your tailwind.config.js file:

module.exports = {
  content: ["./App.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}"],
  safelist: ['bg-food-outer', 'bg-deal-inner', 'bg-challenge-outer'],
  theme: {
    extend: {
      colors: {
        food: { outer: "#ff6665" },
        deal: { inner: "#7ba8cc" },
        challenge: { outer: "#7446ae" }
      }
    }
  },
};

After making the changes try restarting the server, it helped me in my case when i was facing this error

Collectives™ on Stack Overflow

TailwindCSS Certain Custom Colors Don't Work

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related