👑خوش اومدین به یکی از مهم ترین آموزش های تیلویند
چرا مهم ترین؟ چون امروز میخایم راجب کانفیگ کردن تیلویند صحبت کنیم و یادبگیریم چطور مواردی که میخایم و داخل تیلویند به صورت دیفالت وجود نداره رو اضافه کنیم

🔔ببینین ما وقتی تیلویند رو روی پروژمون نصب میکنیم یه فایل tailwind.config.ts به وجود میاد که میتونیم داخلش کلی کارای جالب کنیم

درحالت عادی و خالی، فایل شما به این صورته:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

حالا شما مواردی که میخاین اضافه کنین رو میتونین توی اینجا بزارین، فرض کنین میخایم رنگ و فونت و سایز و... اضافه کنیم، میتونین این کارو داخل theme انجام بدین، به این صورت:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

مثال بالا رو از داک خود تیلویند براتون آوردم، اینجا میبینین که یسری موارد به صورت مستقیم داخل theme اضافه شدن مثل colors و fontFamily ، و همینطور هم یسریا مثل spacing و borderRadius دااخل extend اضافه شدن

⚡️فرق خیلی خیلی مهم اینجا اینه که اگه شما مثلا رنگ هارو داخل خود theme اضافه کنین، رنگ های دیفالت تیلویند دیگه از بین میرن و فقط رنگ هایی میمونن که شما اضافه کرده باشین، اما داخل extend، هرچی اضافه کنین کنار موارد دیفالت قرار میگیره و هردو رو باهم دارین

تمام موارد داخل theme و extend هم مثل همه و محدودیتی ندارین

◀️استفادش هم مثلا شما یه رنگ primary اضافه کردین اینطوری میزنین:

class="text-primary bg-primary"

#tailwind #tailwind_13
☕️ @CodeExplore