په هر وخت کې، د تکنالوژۍ کڅوړه پایلې چې یو ځل د حق احساس کوي، پیل کوي چې خپل محدودیتونه ښودلوي - لکه څنګه چې په بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښنا د بریښد سټیلډ برخود ټایلینډ CSS د بدلون په اوږدو کې دی.
دا پست زموږ د Styled Components څخه د Tailwind CSS ته بدلولو، ځکه چې موږ د حرکت ترسره کړ، څنګه زه د انتقال ته راځي، او د دې پروسه په څیر چیرې چیرې دی. که تاسو د قديم سبکونو سره کار کوي یا ستاسو د خپل پروژو لپاره Tailwind فکر کوي، امید ته دا تاسو ته یو ګټور (یا لږ تر لږه نسبتا) تاسو ته چیرې ورکړي.
Why HackerNoon په اصل کې د Styled Components کارول
زه د ټیم کې برخه نلري کله چې Styled Components لومړی زموږ د CSS په کارولو لپاره غوره شوې وه، مګر په هغه وخت کې، Tailwind CSS حتی نلري، او Styled Components د HackerNoon front-end آرشیفیکټۍ لپاره ډیر معنی لري.
Tailwind CSS حتی نه خپور شوی
دا پرمختلونکو ته اجازه ورکوي چې د CSS په مستقیم ډول په جاواسکرپټ کې ورسیږي، کوم چې د برخو په بشپړه توګه خپلواکه کړي. دا لارښوونې په طبيعت کې ډیر "د React-native" شتون لري - encapsulated، reusable، او، په هغه وخت کې، فکر شو چې په پراخه کچه د کوډ بیس او ټیم کې د ساتنې لپاره آسانه وي. د ډینیمک styling وړتیاوې، د موضوعي ملاتړ په پراخه کچه، او وړتیا لري چې پروپیلن په مستقیم ډول په سټیلونو کې پیژندل شي په ځانګړي ډول په پراخه کچه پیژندل او ترتیبونو کې چې موږ جوړ کړ. د اوږد وخت لپاره، Styled Components د HackerNoon encapsulated، reusable، او، په هغه وخت کې، فکر شو چې په آسانه توګه ساتل شيStyled Components د HackerNoon ښه خدمت کوي په وخت کې، زموږ د کوډ بیس وده ورکړي - او همدارنګه د مدیریت سټیلونو پیچیدو. Styled Components موږ ته انعطاف وړتیا ورکړي، مګر دا د لګښت لګښت لري: لوی بکس اندازه، runtime کړنو ټیټونه، او کټګورۍ برخو جوړښت سره د اوږد شوي بکسونو پرانیستل. دا په اغیزمنه توګه د کوډ څخه مخنیوی او یا د کارولو په اغیزمنه توګه وکاروي. په دې وخت کې د Tailwind CSS ډیری معنی لري. د ګټورۍ په لومړیتوب کې د لارښوونې لارښوونې لکه څنګه چې د ټولې کارونو ته وده ورکړي - له layout څخه تر responsiveness او حتی theming. نه موږ واقعي وي: د کوچني ډیزاین ټیم لپاره لکه HackerNoon's، د لوی کوډ بیس لړۍ له لړۍ بیا جوړولو په ذهن کې یو لوی هڅه شتون نلري. په هرصورت، موږ نه کولی شو د Tailwind په پراخه کچه په ډیزاین ټولنې کې تصویب شوي دي. موږ غواړئ. د دې سایټ د سخت ترین برخه؟ Setup. د Tailwind نصب کول ساده دی، مګر کله چې دا فعال شوی، د Tailwind نړیوال سبکونه - د Preflight لخوا - زموږ د موجودو برخو سره مخنیوی پیل شو. د خلاصونکي دلته د د هغه ځای څخه، زه باید د نوي کنوانسیونونه جوړ کړي - څنګه موږ د نړیوالو سټیلونو سره کار وکړي، کلاسونه بیا کاروئ، او د Tailwind سره د موضوعاتو معلوماتي برخو جوړ کړي. کله چې دا بنسټ پوښل شوی، ما د جوړولو لپاره چمتو وه. او دلته هغه برخه ده چې زه اوس هم حیران شوی: AI دا پروسه په حقیقت کې خوښ شوی. د کوډ سولو د هزاران لړۍ ته رامینځته کول به دی دی دی دی. مګر ما د ChatGPT کارولو سره زموږ د سټیلډ برخو په هر وخت کې د Tailwind بدلون وکړي. د ساده برخو لپاره - layouts، spacing، جوړښت - دا یو بریښنا دی. یوازې پوښونه، tweak، او لاړ شئ. نه، زه صادق باشم: د AI هر څه حق نه لري. ډیر پیچلي، موضوعي برخو هم دستاوي کوډ کولو او ډیری ساعتونو ته اړتیا لري. مګر د پیل کولو لپاره یو قوي اساس لري چې کارونه ډیر آسانه کړي. د Tailwind سندونه هم د غفلتونو پوښلو کې مرسته وکړي، او کله چې زه په بشپړه توګه د د ګټورۍ ټولګي ذهنیت په پام کې ونیسئ، څه هم پیل شو. زه خوشحاله ده چې د ټایلینډ اوس په HackerNoon کې ژوند کوي! 🎉 As of now, the HackerNoon Homepage is fully converted to Tailwind CSS, with Styled Components completely removed. Most of the other pages still rely on Styled Components, and they’ll be converted gradually—one component, one page at a time. دا روښانه لاره په واقعیت کې یو برکت دی. د هر اجزاء ته د Refactoring لپاره زه د revit او زموږ د پاڼهونو ډیزاین او جوړښت ښه کولو فرصت ورکړم. د Tailwind بدلون سره، موږ د د عصري UI، ښه layout کارول، نوي اجزاء، او حتی د د custom-built موضوع picker رامینځته کوو چې زموږ د قديم موضوعي سیسټم ته خوښوي. په HackerNoon کې د 4 کلونو څخه زیات کار کولو وروسته، زه احساس کوم چې reignited په زموږ د کوډ بیس کې یوځای کیږي. Tailwind د جوړولو لپاره دوبارہ خوشحاله کوي. دا پاک، مطابقت، او قوي ده - او زه هیله لرئ چې د بدلون ته وده ورکړي. هغه څه چې پوهیږئ؟ شاید په لوړه وخت کې، موږ د د Tailwind CSS ته حرکت نه یوازې د styling کتابتون بدلولو په اړه دی - دا زموږ د frontend د کار د جریان د ماښامولو، د تعقیب او د پراختیا ساده کولو په اړه دی. په داسې حال کې چې Styled Components د HackerNoon انټرنیټ په یوه مهمو پرمختګ مرحلې کې مرسته کوي، Tailwind موږ ته د انعطاف، سرعت او ساتنې وړتیا وړاندې کوي چې موږ ته اړتيا لري لکه څنګه چې موږ په کچه وده ورکړي. دا اوس هم کار کوي - زموږ اپلیکیشن اوس هم ډیری Styled Components لري - مګر د Tailwind په ژوند کې زموږ په کور پاڼه کې او په نوي refactored برخو کې وګورئ د حیرانتیا وړ دی. دا واقعیت چې زه د AI سره زما د خپل تخصص سره د refactor په چټکۍ سره تړل کولی شي دا انتقال نه یوازې کارول کیږي، خو هیجان زده کړې. HackerNoon پراختیا کوي، او زموږ سبکونه د دې سره پراختیا کوي. د يو برخې په هر وخت کې.کیا موږ د Tailwind بدلون په اړه فکر کوو؟
How I Made the Switch
په اړه
preflight: false په tailwind.config.js فایل کې تنظیم شوي دي. دا حرکت د Tailwind د بیس ریستونه تر ټولو غیر فعال کړ، کوم چې ځینې نظمونه راټول کړ. ډاډ، اوس هم کوچني سټیلنگ ستونزې حل شوي دي، مګر څه هم د جنگی زون په څیر کم شتون لري.preflight: falsetailwind.config.jsد Tailwind بډی سیټونو اکثریت غیر فعال
د مهاجرت په داسې حال کې څنګه ښکاري
styled-components څخه زموږ د package.json څخه د ښه کولو لپاره پاک کړئ. 😉styled-componentspackage.json
Final Tailwinding تفکرونه
