Fetch colors from an API to dynamically update the colors in tailwind.config.ts using Next.js

Question

Fetch colors from an API to dynamically update the colors in tailwind.config.ts using Next.js

When I decided to incorporate SEO into my React project, I opted for Next.js. However, I encountered an issue when trying to load colors from the backend to be used in tailwind.config.ts. Does anyone know how to accomplish this with Next.js?

css reactjs next.js tailwind-css

Answer 1

Answer №1

Here is a demonstration showcasing the process of pulling data from the backend to incorporate into tailwindcss.config

// tailwind.config.js
const fetch = require('node-fetch');

module.exports = {
  // ...

  theme: {
    extend: {
      // ...

      colors: {
        // Accessing colors through an API endpoint.
        primary: async () => {
          const response = await fetch('/api/colors');
          const data = await response.json();
          return data.colors.primary || 'red'; // Fallback color if not available.
        },
        // Additional colors can also be included here...
      },
    },
  },
};

Answer 2

Here is a demonstration showcasing the process of pulling data from the backend to incorporate into tailwindcss.config

// tailwind.config.js
const fetch = require('node-fetch');

module.exports = {
  // ...

  theme: {
    extend: {
      // ...

      colors: {
        // Accessing colors through an API endpoint.
        primary: async () => {
          const response = await fetch('/api/colors');
          const data = await response.json();
          return data.colors.primary || 'red'; // Fallback color if not available.
        },
        // Additional colors can also be included here...
      },
    },
  },
};

Answer 3

Answer №2

Success! Many thanks to all who helped me find the solution.

This is what's in my _app.tsx:

import "@src/assets/css/app.css";
import type { AppProps } from "next/app";
import { useEffect } from "react";

function MyApp({ Component, pageProps }: AppProps) {
  const getColors = async () => {
    const res = fetch("api/colors");
    console.log(res);
  };

  useEffect(() => {
    let primaryColor = "105, 240, 141";

    const head = document.querySelector("head");
    if (head && !head.textContent.includes(":root")) {
      head.innerHTML += `
        <style>
          :root {
            --primary-color: ${primaryColor};
          }
        </style>
      `;
    }
  });

  return <Component {...pageProps} />;
}

export default MyApp;

In the tailwind.config.js:

theme: {
    extend: {
      colors: {
        primary: ({ opacityVariable, opacityValue }) => {
          if (opacityValue !== undefined) {
            return `rgba(var(--primary-color), ${opacityValue})`;
          }
          if (opacityVariable !== undefined) {
            return `rgba(var(--primary-color), var(${opacityVariable}, 1))`;
          }
          return `rgb(var(--primary-color))`;
        },
      },
    },
  },

Answer 4

Success! Many thanks to all who helped me find the solution.

This is what's in my _app.tsx:

import "@src/assets/css/app.css";
import type { AppProps } from "next/app";
import { useEffect } from "react";

function MyApp({ Component, pageProps }: AppProps) {
  const getColors = async () => {
    const res = fetch("api/colors");
    console.log(res);
  };

  useEffect(() => {
    let primaryColor = "105, 240, 141";

    const head = document.querySelector("head");
    if (head && !head.textContent.includes(":root")) {
      head.innerHTML += `
        <style>
          :root {
            --primary-color: ${primaryColor};
          }
        </style>
      `;
    }
  });

  return <Component {...pageProps} />;
}

export default MyApp;

In the tailwind.config.js:

theme: {
    extend: {
      colors: {
        primary: ({ opacityVariable, opacityValue }) => {
          if (opacityValue !== undefined) {
            return `rgba(var(--primary-color), ${opacityValue})`;
          }
          if (opacityVariable !== undefined) {
            return `rgba(var(--primary-color), var(${opacityVariable}, 1))`;
          }
          return `rgb(var(--primary-color))`;
        },
      },
    },
  },

Fetch colors from an API to dynamically update the colors in tailwind.config.ts using Next.js

Answer №1

Answer №2

Similar questions

Leverage the power of JavaScript by utilizing it as the view

The MUI Link embedded in my Next.js 13 project is not functioning properly within an IconButton

Utilizing React and Yup Validation efficiently (No need for Formik)

Bullet points colliding with one another

"The CSS animation effect for underlining text does not seem to be

Can elements be eliminated from a div based on their order?

Looking for guidance on restructuring a JSON object?

What is the process for transmitting information from an express server to a client in Next.js?

Is it possible to concurrently run two instances of ReactI18Next within a single application?

I encountered an issue while making customizations to my default next.config.js file. Despite attempting various solutions, I consistently encountered an error regarding the invalid src property

CSS: Finding the perfect alignment while using floating elements

Transforming the MUI CircularProgress into a half circle shape

Transform a cropped portrait image into a resized landscape cover using CSS

Issue with Material UI: Background elements inaccessible while MUI Dialog is active

Is there a way to retrieve two distinct values from an object?

Tips for utilizing ion view within an ionic 2 application

Utilizing CSS and jQuery to align images in the center of the screen

Optimizing Bootstrap 4 Flex-Row Dimensions

When the parent element has a fixed position, the child element will no longer maintain its floating property

the menu didn't glide into view