Shopify Hydrogen(Remix)本地开发Tailwind自定义导入失效问题及解决

问题背景 #

本地开发基于Remix的Shopify Hydrogen React项目，通过PostCSS配置Tailwind，已添加并配置postcss-import插件：

原postcss.config.js配置 #

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    'postcss-preset-env': {
      features: {'nesting-rules': false},
    },
  },
};

原App.css内容 #

@tailwind base;
@import 'custom/base.css';

@tailwind components;
@import 'custom/components.css';

@tailwind utilities;
@import 'custom/utilities.css';

问题现象 #

• @tailwind指令可正常生效
• 自定义CSS文件的导入无效果：直接在app.css中编写@layer base {}样式正常，但将代码移入导入文件后完全失效，且无任何报错
• components和utilities层存在相同问题

相关remix.config.js配置 #

...
 future: {
    unstable_postcss: true,
    unstable_tailwind: true,
    v2_meta: true,
    v2_routeConvention: true,
    v2_errorBoundary: true,
    v2_normalizeFormMethod: true,
  },
...

问题根源 #

PostCSS要求@import语句必须放在文件最顶部，原写法中@import位于@tailwind指令之后，无法被正确解析；但按Tailwind常规要求将@tailwind置于顶部，又会导致自定义样式无法覆盖默认样式，因此需要调整Tailwind的引入方式。

解决方案 #

将@tailwind指令替换为直接导入Tailwind核心文件，再按层级导入自定义覆盖样式：

调整后的App.css #

/* 先导入Tailwind核心样式 */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 自定义样式导入 */
/* Root或重置样式 */
@import 'root/root.css';

/* Base层覆盖样式 */
@import 'base/base.css';
@import 'base/headers.css';

/* Component层覆盖样式 */
@import 'components/components.css';
@import 'components/images.css';
@import 'components/buttons.css';

/* Utility层覆盖样式 */
@import 'utilities/utilities.css';

效果说明 #

调整后：

• 自定义CSS文件中可正常使用@layer base {}、@layer components {}等指令
• 样式层级顺序符合要求，确保自定义样式能正确覆盖Tailwind默认样式
• 拆分CSS文件结构，更便于项目维护

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