M

MLOG

Українська

Повний посібник з безпечних списків Tailwind CSS, що охоплює генерацію динамічних імен класів, оптимізацію для продакшену та найкращі практики захисту ваших таблиць стилів.

Безпечний список Tailwind CSS: захист динамічних імен класів для продакшену

Tailwind CSS — це utility-first CSS-фреймворк, що надає широкий спектр попередньо визначених класів для стилізації ваших вебзастосунків. Хоча його підхід utility-first пропонує неперевершену гнучкість і швидкість у розробці, він також може призвести до великих CSS-файлів у продакшені, якщо ним не керувати належним чином. Саме тут на допомогу приходить безпечний список (safelisting, також відомий як whitelisting). Безпечний список — це процес явного інформування Tailwind CSS про те, які імена класів ви маєте намір використовувати у своєму проєкті, що дозволяє йому відкидати всі інші невикористані класи під час процесу збірки. Це значно зменшує розмір вашого CSS-файлу, що призводить до швидшого завантаження сторінок та покращення продуктивності.

Розуміння потреби в безпечному списку

За замовчуванням Tailwind CSS генерує тисячі CSS-класів. Якби ви включили всі ці класи у свою продакшн-збірку, навіть якщо ви використовуєте лише малу їх частину, ваш CSS-файл був би невиправдано великим. Це впливає на продуктивність вашого вебсайту кількома способами:

Безпечний список вирішує ці проблеми, вибірково включаючи лише ті класи, які ви насправді використовуєте, що призводить до значно меншого та ефективнішого CSS-файлу. Сучасні практики веброзробки вимагають лаконічного та оптимізованого коду. Використання безпечного списку з Tailwind CSS — це не просто найкраща практика; це необхідність для створення продуктивних вебзастосунків.

Проблеми з динамічними іменами класів

Хоча безпечний список є вирішальним, він створює проблему при використанні динамічних імен класів. Динамічні імена класів — це ті, що генеруються або змінюються під час виконання, часто на основі введення користувача, даних, отриманих з API, або умовної логіки у вашому коді JavaScript. Ці класи важко передбачити під час початкового процесу збірки Tailwind CSS, оскільки інструменти не можуть «бачити», що ці класи будуть потрібні.

Наприклад, розглянемо сценарій, де ви динамічно застосовуєте кольори фону на основі уподобань користувача. У вас може бути набір варіантів кольорів (наприклад, `bg-red-500`, `bg-green-500`, `bg-blue-500`), і ви використовуєте JavaScript для застосування відповідного класу залежно від вибору користувача. У цьому випадку Tailwind CSS може не включити ці класи в кінцевий CSS-файл, якщо ви явно не додасте їх до безпечного списку.

Інший поширений приклад стосується динамічно генерованого контенту з пов'язаними стилями. Уявіть, що ви створюєте панель інструментів, яка відображає різні віджети, кожен з яких має унікальний стиль, визначений його типом або джерелом даних. Конкретні класи Tailwind CSS, застосовані до кожного віджета, можуть залежати від даних, що відображаються, що ускладнює їх попереднє додавання до безпечного списку. Це також стосується бібліотек компонентів, де ви хочете, щоб кінцевий користувач міг використовувати деякі CSS-класи.

Методи додавання динамічних імен класів до безпечного списку

Існує кілька стратегій для додавання динамічних імен класів до безпечного списку в Tailwind CSS. Найкращий підхід залежить від складності вашого проєкту та ступеня динамічності.

1. Використання опції `safelist` у `tailwind.config.js`

Найпростіший метод — це використання опції `safelist` у вашому файлі `tailwind.config.js`. Ця опція дозволяє вам явно вказати імена класів, які завжди повинні бути включені в кінцевий 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: [],
}

Плюси:

Мінуси:

2. Використання регулярних виразів у `safelist`

Для більш складних сценаріїв ви можете використовувати регулярні вирази в опції `safelist`. Це дозволяє вам зіставляти шаблони імен класів, а не явно перераховувати кожен з них.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    /^bg-.*-500$/,
    /^text-./, // example for matching all text classes
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

У цьому прикладі регулярний вираз `/^bg-.*-500$/` відповідатиме будь-якому імені класу, яке починається з `bg-`, за яким слідують будь-які символи (`.*`), а потім `-500`. Це включатиме такі класи, як `bg-red-500`, `bg-green-500`, `bg-blue-500` і навіть `bg-mycustomcolor-500`.

Плюси:

Мінуси:

3. Генерація динамічного безпечного списку під час збірки

Для дуже динамічних сценаріїв, де імена класів справді непередбачувані, ви можете генерувати динамічний безпечний список під час процесу збірки. Це включає аналіз вашого коду для виявлення динамічних імен класів, а потім додавання їх до опції `safelist` перед запуском Tailwind CSS.

Цей підхід зазвичай включає використання скрипта збірки (наприклад, скрипта Node.js) для:

  1. Парсингу ваших файлів JavaScript, TypeScript або інших файлів коду.
  2. Виявлення потенційних динамічних імен класів (наприклад, шляхом пошуку інтерполяції рядків або умовної логіки, яка генерує імена класів).
  3. Створення масиву `safelist`, що містить виявлені імена класів.
  4. Оновлення вашого файлу `tailwind.config.js` згенерованим масивом `safelist`.
  5. Запуску процесу збірки Tailwind CSS.

Це найскладніший підхід, але він пропонує найбільшу гнучкість і точність для обробки дуже динамічних імен класів. Ви можете використовувати такі інструменти, як `esprima` або `acorn` (парсери JavaScript) для аналізу вашої кодової бази для цієї мети. Дуже важливо мати хороше тестове покриття для цього підходу.

Ось спрощений приклад того, як ви могли б це реалізувати:

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

// Function to extract potential Tailwind classes from a string (very basic example)
function extractClasses(content) {
  const classRegex = /(?:class(?:Name)?=["'])([^"']*)(?:["'])/g;  // Improved regex
  let match;
  const classes = new Set();
  while ((match = classRegex.exec(content)) !== null) {
    const classList = match[1].split(/\s+/);
    classList.forEach(cls => {
      // Further refine this to check if the class *looks* like a Tailwind class
      if (cls.startsWith('bg-') || cls.startsWith('text-') || cls.startsWith('font-')) {  // Simplified Tailwind Class Check
        classes.add(cls);
      }
    });
  }
  return Array.from(classes);
}


const files = glob.sync('./src/**/*.{js,jsx,ts,tsx}'); // Adjust the glob pattern to match your files

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)];

// Read the Tailwind config
const tailwindConfigPath = './tailwind.config.js';
const tailwindConfig = require(tailwindConfigPath);

// Update the safelist
tailwindConfig.safelist = tailwindConfig.safelist || []; // Ensure safelist exists
tailwindConfig.safelist = tailwindConfig.safelist.concat(uniqueClasses);

// Write the updated config back to the file
fs.writeFileSync(tailwindConfigPath, `module.exports = ${JSON.stringify(tailwindConfig, null, 2)}`);

console.log('Tailwind config safelist updated successfully!');

І змініть ваш `package.json`, щоб запустити це перед кроком збірки:

{"scripts": {
  "build": "node build-safelist.js && next build",  // Or your build command
  ...
}}

Важливі міркування щодо парсингу коду:

Плюси:

Мінуси:

4. Використання інлайнових стилів як крайній засіб (зазвичай не рекомендується)

Якщо у вас є надзвичайно динамічні стилі, які неможливо легко додати до безпечного списку за допомогою будь-якого з вищезазначених методів, ви можете розглянути використання інлайнових стилів як крайній засіб. Однак цей підхід зазвичай не рекомендується, оскільки він суперечить меті використання CSS-фреймворку, такого як Tailwind CSS.

Інлайнові стилі застосовуються безпосередньо до HTML-елементів, а не визначаються в CSS-файлі. Це може призвести до кількох проблем:

Якщо ви все ж таки повинні використовувати інлайнові стилі, намагайтеся обмежити їх використання лише для найбільш динамічних і непередбачуваних стилів. Розгляньте можливість використання бібліотек JavaScript, які можуть допомогти вам ефективніше керувати інлайновими стилями, наприклад, `style` prop у React або прив'язка `:style` у Vue.js.

Приклад (React):

function MyComponent({ backgroundColor }) {
  return (
    

      {/* ... */}
    

  );
}

Найкращі практики для безпечного списку Tailwind CSS

Щоб забезпечити ефективність та підтримуваність вашої стратегії безпечного списку Tailwind CSS, дотримуйтесь цих найкращих практик:

Приклади сценаріїв з міжнародними наслідками

Безпечний список стає ще важливішим при розгляді застосунків з функціями інтернаціоналізації (i18n) та локалізації (l10n).

Мови з письмом справа наліво (RTL)

Для таких мов, як арабська, іврит та перська, текст тече справа наліво. Tailwind CSS надає утиліти для обробки RTL-макетів, такі як `rtl:text-right` та `ltr:text-left`. Однак ці утиліти включаються в кінцевий CSS-файл лише якщо вони явно додані до безпечного списку або виявлені у вашому вихідному коді.

Якщо ваш застосунок підтримує RTL-мови, переконайтеся, що ви додали відповідні RTL-утиліти до безпечного списку, щоб ваші макети відображалися правильно в RTL-середовищах. Наприклад, ви можете використовувати регулярний вираз, такий як `/^(rtl:|ltr:)/`, щоб додати до безпечного списку всі RTL та LTR утиліти.

Різні сімейства шрифтів

Різні мови вимагають різних сімейств шрифтів для правильного відображення символів. Наприклад, китайська, японська та корейська мови вимагають шрифтів, що підтримують символи CJK. Аналогічно, мови з діакритичними знаками можуть вимагати шрифтів, що включають ці символи.

Якщо ваш застосунок підтримує кілька мов, вам може знадобитися використовувати різні сімейства шрифтів для різних мов. Ви можете використовувати правило `@font-face` в CSS для визначення власних сімейств шрифтів, а потім використовувати Tailwind CSS для їх застосування до конкретних елементів. Переконайтеся, що ви додали імена сімейств шрифтів, які ви використовуєте, до безпечного списку, щоб вони були включені в кінцевий CSS-файл.

Приклад:

/* In your global CSS file */
@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;
}

/* In your tailwind.config.js */
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Noto Sans SC', ...],
      },
    },
  },
  safelist: [
    'font-sans', // ensures font-sans is always included
  ],
};

Культурні відмінності у стилізації

У деяких випадках переваги у стилізації можуть відрізнятися в різних культурах. Наприклад, асоціації кольорів можуть значно відрізнятися від однієї культури до іншої. Аналогічно, використання пробілів та типографіки також може залежати від культурних норм.

Якщо ваш застосунок орієнтований на глобальну аудиторію, пам'ятайте про ці культурні відмінності та адаптуйте свою стилізацію відповідно. Це може включати використання різних CSS-класів для різних локалей або надання користувачам можливості налаштовувати свої стилістичні уподобання.

Висновок

Безпечний список Tailwind CSS — це критична техніка оптимізації для продакшн-середовищ. Явно вказуючи імена класів, які повинні бути включені в кінцевий CSS-файл, ви можете значно зменшити його розмір, що призводить до швидшого завантаження сторінок та покращення продуктивності. Хоча динамічні імена класів створюють проблему, існує кілька стратегій для їх додавання до безпечного списку, від простого явного перерахування до більш складної генерації динамічного безпечного списку. Дотримуючись найкращих практик, викладених у цьому посібнику, ви можете забезпечити, що ваша стратегія безпечного списку Tailwind CSS є ефективною, підтримуваною та адаптованою до унікальних потреб вашого проєкту.

Пам'ятайте про пріоритетність користувацького досвіду та продуктивності у ваших проєктах веброзробки. Безпечний список з Tailwind CSS — це потужний інструмент для досягнення цих цілей.