CSS from tailwind.admin.config.js not overriding tailwind.config.js when using @config directive

I am using Vite.js and React for this Project. I have a tailwind.admin.css like example in docs

@config './configs/tailwind.admin.config.js';

@tailwind base;
@tailwind components;
@tailwind utilities;

And this is my tailwind.admin.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
    colors: {
      secondary: '#999999',
      primary: '#000000',
    },
  },
}

But primary still #0090DA like the config in tailwind.config.js

In CSS file can find tailwind.admin.config.js so the link is right (if it is not right the terminal will warning). So I try modify tailwind.admin.config.js

/** @type {import('tailwindcss').Config} */

console.log(123123123)
export default function a() {
  console.log(12312312312312312312)
  return {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
      extend: {},
      colors: {
        secondary: '#999999',
        primary: '#000000',
      },
    },
  }
}

And I found that there is no console. SO that I think for some reason it has not call the function inside the module when declare @config './configs/tailwind.admin.config.js'

Can you show me where I have gone wrong and how to fix it, please.

Where I have gone wrong and how to fix it.

Solution # 1

You should declare the configuration using module.exports according to the documentation.

tailwind.admin.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
    colors: {
      secondary: '#999999',
      primary: '#000000',
    },
  },
}

Solution # 2

To use the export keyword, you need to use .mjs, which stands for Module JavaScript.

tailwind.admin.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
    colors: {
      secondary: '#999999',
      primary: '#000000',
    },
  },
}

.mjs vs .js

It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.

File Structure declared by your content

The file structure can be reconstructed from the provided code snippets as follows:

server
├── your-project
│   ├── app.css                      <--- 1. with your original @config
│   ├── configs
│   │   ├── tailwind.admin.config.js <--- 2. new config file (with your original content)
│   │   ├── src                      <--- 3. on your config file has relative path
│   │   │   ├── example.js
│   │   │   ├── example.ts
│   │   |   └── ...
│   │   └── index.html
...

If we consider the "general case", then this is indeed incorrect, but I am not familiar with your project and what you intend to create. However, I can show you where the problem might be. (Since I assume your src folder is not located inside the configs folder, and your app.css file is not outside the src folder.)

server
├── your-project
│   ├── tailwind.admin.config.js     <--- 2. new config file (with your original content)
│   ├── src                          <--- 3. on your config file has relative path
│   │   ├── app.css                  <--- 1. with @config './../tailwind.admin.config.js';
│   │   ├── example.js
│   │   ├── example.ts
│   │   └── ...
│   └── index.html
...