直接从 tailwindCSS 配置文件导入样式

Question

我有一个使用 create-react-app v5 构建的 React 应用程序，并且我正在使用 tailwindCSS v3。

我的项目的根目录是“./src”，tailwindCSS配置文件位于“./”（src之前的一个目录）。

./tailwind.config.js

我正在尝试使用以下命令导入文件：

主题.tsx 文件

//@ts-ignore
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "../tailwind.config.js";

const config = resolveConfig(tailwindConfig);
const theme: any = config.theme;
export default theme;

从 tailwindCSS v3 开始，我无法从根目录移动 tailwind 配置文件。上面的命令有效，但仅当文件位于“./src”内部并且我无法将其放置在那里时，因此出现以下错误：

找不到模块：错误：您尝试导入位于项目 src/ 目录之外的 ../tailwind.config.js。不支持 src/ 之外的相对导入。您可以将其移至 src/ 内，或从项目的 node_modules/ 添加符号链接。

如何直接从配置文件导入 tailwindCSS 样式？我想要做的是在没有类名的情况下设置元素的样式，我想直接从配置文件获取值，以便执行如下操作：

<div>
   <p style={{color: theme.colors.blue}}>Blue Text</p>
</div>

有解决办法吗？

提前致谢

Answer 1

我遇到了同样的问题。因此，我在 src 内又创建了一个 tailwind.config 并从那里导出为模块。

文件结构：

tailwind.config.js

const tailwindConfig = require("./src/tailwind.config");

module.exports = tailwindConfig;

src/tailwind.config.js

module.exports = { 
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/tailwind-theme.js

import resolveConfig from "tailwindcss/resolveConfig";
const tailwindConfig = require("./tailwind.config");

const config = resolveConfig(tailwindConfig);
const theme = config.theme;
export default theme;

src/index.js

import theme from "tailwind-theme";

<div>
  <p style={{color: theme.colors.blue}}>Blue Text</p> 
</div>