使用 @config 指令时，tailwind.admin.config.js 中的 CSS 不会覆盖 tailwind.config.js

Question

我在这个项目中使用 Vite.js 和 React。 我在文档中有一个类似

tailwind.admin.css

的示例

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

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

这是我的

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',
    },
  },
}

但是主要仍然

#0090DA

就像

tailwind.config.js

中的配置

在CSS文件中可以找到tailwind.admin.config.js所以链接是正确的（如果不正确终端会警告）。所以我尝试修改

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',
      },
    },
  }
}

我发现没有控制台。所以我认为由于某种原因它在声明时没有调用模块内的函数

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

请告诉我哪里出了问题以及如何修复它。

我哪里出了问题以及如何解决。

Answer 1

解决方案#1

您应该根据

文档

使用module.exports声明配置。

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',
    },
  },
}

解决方案#2

要使用

export

关键字，您需要使用

.mjs

，它代表 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

这有利于清晰，即它清楚地表明哪些文件是模块，哪些是常规 JavaScript。

您的

content

声明的文件结构

可以根据提供的代码片段重建文件结构，如下所示：

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
...

如果我们考虑“一般情况”，那么这确实是不正确的，但我不熟悉你的项目和你打算创建的内容。不过，我可以告诉你问题可能出在哪里。 （因为我假设您的

src

文件夹不在

configs

文件夹内，并且您的

app.css

文件不在

src

文件夹之外。）

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
...