How to use a tailwind color inside the custom theme ?

[Decryptu]

Hello !

I'm sorry if this question if maybe more "tailwind" oriented, but could you please tell me how can I use my tailwind colors scheme inside the rainbowkit theme ?

For example, how can I use my "blue-700" for the accentColor ?

    darkMode: darkTheme({
      accentColor: "blue",
      accentColorForeground: "white",
      borderRadius: "small",
      fontStack: "system",
      overlayBlur: "small",
    }),

Thank you :)

[magiziz]

@Decryptu We use @vanilla-extract/css for styling and i think it'll be possible to use tailwind for custom theming with RainbowKit. Can you look at our custom theme docs here ?

You can definitely pass custom colors, but feel free to try adding blue-700 and if it's not working then i can try to see if i can share some code to make that possible!

[Decryptu]

Hello! Thank you for your answer. I've been trying a solution to use Tailwind colors directly without duplicating the color mapping. The idea is to import my Tailwind config and access the color values dynamically in my React components, including for the RainbowKit theme customization. Here's a brief overview of the approach:

tailwindColors.js:

const tailwindConfig = require('./tailwind.config.js');

const getColor = (colorName) => {
  const [color, shade] = colorName.split('-');
  return tailwindConfig.theme.colors[color][shade];
};

module.exports = { getColor };

And using it in the RainbowKit theme:

import { getColor } from './tailwindColors';

const customTheme = {
  colors: {
    accentColor: getColor('blue-700'),
  },
};

I'm curious to hear your thoughts on this method and any suggestions you might have! As this is only my 2nd React app, so I don't know if this is an optimal/lightweight solution.

Thank you!

[magiziz]

I think you can do it even simpler by just passing in blue-700 as a string straight to accentColor, since that's already configured as a root in your app right ?

[Decryptu]

No unfortunately its not working. My color mapping is only inside the tailwind.config.js file like here :

import tailwindcssAnimate from "tailwindcss-animate";

/** @type {import('tailwindcss').Config} */
const config = {
  darkMode: ["selector"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      white: "#ffffff",
      black: "#000000",
      blue: {
        50: "#f2f3ff",
        100: "#e7e8ff",
        200: "#d1d3ff",
        300: "#acacff",
        400: "#827eff",
      },
    },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [tailwindcssAnimate],
};

export default config;

and writing "accentColor: "blue-400", will make the text black.

[magiziz]

@Decryptu Got it. I think the best thing to do for now is to use custom colors instead of taliwind colors, e.g #000. While you do that we'll look into how we can support tailwind css.

[Decryptu]

yes thank you for your time