https://virgool.io/feed/@abbas.habibnejad Team Lead at Venify fa 2026-06-16 14:34:45 https://files.virgool.io/upload/users/43738/avatar/Hn8FaD.jpeg?height=120&width=120 https://virgool.io/@abbas.habibnejad https://virgool.io/@abbas.habibnejad/%D9%86%D8%B5%D8%A8-%D9%88-%D8%AA%D9%86%D8%B8%DB%8C%D9%85%D8%A7%D8%AA-tailwind-css-%D8%AF%D8%B1-react-zxquktjqw0nk Tailwind CSS with Reactمقدمه احتمالا اگه اینجا آمدید می‌دونید Tailwind CSS چیه و ... همچنین React. پس وقتتون تلف نمی‌کنم (البته خودمم هم حصله ندارم!) مستقیم می‌ریم برای نصب و تنظیمات Tailwind در React.نصب و تنظیمات1. اول یک پروژه React با استفاده از create-react-app ایجاد کنیم:npx create-react-app install-tailwindcss2. بریم داخل فایل پروژه:cd install-tailwindcss3. حالا باید Tailwind CSS به پروژه اضافه کنیم:yarn add tailwindcss postcss-cli autoprefixer -D4. پیشنهاد می‌کنم پروژه روی IDE بالا بیارید:code .5. خوب حالا باید دستور زیر بزنیم بعد از پایانش یه فایل به اسم tailwind.config.js داخل پروژه ایجاد می‌شه:npx tailwind init tailwind.config.js --full6. حالا یک فایل به اسم postcss.config.js درست کنید و تنظیمات زیر داخلش قرار بدید:module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ], };7. اوکی حالا یه فولدر به اسم styles داخل فولدر src ایجاد کنید. داخل این فولدر دو فایل به اسم های main.css و taillwind.css ایجاد کنید:Styles حالا داخل فایل tailwind.css باید import های زیر قرار بدید (احتمالا IDE چون تگ tailwind نمی‌شناسه hint بده ولی مهم نیست) :@tailwind base; @tailwind components; @tailwind utilities;8. خوب حالا در فایل package.json باید بخش scripts با object زیر تغییر دهید :&quotscripts&quot: { &quotstart&quot: &quotnpm run build:css && react-scripts start&quot, &quotbuild&quot: &quotnpm run build:css && react-scripts build&quot, &quottest&quot: &quotreact-scripts test&quot, &quoteject&quot: &quotreact-scripts eject&quot, &quotbuild:css&quot: &quotpostcss src/styles/tailwind.css -o src/styles/main.css&quot },package.json9. آخرین مرحله باید داخل فایل app.js فایل main.css را import کنید:import './styles/main.css'; خوب تنظیمات تموم شد. فقط کافیه اگه از قبل npm start کردید ، یکبار دیگه این کار رو انجام بدید. برای اطمینان از درست بودن تمامی تنظیمات به app.js برید و return زیر به جای قبلی قرار بدید:return ( <div className=&quot&quot> <div className=&quotp-4 m-4 bg-green-700&quot> <h1 className=&quottext-2xl font-bold text-white&quot>Tailwind CSS Demo</h1> </div> <div className=&quotp-4 m-4 bg-green-100 h-full&quot> <h2 className=&quottext-green-900&quot>Have much fun using Tailwind CSS</h2> <button className=&quotbg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded&quot>My Tailwind Button</button> </div> </div> ); اگه تنظیمات درست باشه باید صفحه ای به شکل زیر ببینید:Tailwind CSS نصب و تنظیمات بر اساس این ویدیو بود:https://www.youtube.com/watch?v=hRFbqdJKRvQ&t=109s امیدوارم مفید بوده باشه. اگه سوالی هم داشتید ایمیل و تویتتر توی پروفایل هست. Abbas Habibnejad Abbas Habibnejad Sun, 23 Aug 2020 09:17:14 +0430 https://virgool.io/@abbas.habibnejad/%D9%BE%DB%8C%D8%A7%D8%AF%D9%87%D8%B3%D8%A7%D8%B2%DB%8C-%D9%86%D9%82%D8%B4%D9%87-map-%D8%A8%D8%B1-%D8%B1%D9%88%DB%8C-%D9%BE%D8%B1%D9%88%DA%98%D9%87%D9%87%D8%A7%DB%8C-%D8%A8%D8%B1-%D9%BE%D8%A7%DB%8C%D9%87-react-jhukiscr4s0o پیاده سازی نقشه با استفاده از کتابخانه react-map-gl و پلتفرم‌های MapBox یا Open Street Mapمقدمه متاسفانه گوگل مدتی است که برای سرویس Google Map که مدت‌ها کاملا رایگان سرویس‌دهی می‌کرد ، تعرفه تعیین کرده که با وجود تعرفه پایین ، استفاده از آن را برای ما بسیار سخت و تقریبا غیر ممکن کرده است. اما با این حال خوشبختانه هنوز جایگزین‌‌های رایگانی وجود دارد که ما بتونیم به پروژه‌ها:نقشه اضافه کنیمنقاطی از نقشه که می‌خواهیم را نشانه گذاری کنیماطلاعاتی مثل نام یا توضیحات آن Location را کنار نشانه ، روی نقشه قرار دهیم اگه این موارد نیازهای پروژتون است بریم برای پیاده سازی.نکته: پلتفرم MapBox که ما از آن هم استفاده می‌کنیم کاملا رایگان نیست و محدودیت load در ماه داره ولی تعداد load خیلی زیاده توی ماه می‌ده که برای خیلی از پروژه‌ها کافیه اما با این حال ، جایگزین کاملا رایگان هم داره (Open Street Map) که توی قسمت پیاده سازی اون هم کاملا توضیح می دهم.ساختار ساختاری که قصد پیاده‌سازی اون داریم شامل دو بخش اصلی است:1. کتابخانه react-map-gl: قالب اصلی نقشه با این کتابخانه پیاده سازی می‌شه. در واقع ما با اضافه کردن این کتابخانه و استفاده از آن می‌توانیم: الف. قالبی که می‌خواهیم نقشه بر روی آن نمایش داده شود را پیاده‌سازی کنیم. برای مثال frame ای با سایزهای width: 100% و Height: 200px. ب. نقاطی که می‌خوایم بر روی نقشه نمایش دهیم را با لیستی از مختصات هر نقطه نمایش دهیم. پ. اطلاعات هر نقطه را نیز با استفاده از همین کتابخانه روی نقشه قرار دهیم.2. پلتفرم نمایش نقشه MapBox بعد از پیاده سازی قالب نقشه ، حالا نیاز داریم نقشه‌ای را روی آن قالب به نمایش بذاریم. یکی از این پلتفرم‌ها MapBox. در واقع این پلتفرم‌ها ، API هستند که به کتابخانه react-map-gl سرویس می‌دهند و تصاویر هر بخش از نقشه را که این کتابخانه نیاز داشته باشد برای آن آماده می‌کند.پیاده‌سازی اول کتابخانه react-map-gl را به پروژه اضافه می‌کنیم:npm install --save react-map-gl حالا باید به component که قصد داریم در آن نقشه اضافه کنیم ، کتابخانه را import کنیم:import ReactMapGL, {Marker, Popup} from &quotreact-map-gl" در این import سه ایتم اضافه کردیم. ReactMapGL تگ اصلی برای قالب نمایشی نقشه است. تمامی تنظیمات قالب ، داخل این تگ صورت می‌گیره. Marker هم برای نشانه گذاری نقاط روی نقشه استفاده می‌شه و Popup برای نمایش اطلاعات آن نقطه‌ها. البته اگر نیازی به نشانه‌گذاری روی نقشه ندارید می‌تونید از این دو استفاده نکنید. قبل اضافه کردن تگ اصلی یعنی ReactMapGL ، اول نیاز به سه state داریم. دو state برای نگه‌داشتن مختصات (latitude و longitude) محل نمایش فعلی نقشه و یک state برای نگه‌داری میزان zoom بر روی نقشه:const [latitude, setLatitude] = useState(35.6892) const [longitude, setLongitude] = useState(51.3890) const [zoom, setZoom] = useState(10) حالا با استفاده از تگ اصلی ReactMapGL بدنه اصلی نقشه را پیاده می‌کنیم. بعد از این مرحله عملا ما یک Map کامل داریم:<ReactMapGL width=&quot100%&quot height={400} latitude={latitude} longitude={longitude} zoom={zoom} mapStyle='mapbox://styles/mapbox/streets-v11' mapboxApiAccessToken=&quotYourToken&quot onViewportChange={(viewState) => { setLatitude(viewState.latitude); setLongitude(viewState.longitude); setZoom(viewState.zoom) }}> </ReactMapGL> فقط در مورد props های mapStyle و mapboxApiAccessToken نیاز است اول در سایت MapBox حساب کاربری باز کنید و پروژه خودتون داخلش تعریف کنید. پنل به ازای هر پروژه به شما یک AccessToken می‌ده که به شما اجازه می‌دهد به تعداد محدود اما واقعا زیادی در ماه نقشه را load کنید. اما اگه نیاز داشتید که این محدودیت هم نداشته باشید می‌تونید به جای MapBox از پلتفرم کاملا رایگان OSM استفاده کنید که برای این کار لازمه mapStyle به مقدار زیر تغییر دهید:https://s3.amazonaws.com/cdn.brianbancroft.io/assets/osmstyle.jsonنکته: در صورت استفاده از OSM دیگر نیاز به props برای توکن (mapboxApiAccessToken) نیست و لازم نیست حساب کاربری در MapBox داشته باشید.نکته: از سه state که در component خودمون اضافه کردیم ، همگی را داخل تگ بالا استفاده کردیم. props های latitude و longitude و zoom با مقدار لحظه‌ای که دارند ، یک بخش از نقشه را نمایش می‌دهند. با onViewportChange هم ، هر بار که کاربر تغییری در نقشه ایجاد کند ، مقدار دقیق تغییرات را به ما بر می‌گرداند و ما باید state های خودمون با این مقادیر جدید بروزرسانی کنیم. (ادامه توضیح کد بالا بود و نیازی به تغییر کد نیست) با همین تگ حالا ما یک نقشه کامل روی پروژه پیاده سازی کردیم:نقشه با پلتفرم MapBoxنقشه با پلتفرم Open Street Map حالا اگه بخوایم روی نقشه نقاطی رو نشانه‌گذاری کنیم ، کافیه داخل بدنه تگ ReactMapGL ، نقاط را به شکل زیر تعریف کنیم:<Marker latitude={35.6892} longitude={51.3890}> <img className=&quotMarker&quot src={logo} alt=&quot&quot/> </Marker> <Popup className=&quotPopup&quot latitude={35.6892} longitude={51.3890} closeButton={false} closeOnClick={false} tipSize={10}>فروشگاه</Popup> با قرار دادن این تکه کد عملا یک نقطه را روی نقشه تعریف کردیم و به همین شکل می‌توانیم تعداد نقاط بیشتری را نیز تعریف کنیم:استفاده از Maker و Popup برای نشانه گذاری بر روی نقشهاصلاح مشکل RTL نبودن نقشه MapBox برای اصلاح این مشکل لازمه در App.js پلاگین زیر را اضافه کنیم که تنها یکبار فراخوانی بشه: ابتدا نصب mapbox-gl:npm install --save mapbox-gl حالا در App.js :import {setRTLTextPlugin} from "mapbox-gl";setRTLTextPlugin( 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js', () => {}, true ); امیدوارم تونسته باشم کمکی کرده باشم. Abbas Habibnejad Abbas Habibnejad Fri, 07 Aug 2020 20:21:16 +0430