CODEWITHSUNDEEP
cssreactjstailwind-cssconfig
Mister AD
Mister AD

Reputation: 1

TailwindCss custom colors not accessible in javascript

I have an issue with the tailwindcss custom colors. We have added the custom colors in tailwind.config.js. The tailwind config file resides in the root directory.


public
src
package json
postcss config js
tailwind config js

These colors work in html tags e.g. "bg-prod-100". But we also need these colors in chart.js, where we can only assign the colors to chart using tailwindConfig().theme.colors.prod[100]

like this below

let dataObj = {
dates: [],
labels: [],
datasets: [
{
label: "Idle Minutes",
data: [],
fill: true,
backgroundColor: tailwindConfig().theme.colors.prod[100],
borderColor: tailwindConfig().theme.colors.prod[500],
borderWidth: 2,
}
]
}

Here is the tailwind.config.js file

const plugin = require("tailwindcss/plugin");
const colors = require("tailwindcss/colors");

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html",
],
theme: {
colors: {
  ...colors,
  tempBlueLight: "#06A8FF",     
  prod: {
    100: "#E8FCF6",
    200: "#A4F4D9",
  }
},
extend: {    
  outline: {
    blue: "2px solid rgba(0, 112, 244, 0.5)"
  },
  fontFamily: {
    inter: ["Inter", "sans-serif"]      
  }    
}
},
variants: [
"responsive",
"group-hover",
"visited",
"disabled"
],
plugins: [
require("@tailwindcss/forms"),
require("flowbite/plugin"),
plugin(function ({ addComponents, theme }) {
  const screens = theme("screens", {});
  addComponents([       
  ]);
})
]
};

There all the tailwind default color are available but our custom colors does not exists here tailwindConfig().theme.colors.

Accessing file from outside of src folder then this Error showing

Module not found: Error: You attempted to import ../../tailwind.config which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

Does anyone has a clue what we are doing wrong?

Upvotes: 0

Views: 482

Answers (1)

Asfak Ahmed
Asfak Ahmed

Reputation: 31

If your code is in react tailwind follow the below code for using custom colors in the tailwind config file........

copy the full code and paste it in your tailwind.config.js file

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#3B9DF8",
        secondary: "#ffffff",
        border: "#e5eaf2",
        text: "#424242",
      },
    },
  },
  plugins: [],
};

or if you have just an HTML and tailwind CSS project and want to set your custom colors in the tailwind config, follow the code below.....

@layer base {
  :root {
    --color-primary: rgb(255 115 179);
    --color-secondary: rgb(111 114 185);
    /* ... */
  }
}

Upvotes: 0

Related Questions