Importing tailwind config in Nuxt

up:: TailwindCSS

Component

<script setup>
import tailwindConfig from "#tailwind-config";
const tailwindTheme = tailwindConfig.theme;
</script>

Nuxt config

nuxt.config.ts:

  tailwindcss: {
    viewer: false,
    exposeConfig: true,
    }

Getting the color

const colorNameToHex = (str) => {
  const splitStr = str.split("-");
  if (splitStr[0] === str) {
    // string is not hypen seperated
    return tailwindColors[str];
    return "success";
  }
  let colorName = splitStr[0];
  let colorWeight = splitStr[1];
  return tailwindColors[colorName][colorWeight];
};
 
const testVar = colorNameToHex("red-400");
console.log(testVar);