referencing tailwind extended types in js with Nextjs framework

[MiguelG97]

What version of Tailwind CSS are you using?

"tailwindcss": "^3.4.1",

What build tool (or framework if it abstracts the build tool) are you using?

"next": "14.2.2",

What version of Node.js are you using?

v20.10.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Describe your issue

Nextjs creates the default tailwind.config.ts file structure:

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./modules/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        ...
      },
    },
  },
  plugins: [],
};

export default config;

However, when referencing the theme in another file through:

import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "@/tailwind.config";
export const themeTailwind = resolveConfig(tailwindConfig);

the extended colors types are not loaded. Is this an expected behavior using the following syntax? import type { Config } from "tailwindcss";

Kind of annoying because I needed to do the following modification for types to work properly:

/** @type {import('tailwindcss').Config} */
const config = {...}
export default config;

[dodiz]

Just add the same problem and this did the trick

In your tailwind.config.ts

const config = {
 //Your tailwind config here...
} satisfies Config;

[RobinMalfait]

Hey!

As dodiz pointed out, the satisfies Config line will do the trick. This essentially ensures that your config is valid, but it also keeps your values in the config object as-is which means that you will see the actual values you put in instead of the "generic" format we expect.

Hope this helps!