在Next.js中使用CSS模块化的Tailwind CSS

Question

如何配置Next.js以支持Tailwind CSS与CSS模块的同时使用？ 我希望Tailwind CSS可以覆盖整个项目：

// /tailwind.scss
:global {
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
}

// /test-module.css
.example {
  font-size: 36px;
}

// /pages/_app.jsx
import '../talwind.scss';
...

并且在一个示例组件中：

// /components/my-component.jsx
import css from '../test-module.css';

const Test = () => (
  <div className={`bg-red-500` ${css.example}}>Test Tailwind with CSS</div>
);

- Masih Jahangiri

Answer 1

一个解决方案是拆分webpack样式加载器。一个用于全局CSS，另一个用于CSS模块加载器，因此webpack加载器如下所示：

一种解决方案是将webpack的样式加载器拆分为两部分：全局css加载器和css模块加载器。因此，webpack的加载器看起来像下面这样：

{
  test: /\.s?[ac]ss$/,
  exclude: /\.global.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProduction,
        reloadAll: true,
      },
    },
    // 'css-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: {
          localIdentName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
    'postcss-loader',
    { loader: 'sass-loader', options: { sourceMap: true } },
  ],
},
{
  test: /\.global.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProduction,
        reloadAll: true,
      },
    },
    'css-loader',
    'postcss-loader',
  ],
},

- Masih Jahangiri

---

为什么你不把你的答案标记为正确的呢？ - AmerllicA

太棒了，我花了两天时间完成这个！你应该接受这个答案。 - Qwerty

Answer 2

我曾遇到同样的问题，我采取了以下步骤解决：

const Test = () => (
    <div className={["bg-red-500", css.example].join(" ")}>
        Test Tailwind with CSS
    </div>
);

- stupidMoewe

Answer 3

你需要像这样编写类名

const App = () => {
<h1 className={[style[`bg-teal-600`], style.holi].join(' ')}>Holi</h1>;
};

- Jose Fernando Garcia Parreño

---

谢谢你的回答。你能描述一下你的配置吗？ - Masih Jahangiri