Kickstart یک برنامه الکترونیکی با React ، TypeScript ، Tailwind V4 ، Postcss و NPM
چرا این پست وجود دارد
در اطراف وب ، می توانید انواع مختلفی از مقالات در مورد ایجاد یک برنامه React را با استفاده از Electron و Tailwind پیدا کنید.
این یک آموزش دیگر است ، اما اگر قصد استفاده از نسخه جدید Tailwind را دارید ، در واقع کار خواهد کرد.
با معرفی Tailwind v4 ، تغییرات اساسی در بسته ها و نحوه تنظیم پروژه ها رخ داده است.
این هدف این است که راهی سریع برای شروع پروژه خود و سریع گرفتن آن باشد.
بنابراین ، بیایید برویم.
توجه لطفا!
برای این آموزش ، من از node.js نسخه 22 استفاده کردم که هم اکنون در LTS است.
من نسخه 23 را امتحان کردم ، اما به چندین موضوع رسیدم که به سرعت مرا متقاعد کرد که آن مسیر را کنار بگذارم.
مطمئن شوید که از نسخه 22 استفاده می کنید یا آن را نصب می کنید:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash
\. "$HOME/.nvm/nvm.sh"
nvm install 22
node -v # Should print "v22.14.0".
# just to be sure
nvm current # Should print "v22.14.0".
nvm use node 22
مظنون معمول: برنامه الکترون
در اینجا ما الکترون را نصب می کنیم و چیزهای واکنش نشان می دهیم.
# like most of the tutorials we install Electron
npm init electron-app@latest manutemu-sample-app -- --template=webpack-typescript
cd manutemu-sample-app
# installing react with typescript
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
بیایید دستان خود را با مقداری خاک و گل کثیف کنیم.
ایجاد کردن src/app.tsx پرونده ، نقطه ورود برنامه React ما ، با این محتوا:
import './index.css';
import * as React from "react";
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<h1>Hello reacth1>
React.StrictMode>
);
در src/renderer.ts یک مرجع به خود اضافه کنید app.tsx اضافه کردن خط زیر:
import './index.css'; // this should be already here
import './app' // add this one!
اصلاح of your src/index.html مثل این:
id="root">
در tsconfig.json این خط را اضافه کنید compilerOptions بخش:
"jsx": "react-jsx",// add this one!
نماینده ویژه Tailwind v4 ، ما برای شما شغلی گرفتیم!
اکنون مهمترین بخش کل مقاله آمده است – بخشی که در واقع من را به نوشتن آن سوق داد.
مطمئناً فقط چند خط است ، اما آنها بسیار مهم هستند.
من وقت خود را صرف آزمایش تنظیمات مختلف کردم تا مجبور نباشید.
# installing tailwind post-css and some other thing to get the app working with Electron
npm install tailwindcss @tailwindcss/postcss postcss postcss-loader
در webpack.renderer.config.ts یک خط برای اضافه کنید postcss-loader
rules.push({
test: /\.css$/,
use: [
{ loader: 'style-loader' }, // should be already here
{ loader: 'css-loader' }, // should be already here
{ loader: 'postcss-loader' } // add this one!
]
})
ایجاد a postcss.config.js با محتوایی مانند این:
export default {
plugins: {
"@tailwindcss/postcss": {},
}
}
اکنون ، مرجع مونسیور را اضافه کنید Tailwind به CSS شما
در اینجا ، من آن را در خط اول در خود اضافه کردم src/index.css برای استفاده از آن در همه جا در برنامه من. همچنین ، من برخی از قوانین را اظهار نظر کردم ، اما به شما بستگی دارد.
در اینجا پرونده تغییر کرد:
@import "tailwindcss";
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif;
margin: auto;
/* max-width: 38rem; */
/* padding: 2rem; */
}
سپس ، برای بررسی اینکه آیا Tailwind در حال کار است ، من برخی از عناصر را در برنامه اضافه کردم.
من کل محتوای آن را تغییر دادم src/app.tsx برای تهیه برخی از طرح های نمونه.
import './index.css'; // import css
import * as React from "react";
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
<React.StrictMode>
<div className="flex h-screen">
<div className="w-64 bg-gray-900 text-white p-0 border-r border-white/10">
<h1 className='font-bold text-2xl text-blue-400 p-4 pb-2'>Hello react!h1>
<p className='text-grey-800 px-4 pb-4'>This is a beautiful app written with react.p>
<aside className="w-64 bg-gray-900 text-white border-r border-white/10 ">
<nav className="flex flex-col">
<a href="#" className="block w-full px-4 py-3 text-gray-400 hover:bg-gray-700 transition">
Dashboard
a>
<a href="#" className="block w-full px-4 py-3 text-gray-400 hover:bg-gray-700 transition">
Project
a>
<a href="#" className="block w-full px-4 py-3 text-gray-400 hover:bg-gray-700 transition">
Team
a>
<a href="#" className="block w-full px-4 py-3 text-gray-400 hover:bg-gray-700 transition">
Settings
a>
nav>
aside>
div>
<div className="flex-1 bg-gray-900 text-gray-400 p-4">
This is your content...
div>
div>
React.StrictMode>
);
در حال حاضر ، ساختار پرونده باید باشد:
وقتی برنامه خود را با کسل کننده اجرا می کنید npm start فرمان ، برنامه حاصل باید چیزی شبیه به این باشد:
لذت بردن!
بسیاری از چیزهای زیبا
