Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Added extend color doesn't work in TailwindCSS

I’m trying to create a custom color and name it primary but it doesn’t seem to work. It works when using other names but it feels like there should be a way to naming it primary? What am I missing?

tailwind.config.js

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

example.jsx

<nav class="flex items-center justify-between flex-wrap bg-primary p-6">
  ...
</nav>
Tags:

2

Answers


  1. 0

    It seems like problem is with your config according to tailwind docs. Removing extends is how it should work. Your code will become

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
      colors: {
        primary: "red",
      },
  },
  plugins: [],
};
    Login or Signup to reply.
  2. 0

    Probably you’re using pre-built tailwind.css that’s why your changes is not affected, please check your project "style build" scripts under package.json if you’re using some kind boilerplate

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search