Electron Forge + React + Typescript + Webpack适配tailwindCSS-邪修版

以下操作，谨慎采纳

tailwind css搭配react写样式很方便，值得为react项目适配。

估计你会像我一样没招，按照网上的各种花里胡哨配置方案，结果tailwindCSS还是起不来，以下为解决方案：

正常流程

用electron Forge创建模板，官网示例和前置要：Webpack + Typescript | Electron Forge，由于需要git，我在windows下没有把git加入环境变量。于是用git bash工具执行以下内容

console 复制代码

npx create-electron-app@latest <your-app-name> --template=webpack-typescript
cd <your-app-name>

npm install -D tailwindcss postcss autoprefixer postcss-loader @tailwindcss/postcss
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

npm install electron --save-dev # 实在是没成功，最后从之前成功过的其他项目的node_models的包直接拷贝过来。

# npm install 缺啥就加啥... , 看启动提示

项目结构

只添加postcss.config.js这个文件，里面添加配置（代码看后续）。
tsconfig.json这个文件是模板就有，不过需要在里面修改配置支持react的JSX（代码看后续）。
webpack.renderer.config.ts这个文件模板有，不过需要在里面修改配置（代码看后续）。

修改的配置
postcss.config.js

console 复制代码

module.exports = {
	plugins: {
		"@tailwindcss/postcss": {}
	},
};

tsconfig.json

新增一行配置"jsx": "react-jsx"

webpack.renderer.config.ts

use替换成下面的内容

console 复制代码

use: [
	'style-loader',
	{ loader: 'css-loader', options: { importLoaders: 1 } },
	'postcss-loader'
]

引入tailwindCSS

在node_model里面你能找到它：

直接在renderer.ts引入： import "tailwindcss/index.css"

结果：

src/components/App.tsx

javascript 复制代码

import { createRoot } from 'react-dom/client';
import { useState } from 'react';
import Home from "./Home"
  
// 主应用
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      {/* <h1>Hello React</h1>
      <p>count: {count}</p>
      <button className="px-3 py-5 bg-yellow-500" onClick={() => setCount(count + 1)}>count + 1</button> */}
      { <Home /> }
    </>
  );
}

const root = createRoot(document.body);
root.render(<App />);

src/components/Home.tsx

javascript 复制代码

import * as React from "react"

export default function Home() {

  return (
    <>
        <div className="flex justify-between">
            <div className="flex-3 mx-10 flex items-center justify-center">
                <label htmlFor="dropzone-file" className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
                    <div className="flex flex-col items-center justify-center pt-5 pb-6">
                        <svg className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                        </svg>
                        <p className="mb-2 text-sm text-gray-500 dark:text-gray-400"><span className="font-semibold">Click to upload</span> or drag and drop</p>
                        <p className="text-xs text-gray-500 dark:text-gray-400">mp4, wmv ...</p>
                    </div>
                </label>
            </div>

            <div className="max-w-[100px] flex-2 flex-col justify-between">
                <div>
                    <label htmlFor="message" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your message</label>
                    <textarea id="message" rows={4} className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Write your thoughts here..."></textarea>
                </div>
            </div>
        </div>
    </>
  );
}