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

【问题标题】：Import styles directly from tailwindCSS config file直接从 tailwindCSS 配置文件导入样式
【发布时间】：2022-08-05 02:47:02
【问题描述】：

我有一个用 create-react-app v5 构建的反应应用程序，我正在使用 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\" 内并且我无法将其放置在那里时，才会出现以下错误：

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

如何直接从配置文件导入 tailwindCSS 样式？我想要做的是在没有类名的情况下设置元素的样式，我想直接从配置文件中获取值以便执行以下操作：
<div>
   <p style={{color: theme.colors.blue}}>Blue Text</p>
</div>
有解决方案吗？

提前致谢

您是否尝试过指定自定义配置位置，如此处所示？ tailwindcss.com/docs/configuration#using-a-different-file-name
感谢您的评论。是的，我做到了——在 create-react-app v5 中它还不能工作

标签： reactjs tailwind-css

【解决方案1】：

我遇到了同样的问题。我做了这样的事情：

文件结构：

tailwind.config.js

const theme = require("./src/tailwind-theme");

module.exports = {
  content: [],
  theme: {
    extend: {
      colors: theme,
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
  prefix: "",
};

src/tailwind-theme.js

module.exports = { 
  transparent: "transparent",
  current: "currentColor",
  black: "#000000",
  white: "#FFFFFF",
  some custom colors... 
}

src/tailwind-config.js

import resolveConfig from "tailwindcss/resolveConfig";
const theme = require("tailwind-theme");

export const fullConfig = resolveConfig(theme);

src/index.js

import { fullConfig } from "tailwind-config";

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

免责声明：这可行，但不确定这是否是最佳解决方案！

【讨论】：