如何通过URL在PostCSS中获取Tailwind配置文件？

直接在PostCSS配置里用GitHub URL指定Tailwind配置是行不通的——Tailwind的config选项只接受本地文件路径或者直接传入配置对象，不支持远程URL。下面是正确的实现步骤：

一、获取远程Tailwind配置的正确方式 #

方法1：将远程配置作为依赖包安装（推荐，适合最终做成独立包的场景） #

如果目标仓库可以发布为npm包，直接安装到项目中：

npm install github:dnlklmn/polkadot-theme

然后在PostCSS配置里引用本地安装的配置文件：

module.exports = {
  plugins: {
    tailwindcss: { config: './node_modules/polkadot-theme/tailwind.config.cjs' },
    autoprefixer: {},
  },
}

方法2：手动下载配置文件到本地 #

直接把远程的tailwind.config.cjs下载到项目本地目录（比如./config/tailwind.config.cjs），然后配置本地路径：

module.exports = {
  plugins: {
    tailwindcss: { config: './config/tailwind.config.cjs' },
    autoprefixer: {},
  },
}

方法3：通过脚本拉取远程配置（适合自动化场景） #

在项目的package.json里添加预处理脚本，在构建前拉取最新的配置文件：

{
  "scripts": {
    "fetch-tailwind-config": "curl -o ./tailwind.remote.config.cjs https://raw.githubusercontent.com/dnlklmn/polkadot-theme/main/tailwind.config.cjs",
    "build": "npm run fetch-tailwind-config && vite build" // 替换成你的实际构建命令
  }
}

然后PostCSS配置引用拉取后的本地文件：

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.remote.config.cjs' },
    autoprefixer: {},
  },
}

二、加载远程CSS文件的方式 #

方式1：在项目主CSS文件中通过@import引入（需PostCSS支持） #

如果远程CSS是包含@tailwind指令的入口文件，可在主CSS里直接导入：

@import 'https://raw.githubusercontent.com/dnlklmn/polkadot-theme/main/src/styles/main.css';

注意：需要安装postcss-import插件支持该功能：

npm install postcss-import

更新PostCSS配置：

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: { config: './path/to/your/tailwind.config.cjs' },
    autoprefixer: {},
  },
}

方式2：下载远程CSS文件到本地后引入 #

和配置文件逻辑一致，手动或通过脚本拉取CSS到本地，再在项目中引入：

@import './styles/remote-theme.css';

关键注意点 #

• Tailwind构建时必须读取本地配置文件，无法直接解析远程URL，所以必须将远程配置转为本地文件。
• 若最终要做成独立包，优先选择npm包安装的方式，便于版本管理和更新。
• 拉取远程文件时，要使用原始文件的URL（比如GitHub的raw.githubusercontent.com链接），而非仓库网页链接（github.com/.../blob/...是网页，不是原始文件）。

内容的提问来源于stack exchange，提问作者Daniel K