டெயில்விண்ட் CSS பாதுகாப்பான பட்டியல்: தயாரிப்புச் சூழலுக்கான மாறும் வகுப்புப் பெயர்களின் பாதுகாப்பு

டெயில்விண்ட் CSS என்பது ஒரு யூட்டிலிட்டி-ஃபர்ஸ்ட் CSS கட்டமைப்பு ஆகும். இது உங்கள் வலைப் பயன்பாடுகளை ஸ்டைல் செய்வதற்காக வரையறுக்கப்பட்ட வகுப்புகளின் ஒரு பரந்த வரிசையை வழங்குகிறது. அதன் யூட்டிலிட்டி-ஃபர்ஸ்ட் அணுகுமுறை உருவாக்கத்தில் இணையற்ற நெகிழ்வுத்தன்மையையும் வேகத்தையும் வழங்கினாலும், சரியாக நிர்வகிக்கப்படாவிட்டால், தயாரிப்புச் சூழலில் பெரிய CSS கோப்புகளுக்கு வழிவகுக்கும். இங்குதான் பாதுகாப்பான பட்டியல் (safelisting) (வெள்ளைப் பட்டியல் என்றும் அழைக்கப்படுகிறது) வருகிறது. பாதுகாப்பான பட்டியல் என்பது, உங்கள் திட்டத்தில் நீங்கள் எந்த வகுப்புப் பெயர்களைப் பயன்படுத்த விரும்புகிறீர்கள் என்பதை டெயில்விண்ட் CSS-க்குத் தெளிவாகத் தெரிவிக்கும் ஒரு செயல்முறையாகும். இது உருவாக்கச் செயல்முறையின் போது பயன்படுத்தப்படாத மற்ற அனைத்து வகுப்புகளையும் நிராகரிக்க அனுமதிக்கிறது. இது உங்கள் CSS கோப்பின் அளவைக் கணிசமாகக் குறைக்கிறது, இதனால் பக்கங்கள் வேகமாக ஏற்றப்படுவதற்கும் செயல்திறன் மேம்படுவதற்கும் வழிவகுக்கிறது.

பாதுகாப்பான பட்டியலின் தேவையைப் புரிந்துகொள்ளுதல்

டெயில்விண்ட் CSS இயல்பாக ஆயிரக்கணக்கான CSS வகுப்புகளை உருவாக்குகிறது. இந்த வகுப்புகளில் ஒரு சிறிய பகுதியை மட்டுமே நீங்கள் பயன்படுத்தினாலும், உங்கள் தயாரிப்பு உருவாக்கத்தில் இவை அனைத்தையும் சேர்த்தால், உங்கள் CSS கோப்பு தேவையற்ற முறையில் பெரியதாக இருக்கும். இது உங்கள் வலைத்தளத்தின் செயல்திறனை பல வழிகளில் பாதிக்கிறது:

• அதிகரித்த கோப்பு அளவு: பெரிய கோப்புகள் பதிவிறக்கம் செய்ய அதிக நேரம் எடுக்கும், குறிப்பாக மெதுவான இணைப்புகளில்.
• மெதுவான பாகுபடுத்துதல்: பக்கத்தை ரெண்டர் செய்வதற்கு முன், உலாவிகள் முழு CSS கோப்பையும் பாகுபடுத்த வேண்டும், இது குறிப்பிடத்தக்க தாமதத்தை ஏற்படுத்தும்.
• வீணான அலைவரிசை: பெரிய CSS கோப்பைப் பதிவிறக்கம் செய்ய பயனர்கள் அதிக அலைவரிசையைப் பயன்படுத்துகின்றனர், இது மொபைல் பயனர்களுக்கு மிகவும் முக்கியமானதாகும்.

பாதுகாப்பான பட்டியல், நீங்கள் உண்மையில் பயன்படுத்தும் வகுப்புகளை மட்டும் தேர்ந்தெடுத்து சேர்ப்பதன் மூலம் இந்த சிக்கல்களைத் தீர்க்கிறது, இதன் விளைவாக கணிசமாகச் சிறிய மற்றும் திறமையான CSS கோப்பு கிடைக்கிறது. நவீன வலை மேம்பாட்டு நடைமுறைகள் மெலிந்த மற்றும் மேம்படுத்தப்பட்ட குறியீட்டை விரும்புகின்றன. டெயில்விண்ட் CSS உடன் பாதுகாப்பான பட்டியல் என்பது ஒரு சிறந்த நடைமுறை மட்டுமல்ல; செயல்திறன்மிக்க வலைப் பயன்பாடுகளை வழங்குவதற்கான ஒரு தேவையாகும்.

மாறும் வகுப்புப் பெயர்களின் சவால்கள்

பாதுகாப்பான பட்டியல் முக்கியமானதாக இருந்தாலும், நீங்கள் மாறும் வகுப்புப் பெயர்களைப் பயன்படுத்தும்போது அது ஒரு சவாலை அளிக்கிறது. மாறும் வகுப்புப் பெயர்கள் என்பவை இயக்க நேரத்தில் உருவாக்கப்படும் அல்லது மாற்றியமைக்கப்படும் பெயர்களாகும். இவை பெரும்பாலும் பயனர் உள்ளீடு, ஒரு API இலிருந்து பெறப்பட்ட தரவு அல்லது உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டிற்குள் உள்ள நிபந்தனை தர்க்கத்தை அடிப்படையாகக் கொண்டவை. ஆரம்ப டெயில்விண்ட் CSS உருவாக்கச் செயல்முறையின் போது இந்த வகுப்புகளைக் கணிப்பது கடினம், ஏனெனில் கருவிகளால் அந்த வகுப்புகள் தேவைப்படும் என்பதை "பார்க்க" முடியாது.

எடுத்துக்காட்டாக, பயனர் விருப்பங்களின் அடிப்படையில் நீங்கள் பின்னணி வண்ணங்களை மாறும் வகையில் பயன்படுத்தும் ஒரு சூழ்நிலையைக் கவனியுங்கள். உங்களிடம் வண்ண விருப்பங்களின் தொகுப்பு இருக்கலாம் (எ.கா., `bg-red-500`, `bg-green-500`, `bg-blue-500`) மற்றும் பயனரின் தேர்வின் அடிப்படையில் பொருத்தமான வகுப்பைப் பயன்படுத்த ஜாவாஸ்கிரிப்டைப் பயன்படுத்தலாம். இந்த விஷயத்தில், நீங்கள் வெளிப்படையாகப் பாதுகாப்பான பட்டியலில் சேர்க்காவிட்டால், டெயில்விண்ட் CSS இந்த வகுப்புகளை இறுதி CSS கோப்பில் சேர்க்காமல் போகலாம்.

மற்றொரு பொதுவான எடுத்துக்காட்டு, தொடர்புடைய ஸ்டைல்களுடன் மாறும் வகையில் உருவாக்கப்படும் உள்ளடக்கத்தை உள்ளடக்கியது. அதன் வகை அல்லது தரவு மூலத்தால் தீர்மானிக்கப்பட்ட ஒரு தனித்துவமான ஸ்டைலுடன், பல்வேறு விட்ஜெட்களைக் காட்டும் ஒரு டாஷ்போர்டை உருவாக்குவதை கற்பனை செய்து பாருங்கள். ஒவ்வொரு விட்ஜெட்டிற்கும் பயன்படுத்தப்படும் குறிப்பிட்ட டெயில்விண்ட் CSS வகுப்புகள், காட்டப்படும் தரவைப் பொறுத்து இருக்கலாம், அவற்றை முன்கூட்டியே பாதுகாப்பான பட்டியலில் சேர்ப்பது சவாலானது. இது கூறு நூலகங்களுக்கும் பொருந்தும், அங்கு இறுதிப் பயனர் சில CSS வகுப்புகளைப் பயன்படுத்த வேண்டும் என்று நீங்கள் விரும்புகிறீர்கள்.

மாறும் வகுப்புப் பெயர்களைப் பாதுகாப்பான பட்டியலில் சேர்ப்பதற்கான முறைகள்

டெயில்விண்ட் CSS-இல் மாறும் வகுப்புப் பெயர்களைப் பாதுகாப்பான பட்டியலில் சேர்க்க பல உத்திகள் உள்ளன. சிறந்த அணுகுமுறை உங்கள் திட்டத்தின் சிக்கலான தன்மை மற்றும் மாறும் தன்மையின் அளவைப் பொறுத்தது.

1. 'tailwind.config.js' இல் 'safelist' விருப்பத்தைப் பயன்படுத்துதல்

மிகவும் நேரடியான முறை உங்கள் `tailwind.config.js` கோப்பில் `safelist` விருப்பத்தைப் பயன்படுத்துவதாகும். இந்த விருப்பம், இறுதி CSS கோப்பில் எப்போதும் சேர்க்கப்பட வேண்டிய வகுப்புப் பெயர்களை வெளிப்படையாகக் குறிப்பிட உங்களை அனுமதிக்கிறது.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
    'text-xl',
    'font-bold',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

நன்மைகள்:

• குறைந்த எண்ணிக்கையிலான மாறும் வகுப்புகளுக்கு எளிமையானது மற்றும் செயல்படுத்துவதற்கு எளிதானது.
• எந்த வகுப்புகள் சேர்க்கப்பட்டுள்ளன என்பதன் மீது தெளிவான கட்டுப்பாட்டை வழங்குகிறது.

தீமைகள்:

• உங்களிடம் அதிக எண்ணிக்கையிலான மாறும் வகுப்புகள் இருந்தால் சிரமமாக மாறும்.
• நீங்கள் மாறும் வகுப்புகளைச் சேர்க்கும்போதோ அல்லது அகற்றும்போதோ `tailwind.config.js` கோப்பை கைமுறையாகப் புதுப்பிக்க வேண்டும்.
• வகுப்புப் பெயர்கள் உண்மையிலேயே கணிக்க முடியாத மிகவும் மாறும் சூழ்நிலைகளுக்கு இது நன்றாகப் பொருந்தாது.

2. 'safelist' இல் ரெகுலர் எக்ஸ்பிரஷன்களைப் பயன்படுத்துதல்

மேலும் சிக்கலான சூழ்நிலைகளுக்கு, நீங்கள் `safelist` விருப்பத்தில் ரெகுலர் எக்ஸ்பிரஷன்களைப் பயன்படுத்தலாம். இது ஒவ்வொரு வகுப்புப் பெயரையும் வெளிப்படையாகப் பட்டியலிடுவதற்குப் பதிலாக, வகுப்புப் பெயர்களின் வடிவங்களைப் பொருத்த உங்களை அனுமதிக்கிறது.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    /^bg-.*-500$/,
    /^text-./, // அனைத்து உரை வகுப்புகளையும் பொருத்துவதற்கான எடுத்துக்காட்டு
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

இந்த எடுத்துக்காட்டில், `/^bg-.*-500$/` என்ற ரெகுலர் எக்ஸ்பிரஷன் `bg-` உடன் தொடங்கும், அதைத் தொடர்ந்து எந்த எழுத்துக்களும் (`.*`), அதைத் தொடர்ந்து `-500` என முடியும் எந்தவொரு வகுப்புப் பெயருடனும் பொருந்தும். இது `bg-red-500`, `bg-green-500`, `bg-blue-500`, மற்றும் `bg-mycustomcolor-500` போன்ற வகுப்புகளையும் உள்ளடக்கும்.

நன்மைகள்:

• வகுப்புப் பெயர்களை வெளிப்படையாகப் பட்டியலிடுவதை விட அதிக நெகிழ்வுத்தன்மை கொண்டது.
• ஒரே உள்ளீட்டின் மூலம் பரந்த அளவிலான மாறும் வகுப்புகளைக் கையாள முடியும்.

தீமைகள்:

• ரெகுலர் எக்ஸ்பிரஷன்கள் பற்றிய நல்ல புரிதல் தேவை.
• சிக்கலான சூழ்நிலைகளுக்கு துல்லியமான மற்றும் திறமையான ரெகுலர் எக்ஸ்பிரஷன்களை உருவாக்குவது கடினமாக இருக்கும்.
• தவறுதலாக உங்களுக்குத் தேவையில்லாத வகுப்புகளையும் சேர்க்கக்கூடும், இது உங்கள் CSS கோப்பு அளவை அதிகரிக்க வாய்ப்புள்ளது.

3. உருவாக்க நேரத்தில் ஒரு மாறும் பாதுகாப்பான பட்டியலை உருவாக்குதல்

வகுப்புப் பெயர்கள் உண்மையிலேயே கணிக்க முடியாத மிகவும் மாறும் சூழ்நிலைகளுக்கு, உருவாக்கச் செயல்முறையின் போது நீங்கள் ஒரு மாறும் பாதுகாப்பான பட்டியலை உருவாக்கலாம். இது உங்கள் குறியீட்டைப் பகுப்பாய்வு செய்து மாறும் வகுப்புப் பெயர்களைக் கண்டறிந்து, பின்னர் டெயில்விண்ட் CSS இயக்கப்படுவதற்கு முன்பு அவற்றை `safelist` விருப்பத்தில் சேர்ப்பதை உள்ளடக்குகிறது.

இந்த அணுகுமுறை பொதுவாக ஒரு பில்ட் ஸ்கிரிப்டைப் (எ.கா., ஒரு Node.js ஸ்கிரிப்ட்) பயன்படுத்தி பின்வருவனவற்றைச் செய்கிறது:

1. உங்கள் ஜாவாஸ்கிரிப்ட், டைப்ஸ்கிரிப்ட் அல்லது பிற குறியீட்டுக் கோப்புகளைப் பாகுபடுத்துதல்.
2. சாத்தியமான மாறும் வகுப்புப் பெயர்களைக் கண்டறிதல் (எ.கா., ஸ்டிரிங் இன்டர்போலேஷன் அல்லது வகுப்புப் பெயர்களை உருவாக்கும் நிபந்தனை தர்க்கத்தைத் தேடுவதன் மூலம்).
3. கண்டறியப்பட்ட வகுப்புப் பெயர்களைக் கொண்ட ஒரு `safelist` வரிசையை உருவாக்குதல்.
4. உருவாக்கப்பட்ட `safelist` வரிசையுடன் உங்கள் `tailwind.config.js` கோப்பைப் புதுப்பித்தல்.
5. டெயில்விண்ட் CSS உருவாக்கச் செயல்முறையை இயக்குதல்.

இது மிகவும் சிக்கலான அணுகுமுறை, ஆனால் இது மிகவும் மாறும் வகுப்புப் பெயர்களைக் கையாளுவதற்கு மிகப்பெரிய நெகிழ்வுத்தன்மையையும் துல்லியத்தையும் வழங்குகிறது. இந்த நோக்கத்திற்காக உங்கள் குறியீட்டுத் தளத்தை பகுப்பாய்வு செய்ய `esprima` அல்லது `acorn` (ஜாவாஸ்கிரிப்ட் பாகுபடுத்திகள்) போன்ற கருவிகளைப் பயன்படுத்தலாம். இந்த அணுகுமுறைக்கு நல்ல சோதனை பாதுகாப்பு இருப்பது மிகவும் முக்கியம்.

இதை நீங்கள் எவ்வாறு செயல்படுத்தலாம் என்பதற்கான ஒரு எளிமைப்படுத்தப்பட்ட எடுத்துக்காட்டு இங்கே:

// build-safelist.js
const fs = require('fs');
const glob = require('glob');

// ஒரு ஸ்டிரிங்கிலிருந்து சாத்தியமான டெயில்விண்ட் வகுப்புகளைப் பிரித்தெடுக்கும் செயல்பாடு (மிகவும் அடிப்படையான எடுத்துக்காட்டு)
function extractClasses(content) {
  const classRegex = /(?:class(?:Name)?=["'])([^"']*)(?:["'])/g;  // மேம்படுத்தப்பட்ட ரெஜெக்ஸ்
  let match;
  const classes = new Set();
  while ((match = classRegex.exec(content)) !== null) {
    const classList = match[1].split(/\s+/);
    classList.forEach(cls => {
      // இந்த வகுப்பு ஒரு டெயில்விண்ட் வகுப்பு போல் தெரிகிறதா என்பதை சரிபார்க்க இதை மேலும் செம்மைப்படுத்தவும்
      if (cls.startsWith('bg-') || cls.startsWith('text-') || cls.startsWith('font-')) {  // எளிமைப்படுத்தப்பட்ட டெயில்விண்ட் வகுப்பு சரிபார்ப்பு
        classes.add(cls);
      }
    });
  }
  return Array.from(classes);
}


const files = glob.sync('./src/**/*.{js,jsx,ts,tsx}'); // உங்கள் கோப்புகளுடன் பொருந்தும்படி குளோப் வடிவத்தை சரிசெய்யவும்

let allClasses = [];
files.forEach(file => {
  const content = fs.readFileSync(file, 'utf-8');
  const extractedClasses = extractClasses(content);
   allClasses = allClasses.concat(extractedClasses);
});

const uniqueClasses = [...new Set( allClasses)];

// டெயில்விண்ட் কনফিগைப் படிக்கவும்
const tailwindConfigPath = './tailwind.config.js';
const tailwindConfig = require(tailwindConfigPath);

// பாதுகாப்பான பட்டியலைப் புதுப்பிக்கவும்
tailwindConfig.safelist = tailwindConfig.safelist || []; // safelist இருப்பதை உறுதி செய்யவும்
tailwindConfig.safelist = tailwindConfig.safelist.concat(uniqueClasses);

// புதுப்பிக்கப்பட்ட কনফிகைப் மீண்டும் கோப்பில் எழுதவும்
fs.writeFileSync(tailwindConfigPath, `module.exports = ${JSON.stringify(tailwindConfig, null, 2)}`);

console.log('டெயில்விண்ட் কনফিগ பாதுகாப்பான பட்டியல் வெற்றிகரமாக புதுப்பிக்கப்பட்டது!');

உங்கள் `package.json` கோப்பை உங்கள் பில்ட் படிக்கு முன் இதை இயக்க மாற்றுங்கள்:

{"scripts": {
  "build": "node build-safelist.js && next build",  // அல்லது உங்கள் பில்ட் கட்டளை
  ...
}}

குறியீடு பாகுபடுத்துதலுக்கான முக்கியக் குறிப்புகள்:

• சிக்கலான தன்மை: இது ஒரு சிக்கலான நுட்பமாகும், இதற்கு மேம்பட்ட ஜாவாஸ்கிரிப்ட் அறிவு தேவை.
• தவறான நேர்மறைகள்: பாகுபடுத்தி டெயில்விண்ட் வகுப்புகள் போலத் தோன்றும் ஆனால் உண்மையில் வேறு ஏதேனும் ஸ்டிரிங்குகளைக் கண்டறிய வாய்ப்புள்ளது. ரெஜெக்ஸை செம்மைப்படுத்தவும்.
• செயல்திறன்: ஒரு பெரிய குறியீட்டுத் தளத்தை பாகுபடுத்துவது நேரத்தைச் செலவழிக்கும். பாகுபடுத்தும் செயல்முறையை முடிந்தவரை மேம்படுத்தவும்.
• பராமரிப்புத்திறன்: பாகுபடுத்தும் தர்க்கம் சிக்கலானதாகவும் காலப்போக்கில் பராமரிக்கக் கடினமாகவும் மாறும்.

நன்மைகள்:

• மிகவும் மாறும் வகுப்புப் பெயர்களுக்கு மிகவும் துல்லியமான பாதுகாப்பான பட்டியலை வழங்குகிறது.
• `tailwind.config.js` கோப்பைப் புதுப்பிக்கும் செயல்முறையை தானியங்குபடுத்துகிறது.

தீமைகள்:

• மற்ற முறைகளை விட செயல்படுத்துவதற்கு கணிசமாக சிக்கலானது.
• உங்கள் குறியீட்டுத் தளம் மற்றும் மாறும் வகுப்புப் பெயர்கள் உருவாக்கப்படும் விதம் பற்றிய ஆழமான புரிதல் தேவை.
• உருவாக்கச் செயல்முறைக்கு குறிப்பிடத்தக்க கூடுதல் சுமையைச் சேர்க்கலாம்.

4. கடைசி முயற்சியாக இன்லைன் ஸ்டைல்களைப் பயன்படுத்துதல் (பொதுவாக ஊக்கப்படுத்தப்படுவதில்லை)

மேலே உள்ள முறைகளைப் பயன்படுத்தி எளிதாகப் பாதுகாப்பான பட்டியலில் சேர்க்க முடியாத மிகவும் மாறும் ஸ்டைல்கள் உங்களிடம் இருந்தால், கடைசி முயற்சியாக இன்லைன் ஸ்டைல்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளலாம். இருப்பினும், இந்த அணுகுமுறை பொதுவாக ஊக்கப்படுத்தப்படுவதில்லை, ஏனெனில் இது டெயில்விண்ட் CSS போன்ற ஒரு CSS கட்டமைப்பைப் பயன்படுத்துவதன் நோக்கத்தையே தோற்கடிக்கிறது.

இன்லைன் ஸ்டைல்கள் ஒரு CSS கோப்பில் வரையறுக்கப்படுவதற்குப் பதிலாக, நேரடியாக HTML உறுப்புகளில் பயன்படுத்தப்படுகின்றன. இது பல சிக்கல்களுக்கு வழிவகுக்கும்:

• குறைந்த பராமரிப்புத்திறன்: இன்லைன் ஸ்டைல்களை நிர்வகிப்பது மற்றும் புதுப்பிப்பது கடினம்.
• மோசமான செயல்திறன்: இன்லைன் ஸ்டைல்கள் பக்க ஏற்றுதல் நேரங்களையும் ரெண்டரிங் செயல்திறனையும் எதிர்மறையாகப் பாதிக்கலாம்.
• மறுபயன்பாட்டுத்தன்மை இல்லாமை: இன்லைன் ஸ்டைல்களை பல உறுப்புகளில் மீண்டும் பயன்படுத்த முடியாது.

நீங்கள் இன்லைன் ஸ்டைல்களைப் பயன்படுத்த வேண்டியிருந்தால், அவற்றின் பயன்பாட்டை மிகவும் மாறும் மற்றும் கணிக்க முடியாத ஸ்டைல்களுக்கு மட்டும் పరిమితపరచండి. இன்லைன் ஸ்டைல்களை மிகவும் திறம்பட நிர்வகிக்க உதவும் ஜாவாஸ்கிரிப்ட் நூலகங்களைப் பயன்படுத்துவதைக் கவனியுங்கள், அதாவது ரியாக்டின் `style` ப்ராப் அல்லது Vue.js இன் `:style` பைண்டிங்.

எடுத்துக்காட்டு (ரியாக்ட்):

function MyComponent({ backgroundColor }) {
  return (
    

      {/* ... */}
    
  );
}

டெயில்விண்ட் CSS பாதுகாப்பான பட்டியலுக்கான சிறந்த நடைமுறைகள்

உங்கள் டெயில்விண்ட் CSS பாதுகாப்பான பட்டியல் உத்தி திறம்பட மற்றும் பராமரிக்கக்கூடியதாக இருப்பதை உறுதிசெய்ய, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• எளிமையான அணுகுமுறையுடன் தொடங்கவும்: `safelist` விருப்பத்தில் வகுப்புப் பெயர்களை வெளிப்படையாகப் பட்டியலிடுவதன் மூலம் தொடங்கவும். தேவைப்பட்டால் மட்டுமே மிகவும் சிக்கலான முறைகளுக்கு (எ.கா., ரெகுலர் எக்ஸ்பிரஷன்கள் அல்லது மாறும் பாதுகாப்பான பட்டியல்கள்) செல்லவும்.
• முடிந்தவரை குறிப்பாக இருங்கள்: தேவையற்ற வகுப்புகளைச் சேர்க்கக்கூடிய மிகவும் பரந்த ரெகுலர் எக்ஸ்பிரஷன்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• முழுமையாகச் சோதிக்கவும்: எந்தவொரு பாதுகாப்பான பட்டியல் உத்தியையும் செயல்படுத்திய பிறகு, அனைத்து ஸ்டைல்களும் சரியாகப் பயன்படுத்தப்பட்டுள்ளன என்பதை உறுதிப்படுத்த உங்கள் பயன்பாட்டை முழுமையாகச் சோதிக்கவும். மாறும் கூறுகள் மற்றும் பயனர் தொடர்புகளுக்கு சிறப்பு கவனம் செலுத்துங்கள்.
• உங்கள் CSS கோப்பு அளவைக் கண்காணிக்கவும்: உங்கள் பாதுகாப்பான பட்டியல் உத்தி கோப்பு அளவைக் திறம்பட குறைக்கிறதா என்பதை உறுதிப்படுத்த உங்கள் உருவாக்கப்பட்ட CSS கோப்பின் அளவை தவறாமல் சரிபார்க்கவும்.
• செயல்முறையைத் தானியங்குபடுத்துங்கள்: முடிந்தால், `tailwind.config.js` கோப்பைப் புதுப்பிக்கும் செயல்முறையைத் தானியங்குபடுத்துங்கள். இது உங்கள் பாதுகாப்பான பட்டியல் எப்போதும் புதுப்பித்ததாகவும் துல்லியமாகவும் இருப்பதை உறுதிப்படுத்த உதவும்.
• ஒரு PurgeCSS மாற்றீட்டைப் பயன்படுத்துவதைக் கவனியுங்கள்: உங்கள் CSS கோப்பின் அளவில் உங்களுக்கு இன்னும் சிக்கல்கள் இருந்தால், PurgeCSS போன்ற மிகவும் ஆக்ரோஷமான CSS நீக்கும் கருவியைப் பயன்படுத்துவதைக் கவனியுங்கள், ஆனால் அதன் வர்த்தகப் பரிமாற்றங்களைப் புரிந்து கொள்ளுங்கள்.
• சூழல் மாறிகளைப் பயன்படுத்தவும்: வெவ்வேறு சூழல்களில் (எ.கா., டெவலப்மெண்ட், ஸ்டேஜிங், புரொடக்ஷன்) உங்கள் பாதுகாப்பான பட்டியல் உத்தியின் நடத்தையைக் கட்டுப்படுத்த, சூழல் மாறிகளைப் பயன்படுத்தவும். இது உங்கள் குறியீட்டை மாற்றாமல் வெவ்வேறு பாதுகாப்பான பட்டியல் உள்ளமைவுகளுக்கு இடையில் எளிதாக மாற அனுமதிக்கிறது. எடுத்துக்காட்டாக, ஸ்டைலிங் சிக்கல்களை எளிதாக சரிசெய்ய டெவலப்மெண்டில் பாதுகாப்பான பட்டியலை முடக்கலாம்.

சர்வதேச தாக்கங்களுடன் கூடிய எடுத்துக்காட்டுச் சூழல்கள்

சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) அம்சங்களைக் கொண்ட பயன்பாடுகளைக் கருத்தில் கொள்ளும்போது பாதுகாப்பான பட்டியல் இன்னும் முக்கியமானதாகிறது.

வலமிருந்து இடமாக (RTL) எழுதப்படும் மொழிகள்

அரபு, ஹீப்ரு மற்றும் பாரசீகம் போன்ற மொழிகளுக்கு, உரை வலமிருந்து இடமாகப் பாய்கிறது. டெயில்விண்ட் CSS, `rtl:text-right` மற்றும் `ltr:text-left` போன்ற RTL தளவமைப்புகளைக் கையாளும் யூட்டிலிட்டிகளை வழங்குகிறது. இருப்பினும், இந்த யூட்டிலிட்டிகள் வெளிப்படையாகப் பாதுகாப்பான பட்டியலில் சேர்க்கப்பட்டால் அல்லது உங்கள் மூலக் குறியீட்டில் கண்டறியப்பட்டால் மட்டுமே இறுதி CSS கோப்பில் சேர்க்கப்படும்.

உங்கள் பயன்பாடு RTL மொழிகளை ஆதரித்தால், உங்கள் தளவமைப்புகள் RTL சூழல்களில் சரியாகக் காட்டப்படுவதை உறுதிசெய்ய தொடர்புடைய RTL யூட்டிலிட்டிகளைப் பாதுகாப்பான பட்டியலில் சேர்ப்பதை உறுதிசெய்யவும். எடுத்துக்காட்டாக, அனைத்து RTL மற்றும் LTR யூட்டிலிட்டிகளையும் பாதுகாப்பான பட்டியலில் சேர்க்க `/^(rtl:|ltr:)/` போன்ற ஒரு ரெகுலர் எக்ஸ்பிரஷனைப் பயன்படுத்தலாம்.

வெவ்வேறு எழுத்துரு குடும்பங்கள்

வெவ்வேறு மொழிகளுக்கு எழுத்துக்களை சரியாகக் காட்ட வெவ்வேறு எழுத்துரு குடும்பங்கள் தேவைப்படுகின்றன. எடுத்துக்காட்டாக, சீன, ஜப்பானிய மற்றும் கொரிய மொழிகளுக்கு CJK எழுத்துக்களை ஆதரிக்கும் எழுத்துருக்கள் தேவை. இதேபோல், உச்சரிப்புக் குறியீடுகளைக் கொண்ட மொழிகளுக்கு அந்த எழுத்துக்களை உள்ளடக்கிய எழுத்துருக்கள் தேவைப்படலாம்.

உங்கள் பயன்பாடு பல மொழிகளை ஆதரித்தால், வெவ்வேறு மொழிகளுக்கு வெவ்வேறு எழுத்துரு குடும்பங்களைப் பயன்படுத்த வேண்டியிருக்கும். தனிப்பயன் எழுத்துரு குடும்பங்களை வரையறுக்க CSS இல் `@font-face` விதியைப் பயன்படுத்தலாம், பின்னர் அவற்றை குறிப்பிட்ட உறுப்புகளுக்குப் பயன்படுத்த டெயில்விண்ட் CSS ஐப் பயன்படுத்தலாம். உங்கள் CSS இல் நீங்கள் பயன்படுத்தும் எழுத்துரு குடும்பப் பெயர்கள் இறுதி CSS கோப்பில் சேர்க்கப்படுவதை உறுதிசெய்ய அவற்றை பாதுகாப்பான பட்டியலில் சேர்ப்பதை உறுதிசெய்யவும்.

எடுத்துக்காட்டு:

/* உங்கள் உலகளாவிய CSS கோப்பில் */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansSC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansSC-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* உங்கள் tailwind.config.js இல் */
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Noto Sans SC', ...],
      },
    },
  },
  safelist: [
    'font-sans', // font-sans எப்போதும் சேர்க்கப்படுவதை உறுதி செய்கிறது
  ],
};

ஸ்டைலிங்கில் உள்ள கலாச்சார வேறுபாடுகள்

சில சந்தர்ப்பங்களில், ஸ்டைலிங் விருப்பத்தேர்வுகள் கலாச்சாரங்கள் முழுவதும் மாறுபடலாம். எடுத்துக்காட்டாக, வண்ணங்களின் தொடர்புகள் ஒரு கலாச்சாரத்திலிருந்து மற்றொன்றுக்கு கணிசமாக வேறுபடலாம். இதேபோல், வெற்று இடம் மற்றும் அச்சுக்கலையின் பயன்பாடும் கலாச்சார விதிமுறைகளால் பாதிக்கப்படலாம்.

உங்கள் பயன்பாடு உலகளாவிய பார்வையாளர்களைக் கவனித்தால், இந்த கலாச்சார வேறுபாடுகளை மனதில் கொண்டு அதற்கேற்ப உங்கள் ஸ்டைலிங்கை வடிவமைக்கவும். இது வெவ்வேறு வட்டாரங்களுக்கு வெவ்வேறு CSS வகுப்புகளைப் பயன்படுத்துவதை அல்லது பயனர்கள் தங்கள் ஸ்டைலிங் விருப்பத்தேர்வுகளைத் தனிப்பயனாக்க அனுமதிப்பதை உள்ளடக்கலாம்.

முடிவுரை

டெயில்விண்ட் CSS பாதுகாப்பான பட்டியல் என்பது தயாரிப்புச் சூழல்களுக்கான ஒரு முக்கியமான மேம்படுத்தல் நுட்பமாகும். இறுதி CSS கோப்பில் சேர்க்கப்பட வேண்டிய வகுப்புப் பெயர்களை வெளிப்படையாகக் குறிப்பிடுவதன் மூலம், அதன் அளவைக் கணிசமாகக் குறைக்கலாம், இது பக்கங்கள் வேகமாக ஏற்றப்படுவதற்கும் செயல்திறன் மேம்படுவதற்கும் வழிவகுக்கிறது. மாறும் வகுப்புப் பெயர்கள் ஒரு சவாலை அளித்தாலும், அவற்றை பாதுகாப்பான பட்டியலில் சேர்ப்பதற்கு பல உத்திகள் உள்ளன, அவை எளிய வெளிப்படையான பட்டியலிடுதல் முதல் மிகவும் சிக்கலான மாறும் பாதுகாப்பான பட்டியல் உருவாக்கம் வரை உள்ளன. இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் டெயில்விண்ட் CSS பாதுகாப்பான பட்டியல் உத்தி திறம்பட, பராமரிக்கக்கூடியதாகவும், உங்கள் திட்டத்தின் தனித்துவமான தேவைகளுக்கு ஏற்ப மாற்றியமைக்கக்கூடியதாகவும் இருப்பதை உறுதிசெய்யலாம்.

உங்கள் வலை மேம்பாட்டுத் திட்டங்களில் பயனர் அனுபவம் மற்றும் செயல்திறனுக்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள். டெயில்விண்ட் CSS உடன் பாதுகாப்பான பட்டியல் இந்த இலக்குகளை அடைவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும்.