如何在Gatsby项目的.less文件中正确引入Tailwind？

核心原因 #

Less默认会将@开头的语句识别为自身的变量指令，你直接写的@tailwind规则会被Less拦截处理，无法传递到Tailwind编译器，加上你提供的代码没有加语句结尾分号，也会导致编译异常。

完整配置步骤 #

• 第一步：安装必要依赖
  如果还没安装相关依赖，执行以下命令：

npm install tailwindcss postcss autoprefixer gatsby-plugin-postcss gatsby-plugin-less

• 第二步：配置Gatsby插件
  修改根目录下的gatsby-config.js，确保PostCSS插件在Less插件之前加载，示例配置：

module.exports = {
  plugins: [
    `gatsby-plugin-postcss`,
    // 保留你原有已配置的Less插件
    {
      resolve: `gatsby-plugin-less`,
      options: {
        // 原有Less配置保持不变即可
      }
    }
  ]
}

• 第三步：配置PostCSS
  根目录新建postcss.config.js，写入以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

• 第四步：配置Tailwind
  根目录执行npx tailwindcss init生成配置文件，修改tailwind.config.js的content字段，匹配所有你用到Tailwind类名的文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,less}",
    // 根据你的项目文件结构补充其他路径
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 第五步：修改Less文件中的Tailwind引入写法
  两种写法二选一即可，推荐第一种兼容性更好：

1. 转义写法（直接保留@tailwind指令）：

~"@tailwind base";
~"@tailwind components";
~"@tailwind utilities";

// 你的其他Less代码写在下方即可

2. 导入写法：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

// 你的其他Less代码写在下方即可

注意：所有Tailwind相关的导入/指令必须写在Less文件的最顶层，不要嵌套在任何选择器内部。

生效验证 #

配置完成后执行gatsby clean清理Gatsby缓存，再执行gatsby develop重启开发服务即可生效。

内容的提问来源于stack exchange，提问作者Mainak Das