په هر وخت کې، د تکنالوژۍ د پټولو د فیصلہ چې يو ځل د حق احساس کوي، پیل کوي چې خپل محدودیتونه ښيي - لکه څنګه چې د بریښنا د بریښنا د بریښنا د کارولو وروسته یو screwdriver نلري. دا د HackerNoon سره د کارولو په صورت کې دی. د کلونو لپاره، دا موږ ته ښه خدمت کوي - په پراخه کچه سټیلونه، د دومايښت موضوعاتو او بشپړ کنترول په خپلو React برخو کې وړاندې کوي. خو لکه څنګه چې زموږ د کوډ بیس پرمختللي او وسایلو لکه چمتو شوي، دا ښکاري چې a Styled Components Tailwind CSS change was overdue. دا پست زموږ د Styled Components څخه Tailwind CSS ته بدلولو، ځکه چې موږ د حرکت ترسره کړم، څنګه چې زه د انتقال ته راځي، او د دې پروسه په څیر چیرې چیرې دی. که تاسو د قديم سبکونو سره کار کوي یا ستاسو د خپل پروژو لپاره Tailwind فکر کوي، امید ته دا تاسو ته یو ګټور (یا لږ تر لږه نسبتا) تاسو ته ورکړي چې له تاسو سره لاړ شئ. چرا HackerNoon په اصل کې د Styled برخو کارول زه په ټیم کې نه وه کله چې Styled Components لومړی زموږ د CSS په کارولو لپاره غوره شوې وه، مګر په هغه وخت کې، ، او Styled Components د HackerNoon front-end آرکټیکټۍ لپاره ډیر معنی لري. Tailwind CSS hadn’t even been released دا پرمختلونکو ته اجازه ورکوي چې د CSS په مستقیم ډول په جاواسکرپټ کې ورسیږي، د برخو په بشپړه توګه ځان لري. دا لارښوونې په طبیعت کې ډیر "د React-native" احساس کوي- په پراختیا کې د کوډ بیس او ټیم کې. د ډینامیک ډیزاین وړتیاوې، د انډول شوي موضوعي ملاتړ، او وړتیا ته په مستقیم ډول په سبکونو کې پروپیلز انتقال کړي، په ځانګړي ډول په پراخه کچه د صفحات او ترتیبونو کې چې موږ جوړ کړ. اوږد وخت لپاره، د encapsulated, reusable, and, at the time, thought to be easier to maintain Styled Components served HackerNoon well هغه څه چې موږ ته د Tailwind بدلون په اړه فکر کوي؟ په وخت کې، زموږ د کوډ بیس وده ورکړي - او د مدیریت سټیلونو پیچیدو هم هم. Styled Components موږ ته انعطاف لري، مګر دا د لګښت سره راځي: د او د په هر وخت کې د اوږدې مودې بلوکونو سره پوښل کیږي. دا په سختۍ سره د سټیلونو څارنه یا دوی په اغیزمنه توګه پرته د کوډ ډبل کولو پرته وکاروي. larger bundle sizes runtime performance hits cluttered component structure موږ هم پوه شو چې زموږ ډیری سبکونه په مختلفو برخو کې تکرار شوي دي. دا کله چې د utility-first لارښوونې په څیر د هر څه په سمه توګه احساس شوی - له layout څخه تر responsiveness او حتی theming. Tailwind CSS خو موږ په واقعیت کې وي: د ، د يو لوی کوډ بیس refactoring افکار په هرصورت، موږ نه کولی شو نښلوي چې څنګه په پراخه کچه Tailwind په پراخه کچه په پراختیا ټولنې کې تصویب شوي دي. موږ غواړم. small dev team like HackerNoon’s line by line څنګه زه د switch جوړ کړم د دې بدلون تر ټولو سخت برخه؟ Setup. د Tailwind نصب کول ساده دی، مګر کله چې دا فعال شوی، د Tailwind نړیوال سبکونه - د Preflight لخوا - زموږ د موجودو برخو سره مخه ونیسئ. په دې کې د ژوند خوندي دی په فایل. دا حرکت کوي البته، نو هم د کوچني styling ستونزې حل شوي دي، مګر څه هم نه د يو جنسي زون په څیر ښکاري. preflight: false tailwind.config.js disabled most of Tailwind’s base resets له دې امله، ما باید - څنګه موږ د نړیوالو سبکونو سره کار واخلئ، کلاسونه دوبار کاروئ، او د Tailwind سره د موضوعاتو په اړه د اجزاو جوړ کړي. کله چې دا بنسټ پوښل شوی، زه چمتو وه چې جوړ کړي. establish new conventions او دلته هغه برخه دی چې زه اوس هم حیران شوی: AI made this process actually enjoyable. د کوډ سولو هزاران رنګونو د Refactoring به دی دی دی دی دی دی. خو زه د ChatGPT کارولو سره زموږ د سټیلډ برخو د Tailwind په یو وخت کې بدلون. د ساده برخو لپاره - layouts، spacing، جوړښت - دا یو بڼه وه. یوازې پوښښ، tweak، او چلو. د AI په بشپړ ډول نه ترلاسه کړ. ډیر پیچلي، موضوعي اجزاء هم اړتیا لري مګر له دې لپاره چې په پیل کې یو پیاوړتیا بنسټ لري، کارونه ډیر آسانه و. Tailwind سندونه هم د غفلتونو بشپړولو کې مرسته وکړي، او کله چې زه په بشپړه توګه د د چیزو په کلکولو پیل کړي. Now, let me be honest: manual coding and plenty of hours utility class mindset لکه څنګه چې د مهاجرت په داسې حال کې ښکاري زه خوشحاله ده چې د Tailwind is now live on HackerNoon! د دې لپاره، د په Tailwind CSS کې، سره Styled Components په بشپړه توګه حذف شوي. ډیری نورو پاڼهونه تل د Styled Components پر بنسټ دي، او دوی به په دوامداره توګه بدل شي - د HackerNoon Homepage په بشپړه توګه بدل شوی one component, one page at a time HackerNoon Homepage په بشپړه توګه بدل شوی دا روښانه لاره په واقعیت کې یو برکت دی. د هر اجزاء کې د Refactoring زما فرصت ورکړي چې زموږ پاڼې ډیزاین او جوړښت. د Tailwind بدلون سره، موږ د ، ښه لګښت کارول، نوي برخو، او حتی دا زموږ د قديم موضوعي سيستم ته شرم ورکوي. revisit and improve more modern UI custom-built theme picker په HackerNoon کې د 4 کلونو څخه زیات کار کولو وروسته، زه احساس کوم چې زموږ د کوډ بیس ته د دوبې ډاونلوډ کولو لپاره. Tailwind د جوړولو لپاره ډیر خوښ دی. دا پاک، مطابقت، او قوي دی - او زه هیله لرئ چې د بدلون ته وده ورکړئ. کوم چې پوهیږي؟ شاید په لوړه وخت کې، موږ د پاکولو لپاره. زموږ څخه په ښه توګه 😉 reignited styled-components package.json Final Tailwinding Thoughts د Tailwind CSS ته حرکت نه یوازې د styling کتابتون بدلولو په اړه دی - دا زموږ د frontend د کار د جریان د ماښامولو، د تعقیب او د پرمختګ ساده کولو په اړه دی. په داسې حال کې چې Styled Components د HackerNoon انټرنیټ په یوه مهمو پرمختګ مرحلې کې مرسته کوي، Tailwind موږ ته د دې وړاندیز کوي موږ ته اړتيا لري لکه څنګه چې موږ به په کچه وده ورکړي. flexibility, speed, and maintainability دا اوس هم په کار کې دی - زموږ اپلیکیشن اوس هم ډیری Styled Components لري - مګر د Tailwind په ژوند کې زموږ په کور پاڼه کې او په نوي refactored برخو کې وګورئ د حیرانتیا وړ دی. دا حقیقت چې زه د AI سره زما د خپل تخصص سره د refactor په چټکۍ سره تړل کولی شي دا بدلون نه یوازې کارول کیږي، خو هیله ورکړي. HackerNoon پراختیا کوي، او زموږ سبکونه د دې سره پراختیا کوي.

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Check out my projects

دا غږ د کیسې په اصلي ژبه تولید شوی!

د Styled برخو څخه د Tailwind CSS ته: د HackerNoon مهاجرت تاریخ

About Author

تبصرې

hang tags

دا مقاله په کې وړاندې شوې وه

Related Stories

Teylor has Been Named Startup of the Year 2021 in Zürich

Psychopathology of Everyday Life by Sigmund Freud - Table of Links

The Therapeutical Principles of Psychoanalysis

[Writing Prompt] Thrilled to be Recognized as [Insert Award Title Name]

Teylor has Been Named Startup of the Year 2021 in Zürich

Psychopathology of Everyday Life by Sigmund Freud - Table of Links

The Therapeutical Principles of Psychoanalysis

[Writing Prompt] Thrilled to be Recognized as [Insert Award Title Name]

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps