Electron Forge 集成 tailwindcss 和 antdtailwindcss 在 webpack

tailwindcss

yarn add tailwindcss postcss-loader autoprefixer postcss --dev

在 webpack.renderer.config.js 中配置 postcss-loader

rules.push(
  {
    test: /\.css$/,
    use: [
      { loader: "style-loader" },
      { loader: "css-loader" },
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [require("tailwindcss"), require("autoprefixer")],
          },
        },
      },
    ],
  })

在根目录创建 tailwind.config.js，内容参考文档。最后添加指令到 index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

之后就可以正常使用 tailwindcss 的语法了，vscode 可以安装 Tailwind CSS IntelliSense 来添加代码提示

antd

yarn add antd

在 index.ts 中引入 ant design 的样式文件

import "antd/dist/antd.less";

如果需要自定义 ant design 的样式，可以参考文档

解决 antd 和 tailwindcss 的样式冲突

ant design 作为一个 UI 框架全局重写了一些基础样式，而 tailwindcss 也做了同样的事情，这样会导致样式会有冲突。可以在 tailwind.config.js 中设置

module.exports = {
  corePlugins: {
    preflight: false, // 去掉 tailwindcss 的基础样式设置
  },
  important: true,   // 给 tailwindcss 的样式加上最高优先级
}

参考: