Tailwindcss در Styled-Components – انجمن DEV

راه اندازی یک پروژه JS بعدی با TailwindCSS و Twin Macro

در این وبلاگ ما به دنبال راه اندازی پروژه Next JS در سریع ترین و آسان ترین زمان ممکن خواهیم بود.

فهرست مطالب

ماکرو دوقلو چیست؟

Twin.macro یک کتابخانه محبوب برای استایل دادن به اجزای React با استفاده از Tailwind CSS است. این بر روی کامپوننت‌های استایل‌گذاری شده ساخته شده است و مجموعه‌ای از ماکروها را ارائه می‌کند که به شما امکان می‌دهد CSS را به روشی بصری‌تر، با استفاده از نحو مشابه Tailwind بنویسید.
ماکرو دوقلو یک راه قدرتمند برای استفاده از آنچه TailwindCSS ارائه می دهد و حفظ کد تمیز با جدا کردن CSS از کد ما و در عین حال حفظ آن در فایل های مربوطه است.

چرا TailwindCSS و Twin Macro

در مورد Tailwind دو مشکل وجود دارد.

1. شما باید در دستورالعمل های CSS به خوبی مسلط باشید. با این حال، این ممکن است با یادگیری، تمرین، و تکرار حل شود.

2. هنگامی که کلاس‌ها مستقیماً روی عناصر React/HTML اعمال می‌شوند، همان نتیجه‌ای را با سبک‌های درون خطی دریافت می‌کنید: یک ظاهر بصری درهم.

   • دوقلو ماکرو می تواند در این مورد کمک کند. با قرار دادن عناصر React/HTML در ثابت های خود در جلوی پروژه، این کتابخانه ما را قادر می سازد تا CSS را از عناصر React/HTML جدا کنیم. در نتیجه، پایه کد ما سازماندهی شده باقی می‌ماند و می‌توانیم استایل مربوط به عناصر React/HTML را حفظ کنیم.
   • همچنین، Twin Macro اضافه کردن آن را بسیار آسان‌تر می‌کند conditional styles به عناصر ما، که یک مزیت فوق العاده است.

مثال

import tw from 'twin.macro'

const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && tw`hover:border-black`]} />
)

راه اندازی پروژه

با غواصی مستقیم به چیزها، بیایید cmd و cd را به جایی که می خواهیم پروژه جدید خود را ایجاد کنیم باز کنیم. هنگامی که در دایرکتوری مورد نظر شما قرار گرفتیم، باید پروژه خود را از طریق npm ایجاد کنیم. دستور زیر را برای دانلود برنامه Next JS با tailwind از پیش تنظیم شده اجرا کنید. اطمینان حاصل کنید که نام پروژه خود را جایگزین “پروژه من” کرده اید.

npx create-next-app -e with-tailwindcss my-project

پس از اتمام دانلود فایل ها، دستورالعمل های موجود در ترمینال را دنبال کرده و اجرا کنید:

cd my-project

اگر می خواهید به دیگ بخار نصب شده نگاهی بیندازید، راحت اجرا کنید:

npm run dev

با این کار دیگ بخار دانلود شده شما در http://localhost:3000 قابل مشاهده است.

در صورت تمایل آن URL را در مرورگر خود باز کنید تا نگاهی بیندازید. لطفاً به راحتی به این پست نگاهی بیندازید زیرا در حال حاضر هیچ یک از طراحی های اولیه را تغییر نخواهیم داد.

بسته های مورد نیاز

برای اینکه Twin.macro را در پروژه خود راه اندازی و اجرا کنیم، باید چند وابستگی بسته دیگر را نصب کنیم. اینها هستند:

برخی از این ها به عنوان وابستگی های معمولی نصب می شوند و برخی دیگر وابستگی های توسعه دهنده خواهند بود. در cmd خود، دستورات زیر را اجرا کنید:

npm install @emotion/react @emotion/styled @emotion/css @emotion/server

npm install -D twin.macro @emotion/babel-plugin babel-plugin-macros

اینها همه بسته هایی هستند که ما در راه اندازی خود استفاده خواهیم کرد.

اگر قبلاً این کار را نکرده اید ویرایشگر کد خود را باز کنید. من با VS Code کار خواهم کرد. پروژه خود را باز کنید و پروژه خود را تأیید کنید package.json فایل. باید به صورت زیر به نظر برسد:

ساختار و راه اندازی فایل

برای راه اندازی، باید چند مورد را به فایل های فعلی خود به روز کنیم و چند فایل اضافی اضافه کنیم. اول باز کنیم /pages/ app.js با پیمایش در آنجا

در اینجا، باید GlobalStyles را از twin.macro وارد کنیم. این سبک‌های پایه را از Tailwind به ارمغان می‌آورد و باعث می‌شود در سراسر برنامه ما کار کند. کد زیر را کپی کنید و کد را جایگزین کنید /pages/_app.js با آن، و فایل خود را ذخیره کنید.

// page/_app.js
import { GlobalStyles } from 'twin.macro'

const App = ({ Component, pageProps }) => (
  <div>
    <GlobalStyles />
    <Component {...pageProps} />
  </div>
)

export default App

بعد، باید یک فایل _document.js در پوشه pages خود ایجاد کنیم. مسیر برای آن باید باشد /pages/_document.js.

Next JS از این فایل برای تنظیم برخی گزینه های اضافی یا انجام کارهایی مانند وارد کردن فونت های Google استفاده می کند. در شرایط ما، از آن استفاده می کنیم تا اطمینان حاصل کنیم که سبک های ارائه شده در سمت مشتری و سمت سرور یکسان هستند.
کد زیر را به خود اضافه کنید _document.js فایل و سپس ذخیره کنید.

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { extractCritical } from '@emotion/server'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const page = await ctx.renderPage()
    const styles = extractCritical(page.html)
    return { ...initialProps, ...page, ...styles }
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <style
            data-emotion-css={this.props.ids.join(' ')}
            dangerouslySetInnerHTML={{ __html: this.props.css }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

مرحله بعدی اختیاری است و تنها در صورتی باید انجام شود که باید پیکربندی Twin را تغییر دهید. در اینجا لیست کامل گزینه های پیکربندی دوقلو آمده است. خودت را باز کن package.json فایل و کد زیر را وارد کنید:

// package.json
"babelMacros": {
  "twin": {
     "preset": "emotion"
  }
},

شما package.json اکنون باید به این شکل باشد:

اکنون برای مرحله نهایی در راه اندازی ما. در پوشه ریشه پروژه خود، a را ایجاد کنید .babelrc.js فایل.

آن را باز کنید، کد زیر را در آن قرار دهید و آن را ذخیره کنید.

// .babelrc.js
module.exports = {
  presets: [
    [
      'next/babel',
      {
        'preset-react': {
          runtime: 'automatic',
          importSource: '@emotion/react',
        },
      },
    ],
  ],
  plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],
}

تبریک می گویم! 🎉 پروژه شما اکنون در حال اجرا و کاربردی است. اکنون می توانید سرور خود را با استفاده از برنامه npm run بالا بچرخانید و شروع به ساخت پروژه خود کنید!

مخزن و منابع Github

از اینکه این مقاله را دنبال کردید متشکرم امیدوارم که به شما کمک کرده باشد پروژه بعدی خود را با این پشته فناوری فوق العاده شروع کنید. در اینجا چند منبع اضافی وجود دارد که ممکن است مفید باشد.

می خواهید بدانید چگونه کار می کند؟ Codesandbox را بررسی کنید.

Github Repo این پروژه. با خیال راحت از آن برای پروژه های خود شبیه سازی کنید و از آن استفاده کنید.

برای شروع به محل پوشه مورد نظر خود بروید و کد زیر را در ترمینال اجرا کنید.

git clone https://github.com/Bhanu1776/twin-setup
cd next-tw-twin
npm install

Tailwind Docs. این رفتن شما برای هر چیزی Tailwind است.

دوقلو ماکرو Github Repo. این یک منبع عالی برای کمک به شما در انتخاب نحو Twin، کسب اطلاعات بیشتر در مورد بسته و به روز نگه داشتن آخرین نسخه ها است.

Tailwind Twin IntelliSense یک افزونه فوق العاده برای استفاده در هنگام ساخت پروژه با Twin + Tailwind است. من به شدت توصیه می کنم از آن استفاده کنید زیرا نوشتن کد شما را از طریق پیشنهادات کلاس Tailwind آن آسان تر می کند.

خطای Swc
اگر با خطای کامپایلر swc مواجه هستید، حتما این مقاله را بررسی کنید.

تماس با من

اگر نمی‌دانید از کدام تم vscode استفاده کرده‌ام، JellyFish-x-Retro را بررسی کنید

امیدوارم این وبلاگ به شما در راه اندازی این پشته فناوری عالی کمک کرده باشد. با تشکر از خواندن وبلاگ!