نکاتی برای نوشتن Tailwind CSS تمیز

Summarize this content to 400 words in Persian Lang
اگر می‌خواهید بهره‌وری عالی در توسعه و طراحی انعطاف‌پذیر در برنامه‌های خود داشته باشید، Tailwind یک گزینه استایل عالی برای پروژه شما است، با این حال، همانطور که روی پروژه خود کار می‌کنید، پیچیدگی آن افزایش می‌یابد، ممکن است متوجه برخی نکات منفی در تجربه توسعه شوید. در این مورد، تصمیم گرفتم این مقاله را بنویسم تا نکاتی را برای نوشتن کد tailwind به روشی “تمیز” ارائه کنم.

1. از پلاگین o زیباتر استفاده کنید

برای اطمینان از استانداردسازی کد در پروژه های فرانت اند خود، ما معمولاً از جعبه ابزار eslint + prettier برای تعریف استانداردهای مورد نظر در کد خود استفاده می کنیم.

با استفاده از tailwind بسته ای به نام وجود دارد prettier-plugin-tailwindcss اساساً کلاس های tailwind اضافه شده به HTML را می گیرد و یک الگوی خودکار و توصیه شده برای حفظ ثبات در سراسر کد تنظیم می کند.

2. الگوی ترکیب

ترکیب الگوی طراحی الگویی است که اساسا در خدمت ایجاد ساختارهای پیچیده از ساختارهای ساده تر است. در پروژه‌های فرانت‌اند، این امر می‌تواند اجزای کوچکی را ایجاد کند که با هم می‌توانند یک جزء بزرگ‌تر را تشکیل دهند، بنابراین، می‌توان اجزای بسیار قابل شخصی‌سازی را با اجتناب از «حفاری پایه» ایجاد کرد و خواندن کد tailwind شما با این تقسیم‌بندی به فایل‌های کوچک ساده‌تر می‌شود.

3. TwMerge

O twMerge کتابخانه ای است که قدرت Tailwind را افزایش می دهد، از آن برای ادغام و ترکیب کلاس های Tailwind استفاده می شود و می تواند با تضادهای کلاسی که ممکن است در برنامه شما ایجاد شود مقابله کند. این برای برنامه‌های فرانت‌اند که می‌توانیم سبک‌ها، توابع و تعاملات مبتنی بر حالت پویا داشته باشیم، بسیار مفید است.

4. clsx

clsx یک کتابخانه دستکاری کلاس CSS است که به شما امکان می دهد نام کلاس ها را به روشی ساده و کارآمد ترکیب، شرط و کپی کنید.

5. ترکیب TwMerge + clsx

همچنین می‌توانید این دو کتابخانه را برای ایجاد بسته‌بندی‌ها ترکیب کنید و از هر دو قابلیت با هم استفاده کنید.

import { type ClassValue, clsx } from ‘clsx’
import { twMerge } from ‘tailwind-merge’

export const cn = (…inputs: ClassValue[]) => {
return twMerge(clsx(inputs))
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. CVA

یکی دیگر از کتابخانه های فوق العاده برای شما که دلتنگ استفاده از CSS-in-JS هستید CVA با آن می توانید انواع مختلفی برای اجزای خود ایجاد کنید. و همچنین می توانید از wrapper cn که قبلا ایجاد کردیم ترکیب و استفاده کنید. مثال زیر از یک جزء دکمه ساده:

// components/button.tsx
import { cva, VariantProps } from ‘class-variance-authority’
import { ComponentProps } from ‘react’
import { cn } from ‘@/lib/utils’

const buttonStyles = cva(‘font-semibold border rounded ‘, {
variants: {
variant: {
primary: [
‘bg-blue-500’,
‘text-white’,
‘border-transparent’,
‘hover:bg-blue-600’,
],
secondary: [
‘bg-white’,
‘text-gray-800’,
‘border-gray-400’,
‘hover:bg-gray-100’,
],
},
size: {
small: [‘text-sm’, ‘py-1’, ‘px-2’],
medium: [‘text-base’, ‘py-2’, ‘px-4’],
},
},
defaultVariants: {
variant: ‘primary’,
size: ‘medium’,
},
})

type buttonProps = VariantProps & ComponentProps

export const Button = ({ variant, size, className, …props }: buttonProps) => {
return (

)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

//App.tsx

import { Button } from ‘./button’

export const App = () => {

Primary
Secondary
>
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. دیگران

کتابخانه های دیگری شبیه به CVA مانند انواع windstitch و Tawild در میان دیگران وجود دارد. من شخصا از استفاده از انواع Tawild لذت بردم و معتقدم ارزش آزمایش را نیز دارد.

با استفاده از این نکات در پروژه frontend خود با Tailwind CSS می توانید انعطاف پذیری، خوانایی، قابلیت استفاده مجدد را افزایش دهید و مدیریت کلاس های خود را در Tailwind CSS آسان تر کنید. سهولت انجام تست‌های پایانی احتمالی شما، ادغام افراد جدید در پروژه‌ها را آسان‌تر می‌کند. این روند ایجاد رابط های مدرن، پاسخگو و تعاملی را بهبود می بخشد و کیفیت کد و محصول نهایی شما را افزایش می دهد.

import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs))
}

// components/button.tsx
import { cva, VariantProps } from 'class-variance-authority'
import { ComponentProps } from 'react'
import { cn } from '@/lib/utils'

const buttonStyles = cva('font-semibold border rounded ', {
  variants: {
    variant: {
      primary: [
        'bg-blue-500',
        'text-white',
        'border-transparent',
        'hover:bg-blue-600',
      ],
      secondary: [
        'bg-white',
        'text-gray-800',
        'border-gray-400',
        'hover:bg-gray-100',
      ],
    },
    size: {
      small: ['text-sm', 'py-1', 'px-2'],
      medium: ['text-base', 'py-2', 'px-4'],
    },
  },
  defaultVariants: {
    variant: 'primary',
    size: 'medium',
  },
})

type buttonProps = VariantProps & ComponentProps

export const Button = ({ variant, size, className, ...props }: buttonProps) => {
  return (
    
  )
}

//App.tsx

import { Button } from './button'

export const App = () => {
  
    Primary
    Secondary 
  >
}