How to access tailwind.config on tailwind 4

[CodeBernardo]

I recently had to update the dependencies of a project I work on, and in the latest version of tailwind the Config function is no longer working, what approach should I follow to achieve the same result that I had in version 3?

import { useMemo } from "react"

import config from "tailwindcss/resolveConfig" // IMPORT ERROR 
// Cannot find module 'tailwindcss/resolveConfig' or its corresponding type declarations.ts(2307)

import tailwindConfig, {
  IDaisyUITheme,
  IDaisyUIThemeScheme
} from "@/tailwind.config"
import { useAtom } from "jotai"
import projectThemeAtom from "@/lite/services/atom/projectThemeAtom"

export const useProjectColors = () => {
  const [currentTheme] = useAtom(projectThemeAtom)

  const isHexadecimal = (hexString: string) => {
    return /^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/gi.test(
      hexString
    )
  }

  const memorizedFunc = useMemo(() => {
    const tailwind = config(tailwindConfig) // <== I need to access the theme in tailwind.config

    const colorScheme: IDaisyUIThemeScheme = tailwind.daisyui.themes.find(
      (theme: IDaisyUITheme) => Object.keys(theme).join("") === currentTheme
    )[currentTheme]

    const colorNames = Object.keys(colorScheme)

    const getProjectColor = (color = "primary") => {
      const isHex = isHexadecimal(color)

      if (isHex) {
        return color
      }

      return Object.entries(colorScheme).reduce(
        (pickedColor, currentColor) => {
          return currentColor[0] === color ? currentColor[1] : pickedColor
        },
        isHex ? color : "#000000"
      )
    }

    const getContrastColor = (
      background?: string,
      darkColor = "#000000",
      lightColor = "#ffffff"
    ): string => {
      const hexColor = getProjectColor(background)

      const isHex = isHexadecimal(hexColor)
      const isOneWord = hexColor.split(" ").length === 1

      if (!isHex && !isOneWord) {
        throw new TypeError(
          "The hex parameter must be a hexadecimal color. Example: '#ff8800' or '#ff8800'"
        )
      }

      const calculateRelativeLuminance = (color: string): number => {
        const parseChannel = (channel: number): number => {
          const channelRatio = channel / 255
          return channelRatio <= 0.04045
            ? channelRatio / 12.92
            : ((channelRatio + 0.055) / 1.055) ** 2.4
        }

        const r = parseInt(color.substring(1, 3), 16)
        const g = parseInt(color.substring(3, 5), 16)
        const b = parseInt(color.substring(5, 7), 16)

        const R = parseChannel(r)
        const G = parseChannel(g)
        const B = parseChannel(b)

        return 0.2126 * R + 0.7152 * G + 0.0722 * B
      }

      const contrastRatio = (
        lighterLuminance: number,
        darkerLuminance: number
      ): number => {
        const lighter = Math.max(lighterLuminance, darkerLuminance)
        const darker = Math.min(lighterLuminance, darkerLuminance)
        return (lighter + 0.05) / (darker + 0.05)
      }

      const backgroundLuminance = calculateRelativeLuminance(hexColor)
      const whiteContrastRatio = contrastRatio(backgroundLuminance, 1)
      const blackContrastRatio = contrastRatio(backgroundLuminance, 0)

      return whiteContrastRatio >= blackContrastRatio ? lightColor : darkColor
    }

    const convertColorToRag = (color: string) => {
      if (color === "error") {
        return "Red"
      }
      if (color === "accent") {
        return "Amber"
      }
      if (color === "success") {
        return "Green"
      }
      return color
    }

    return {
      colorNames,
      getProjectColor,
      getContrastColor,
      convertColorToRag,
      isHexadecimal
    }
  }, [currentTheme])

  return memorizedFunc
}

[Inventoris]

@CodeBernardo hey there!

Short answer: I think the resolveConfig function is no longer available since it is now supposed to reference CSS variables from JS.

Also here is @adamwathan answer from similar discussion here:

We can probably put together something pretty lightweight for resolving your CSS theme stuff into a JS object. The risk with all this stuff always though is shipping a bunch of unnecessary JS to the browser, which is why I always hated resolveConfig — you end up having to bundle half of Tailwind and send it to the client. Maybe we can come up with some nice way to create a JSON manifest at build-time or something though so you don't actually have to bundle the JS dependencies.

[CodeBernardo]

I saw this topic, but I would like to know if there is any alternative to get around this problem

[Inventoris]

@CodeBernardo you can use getComputedStyle to get the value of a theme variable:

let styles = getComputedStyle(document.documentElement);
let shadow = styles.getPropertyValue("--shadow-xl");

[quentinjeanningros]

@Inventoris it doesn't work, I tryed but look like tailwind variables are not in "computed style".