إعداد ملف tailwindcss config و تخصيصه

على الرغم من وجود كلاسات مساعدة "خدمية" Utility Classes التي توفّرها tailwindcss، كذلك أيضًا توفّر إمكانية تخصيص و زيادة إتّساع كلاسات الخدمية بطريقة سلسة، من خلال ملف الإعداد tailwind.config.js|ts الذي يمنحه لك الإطار، مثل إضافة نظام ألوان أو خطوط و غيرها، و في هذه التدوينة سنتطرق إلى زيادة كفاءة و تخصيص tailwindcss بحيث يصبح لدينا ملف مُعدّ و يمكن استخدامه في أكثر من مشروع و كذلك تطويره.

شكل ملف tailwind.config.js|ts

في البداية عند تنفيذ أمر npx tailwindcss init في سطر الأوامر سينشئ لنا ملف tailwind.config.js و سيكون كما يلي :

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

مفتاح content : هنا نضيف مسارات لملفات html أو jsx|tsx في حالة استخدام مكتبة reactjs أو nextjs، و بالمثل ستضع مسارات بإمتداد vue في حال كنت تستخدم إطار vuejs، و لا يقتصر الأمر على هذه الإطارات و المكتبات، بل يمكنك استخدامها مع مختلف الإطارات.

مثال :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
	  './index.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

مفتاح theme : هنا يتم ضبط classes و تخصيصها و أيضًا إضافة كلاسات، و في هذه التدوينة سنركّز على extend للإضافة و زيادة من إمكانيات كلاسات المُساعدة utility classes.

مفتاح plugins : هنا لاستخدام أيّ إضافة مثل typography و غيرها.

ملاحظة : إطار tailwindcss لا يوفّر مكونات components جاهزة مثل bootstrap أو mui، بل يقدّم كلاسات مساعدة utility classes التي تسهّل عليك كتابة css و مكوّنات بشكل أسرع و أكثر حرية و تخصيصًا.

إضافة الألوان colors :

من خلال مفتاح colors يمكن إضافة لون جديد و سيتم تطبيقه على كلاسات bg- - text- - border- - accent- ring- و غيرها من كلاسات المُساعدة التي تملك لون، و من أجل إنشاء لون جديد نضيف اسم للون كمفتاح و نضع قيمته hexcode أو rgb، مثال :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      colors: {
        'primary' : '#111819'
      },
    },
  },
  plugins: [],
}

الآن بعد إضافته يمكننا استخدامه كـ لون للخلفية من خلال bg-primary و border-primary كـ لون للإطار و أيّ كلاس آخر يتضمنه التلوين مثل text-primary و غيره، و من أجل إنشاء لون بتدرجاته كل ما علينا عمله هو التالي :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      colors: {
        "primary": {
          DEFAULT: '#111819',
          '50': '#f5f8f7',
          '100': '#dee9e9',
          '200': '#bdd2d1',
          '300': '#94b4b4',
          '400': '#6e9293',
          '500': '#537879',
          '600': '#415e60',
          '700': '#374d4e',
          '800': '#2f3e40',
          '900': '#2a3637',
          '950': '#111819',
        },
      },
    },
  },
  plugins: [],
}

الآن أصبح لدينا تدرجات لـ primary بالفعل مثل bg-primary-50 - bg-primary-100 .. ألخ، و ذلك يتم من خلال Tailwind، فهي تتكفل بإنشاء كلاسات باسم اللون لأيّ كلاس مساعد يعتمد على التلوين.

بهذه الطريقة يتم إضافة بقية الألوان التي نود إضافتها حتى يصبح لدينا Colors design، و في حال أردنا تغيير تدرجات الألوان الموجودة مُسبقًا بـ tailwindcss، فكل ما علينا فعله هو كتابة اسم اللون و إضافة تدرجات ألوانه أو تغييرها.

ملاحظة : مفتاح DEFAULT يسمح لنا بوضع قيمة إفتراضية لأيّ كلاس مساعد بدون الحاجة إلى إضافة لاحقة مثل class-50، و أيضًا استخدامه غير مقتصر على كلاسات المساعدة للألوان فقط.

المساحات spacing :

يمكن من خلال التعامل مع spacing إضافة أطوال مختلفة لكلاسات المساعدة التي تمثّل padding و margin و height و width و غيرهم، من خلال كتابة رقم الطول ليتم إضافته كلاحقة لـ m مثلًا، و وضع قيمة له سواءً بـ px أو rem أو أيّ وحدة طول أخرى، مثال :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      spacing: {
        '100': '25rem',
        '104': '26rem',
        '108': '27rem',
        '112': '28rem',
        '116': '29rem',
        '120': '30rem',
        '124': '31rem',
        '128': '32rem',
        '132': '33rem',
        '136': '34rem',
        '140': '35rem',
      },
    },
  },
  plugins: [],
}

الآن يمكن استخدام m-140 مثلًا و p-140 و حتى pb-140، فـ tailwindcss تكفلت بإنشاء الكلاسات المساعدة للقيّم التي أضفناها ..

مقاسات الشاشات و أبعادها screens

هي التي تمثّل نقاط التوقّف لمقاسات الشاشات سواءً كـ media query min-width أو غيرها، و تستخدم كـ prefix قبل أيّ كلاس للتفعيل استخدامه عند دخوله مدى المقاس المحدد، مثال عليها sm: في sm:mx-auto و غيرها، و ذلك لضبط التصميم يكون متجاوب و متوافق مع أحجام مختلفة من الشاشات، و يمكن إضافة نقاط توقّف لشاشات أصغر من sm و الذي يمثّل min-width : 640px،فكل ما علينا فعله هو إضافة اسم لنقطة توقّف و قيمتها، مثال على إضافة نقاط توقف جديدة :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      screens: {
        'xs': '576px',
        '2xs': '480px',
        '3xs': '400px',
        '4xs': '360px',
        '5xs': '330px',
      },
    },
  },
  plugins: [],
}

إضافة خطوط fontFamily

من أجل إضافة أيّ خط و استخدامه كـ class نحتاج إلى أمرين، الأول إستيراده سواءً من خلال css أو أيّ طريقة كانت، و من ثم إضافة مسمّى الخط و أسمه كقيمة له، مثال على إضافة خطوط متعددة :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      fontFamily: {
        'cairo': ['Cairo'],
        'noto-sans': ['Noto Sans Arabic'],
        'nunito': ['Nunito'],
        'roboto': ['Roboto']
      },
    },
  },
  plugins: [],
}

الآن يمكن استخدام أيّ من الخطوط المضافة من خلال استخدام كلاس الخاص بها : مثل font-cairo لاستخدام خط Cairo.

أحجام الخطوط fontSize

يمكن إضافة حجم جديد من خلال fontSize و تحديد لاحقة للخط كمفتاح و قيمته حجم الخط، مثال على ذلك :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      fontSize: {
        '2xs': '10px',
      },
    },
  },
  plugins: [],
}

الآن يمكن استخدامه كـ كلاس باسم text-2xs، و لضبط إرتفاع الخط مع الحجم تكون قيمة مفتاح اللاحقة هي مصفوفة لها عنصرين، العنصر الأول يمثّل حجم الخط و العنصر الثاني يمثّل إرتفاع الخط line-height، مثال على ذلك :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      fontSize: {
        '2xs': ['10px', '14px'],
      },
    },
  },
  plugins: [],
}

إنحناء الأطر borderRadius

لإضافة كلاسات تعبّر عن مدى إنحناء الإطار أكثر من الموجود إفتراضيًا يمكن ذلك من خلال borderRadius، و إضافة اللواحق و قيمة كل لاحقة، مثال :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      borderRadius: {
        '4xl' : '2rem' // or '32px'
      },
    },
  },
  plugins: [],
}

الآن يمكن استخدامه من خلال كلاس rounded-4xl.

الطبقات zIndex

بشكل إفتراضي هناك 7 كلاسات مُساعدة تعبّر عن z-index في tailwindcss، لإضافة كلاسات مُساعدة أكثّر يمكن ذلك من خلال الكود التالي :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      zIndex: {
        60: '60',
        70: '70',
        80: '80',
        90: '90',
        100: '100',
        'max' : '99999'
      },
    },
  },
  plugins: [],
}

الآن يمكن استخدام z-max و بقية الكلاسات في كود html.

إضافة قيّم مستوردة من خلال theme

يمكننا إستيراد قيّم الموضوعة كـ spacing مثلًا و إضافتها لكلاس مُساعد مثل min-w من خلال theme، حيث في مثالنا هذا فكلاسات المساعدة لـ min-width حسب وثائق tailwindcss docs هي التالية :

min-w-0

min-w-full

min-w-min

min-w-max

min-w-fit

إلّا إنه يمكننا إضافة قيّم المُستخدمة في كلاسات المساعدة مثل p - w و غيرهم إلى min-w من خلال الطريقة التالية :

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
  ],
  theme: {
    extend: {
      minWidth: ({ theme }) => ({
        ...theme('spacing'),
      }),
    },
  },
  plugins: [],
}

و الآن يمكننا استخدام min-w-4 مثلًا و غيره كما يتم استخدام m و غيرها من كلاسات المساعدة التي لها خيارات أكثر.

الختام

تم تركيز في هذه التدوينة على إضافة و تعديل على colors و spacing و screens بحكم أهمّيتهم و مدى تأثيرهم على كلاسات المُساعدة، بحكم إرتباط مختلف كلاسات المُساعدة في كل واحدة منهم و إشتراكهم بها، بالإضافة إلى إضافة الخطوط و إضافة قيّم لمختلف أنواع كلاسات المُساعدة، ففي النهاية سيصبح لدينا ملف مُتكامل يمكن استخدامه في مختلف المشاريع و التعديل عليه، مثل هذا :

/** @type {import('tailwindcss').Config} */
const { colors: defaultColors } = require('tailwindcss/defaultTheme');

const colors = {
  ...defaultColors,
  ...{
    "primary" : {
      DEFAULT: '#111819',
      '50': '#f5f8f7',
    '100': '#dee9e9',
    '200': '#bdd2d1',
    '300': '#94b4b4',
    '400': '#6e9293',
    '500': '#537879',
    '600': '#415e60',
    '700': '#374d4e',
    '800': '#2f3e40',
    '900': '#2a3637',
    '950': '#111819',
  },
    "blue" : {
      DEFAULT : '#318CF6',
      100 : '#EAF4FF',
      200 : '#BCDBFF',
      300 : '#8FC2FF',
      400 : '#61AAFF',
      500 : '#1F72D4',
      600 : '#105BB2',
      700 : '#054590',
      800 : '#00336E',
      900 : '#00234C',
    },
    "sky" : {
      DEFAULT : '#10BBFD',
      100 : '#E7F8FF',
      200 : '#BCECFF',
      300 : '#91E0FF',
      400 : '#66D4FF',
      500 : '#3BC8FF',
      600 : '#0099D4',
      700 : '#007CAB',
      800 : '#005E83',
      900 : '#00415A',
    },
    "red" : {
      DEFAULT : '#F86363',
      100 : '#FFEFEF',
      200 : '#FFCDCD',
      300 : '#FFABAB',
      400 : '#FF8888',
      500 : '#D64D4D',
      600 : '#B43939',
      700 : '#922828',
      800 : '#701B1B',
      900 : '#4E0F0F',
    },
    "orange" : {
      DEFAULT : '#ED6C3E',
      100 : '#FFF1EC',
      200 : '#FFD2C2',
      300 : '#FFB297',
      400 : '#FD926C',
      500 : '#CB552B',
      600 : '#A9401B',
      700 : '#872E0F',
      800 : '#651F06',
      900 : '#431200',
    },
    "yellow" : {
      DEFAULT : '#FFD843',
      100 : '#FFFBEC',
      200 : '#FFF2C2',
      300 : '#FFE997',
      400 : '#FFE16D',
      500 : '#DDB92F',
      600 : '#BB9B1F',
      700 : '#997D12',
      800 : '#776008',
      900 : '#554401',
    },
    "green" : {
      DEFAULT : '#88CE57',
      100 : '#F7FFF2',
      200 : '#E0FFCB',
      300 : '#CAFFA5',
      400 : '#B3FF7E',
      500 : '#A0EB6C',
      600 : '#71B144',
      700 : '#5B9434',
      800 : '#477725',
      900 : '#335919',
    },
    "blue-hosta" : {
      DEFAULT : '#76BCC8',
      100 : '#F6FDFF',
      200 : '#DAF9FF',
      300 : '#BFF5FF',
      400 : '#A4F1FF',
      500 : '#8DD8E5',
      600 : '#60A0AB',
      700 : '#4C848E',
      800 : '#3A6971',
      900 : '#284D53',
    },
    "indigo" : {
      DEFAULT : '#1e1b4b',
      '50': '#eef2ff',
      '100': '#e0e7ff',
      '200': '#c7d2fe',
      '300': '#a5b4fc',
      '400': '#818cf8',
      '500': '#6366f1',
      '600': '#4f46e5',
      '700': '#4338ca',
      '800': '#3730a3',
      '900': '#312e81',
      '950': '#1e1b4b',
    },
    "slate" : {
      DEFAULT : '#4D4D4D',
      100 : '#FFFFFF',
      200 : '#F0F0F0',
      300 : '#DCDCDC',
      400 : '#C7C7C7',
      500 : '#B3B3B3',
      600 : '#9F9F9F',
      700 : '#8A8A8A',
      800 : '#767676',
      900 : '#616161',
    },
    "gray" : {
      DEFAULT : '#9A9A9A',
      100 : '#FFFFFF',
      200 : '#ECECEC',
      300 : '#D7D7D7',
      400 : '#C3C3C3',
      500 : '#AEAEAE',
      600 : '#868484',
      700 : '#716E6E',
      800 : '#5D5858',
      900 : '#484444',
    },
    "black" : {
      DEFAULT: '#000',
      100 : '#111827',
    },
    'lavender-mist' : '#E3E8EF',
    'magnolia' : '#F3F6FD',
    'slate-gray' : '#748094',
  }
}

module.exports = {
  darkMode: 'class',
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './Views/**/*.{js,ts,jsx,tsx,mdx}',
    './Templates/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      colors: colors,
      fontFamily: {
        'cairo': ['Cairo'],
        'noto-sans': ['Noto Sans Arabic'],
        'nunito': ['Nunito'],
        'roboto': ['Roboto']
      },

      screens: {
        'xs': '576px',
        '2xs': '480px',
        '3xs': '400px',
        '4xs': '360px',
        '5xs': '330px',
      },
      maxWidth: {
        '8xl': '88rem',
        '9xl': '96rem',
        '10xl': '104rem',
        '11xl': '112rem',
        '12xl': '120rem',
      },

      spacing: {
        '100': '25rem',
        '104': '26rem',
        '108': '27rem',
        '112': '28rem',
        '116': '29rem',
        '120': '30rem',
        '124': '31rem',
        '128': '32rem',
        '132': '33rem',
        '136': '34rem',
        '140': '35rem',
      },
      brightness: {
        25: '.25',
        175: '1.75',
      },
      opacity: {
        '12': '.12'
      },
      lineHeight: {
        '11': '44px',
        '12': '76px',

      },
      fontSize: {
        '2xs': ['10px', '14px'],
      },
      typography: {
        quoteless: {
          css: {
            'blockquote > *': { marginTop: '2px', marginBottom: '2px' },
            'blockquote p:first-of-type::before': { content: 'none' },
            'blockquote p:first-of-type::after': { content: 'none' },
          },
        },
        precode: {
          css: {
            'pre > code' : {padding: '8px', paddingTop: '10px' , paddingBottom : '10px'}
          }
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

أدوات مفيدة لصناعة نظام ألوان

UIColors

Colorhexa

المرجع

Tailwindcss docs