Lietuvių

Išsamus Tailwind CSS saugaus sąrašo sudarymo vadovas, apimantis dinamiškų klasių pavadinimų generavimą, gamybos optimizavimą ir geriausią praktiką jūsų stilių aprašų apsaugai.

Tailwind CSS Saugaus sąrašo sudarymas: Dinamiškų klasių pavadinimų apsauga gamyboje

Tailwind CSS yra „utility-first“ CSS sistema, kuri suteikia platų iš anksto nustatytų klasių asortimentą jūsų interneto programoms stilizuoti. Nors jos „utility-first“ požiūris siūlo neprilygstamą lankstumą ir greitį kūrimo procese, jis taip pat gali sukelti didelius CSS failus gamyboje, jei nėra tinkamai valdomas. Čia į pagalbą ateina saugaus sąrašo sudarymas (taip pat žinomas kaip baltasis sąrašas). Saugaus sąrašo sudarymas yra procesas, kai aiškiai nurodoma Tailwind CSS, kuriuos klasių pavadinimus ketinate naudoti savo projekte, leidžiant jam atmesti visas kitas nenaudojamas klases kūrimo proceso metu. Tai žymiai sumažina jūsų CSS failo dydį, todėl pagreitėja puslapio įkėlimo laikas ir pagerėja našumas.

Saugaus sąrašo sudarymo poreikio supratimas

Pagal numatytuosius nustatymus Tailwind CSS generuoja tūkstančius CSS klasių. Jei įtrauktumėte visas šias klases į savo gamybos versiją, net jei naudotumėte tik nedidelę jų dalį, jūsų CSS failas būtų be reikalo didelis. Tai paveikia jūsų svetainės našumą keliais būdais:

Saugaus sąrašo sudarymas sprendžia šias problemas selektyviai įtraukdamas tik tas klases, kurias iš tikrųjų naudojate, todėl CSS failas tampa žymiai mažesnis ir efektyvesnis. Šiuolaikinė interneto kūrimo praktika reikalauja lieso ir optimizuoto kodo. Saugaus sąrašo sudarymas su Tailwind CSS yra ne tik geriausia praktika; tai būtinybė norint pateikti našias interneto programas.

Dinamiškų klasių pavadinimų iššūkiai

Nors saugaus sąrašo sudarymas yra labai svarbus, jis kelia iššūkį, kai naudojate dinamiškus klasių pavadinimus. Dinamiški klasių pavadinimai yra tie, kurie generuojami arba modifikuojami vykdymo metu, dažnai remiantis vartotojo įvestimi, duomenimis, gautais iš API, arba sąlygine logika jūsų JavaScript kode. Šias klases sunku numatyti pradiniame Tailwind CSS kūrimo procese, nes įrankiai negali „matyti“, kad klasių prireiks.

Pavyzdžiui, apsvarstykite scenarijų, kai dinamiškai taikote fono spalvas pagal vartotojo nuostatas. Galite turėti spalvų parinkčių rinkinį (pvz., `bg-red-500`, `bg-green-500`, `bg-blue-500`) ir naudoti JavaScript, kad pritaikytumėte atitinkamą klasę pagal vartotojo pasirinkimą. Tokiu atveju Tailwind CSS gali neįtraukti šių klasių į galutinį CSS failą, nebent aiškiai jas įtrauktumėte į saugų sąrašą.

Kitas dažnas pavyzdys yra dinamiškai generuojamas turinys su susijusiais stiliais. Įsivaizduokite, kad kuriate prietaisų skydelį, kuriame rodomi įvairūs valdikliai, kurių kiekvienas turi unikalų stilių, nulemtą jo tipo ar duomenų šaltinio. Konkrečios Tailwind CSS klasės, pritaikytos kiekvienam valdikliui, gali priklausyti nuo rodomų duomenų, todėl sunku jas iš anksto įtraukti į saugų sąrašą. Tai taip pat taikoma komponentų bibliotekoms, kai norite, kad galutinis vartotojas naudotų kai kurias CSS klases.

Dinamiškų klasių pavadinimų saugaus sąrašo sudarymo metodai

Yra keletas strategijų, kaip sudaryti dinamiškų klasių pavadinimų saugų sąrašą Tailwind CSS. Geriausias požiūris priklauso nuo jūsų projekto sudėtingumo ir dinamikos laipsnio.

1. `safelist` parinkties naudojimas faile `tailwind.config.js`

Paprastasis metodas yra naudoti `safelist` parinktį savo `tailwind.config.js` faile. Ši parinktis leidžia aiškiai nurodyti klasių pavadinimus, kurie visada turėtų būti įtraukti į galutinį CSS failą.

/** @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: [],
}

Argumentai „už“:

Argumentai „prieš“:

2. Reguliarių išraiškų naudojimas `safelist`

Sudėtingesniems scenarijams galite naudoti reguliarias išraiškas `safelist` parinktyje. Tai leidžia jums suderinti klasių pavadinimų modelius, o ne aiškiai išvardyti kiekvieną iš jų.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    /^bg-.*-500$/,
    /^text-./, // pavyzdys, kaip suderinti visas teksto klases
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Šiame pavyzdyje reguliari išraiška `/^bg-.*-500$/` atitiks bet kurį klasių pavadinimą, kuris prasideda `bg-`, po kurio seka bet kokie simboliai (`.*`), po to seka `-500`. Tai apims tokias klases kaip `bg-red-500`, `bg-green-500`, `bg-blue-500` ir net `bg-mycustomcolor-500`.

Argumentai „už“:

Argumentai „prieš“:

3. Dinaminio saugaus sąrašo generavimas kūrimo metu

Labai dinamiškiems scenarijams, kai klasių pavadinimai yra tikrai nenuspėjami, galite sugeneruoti dinaminį saugų sąrašą kūrimo proceso metu. Tai apima jūsų kodo analizę, siekiant nustatyti dinamiškus klasių pavadinimus, ir tada įtraukti juos į `safelist` parinktį prieš paleidžiant Tailwind CSS.

Šis požiūris paprastai apima kūrimo scenarijaus (pvz., Node.js scenarijaus) naudojimą, kad:

  1. Išanalizuokite savo JavaScript, TypeScript ar kitus kodo failus.
  2. Nustatykite galimus dinamiškus klasių pavadinimus (pvz., ieškant eilutės interpoliacijos arba sąlyginės logikos, generuojančios klasių pavadinimus).
  3. Sugeneruokite `safelist` masyvą, kuriame būtų nurodyti nustatyti klasių pavadinimai.
  4. Atnaujinkite savo `tailwind.config.js` failą su sugeneruotu `safelist` masyvu.
  5. Paleiskite Tailwind CSS kūrimo procesą.

Tai yra sudėtingiausias požiūris, tačiau jis siūlo didžiausią lankstumą ir tikslumą apdorojant labai dinamiškus klasių pavadinimus. Šiuo tikslu galite naudoti tokius įrankius kaip `esprima` arba `acorn` (JavaScript analizatorius), kad išanalizuotumėte savo kodo bazę. Labai svarbu turėti gerą testavimo aprėptį šiam metodui.

Štai supaprastintas pavyzdys, kaip galite tai įgyvendinti:

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

// Funkcija, skirta išgauti galimas Tailwind klases iš eilutės (labai paprastas pavyzdys)
function extractClasses(content) {
  const classRegex = /(?:class(?:Name)?=["'])([^"]*)(?:["'])/g;  // Patobulinta reguliari išraiška
  let match;
  const classes = new Set();
  while ((match = classRegex.exec(content)) !== null) {
    const classList = match[1].split(/\s+/);
    classList.forEach(cls => {
      // Toliau patikslinkite tai, kad patikrintumėte, ar klasė *atrodo* kaip Tailwind klasė
      if (cls.startsWith('bg-') || cls.startsWith('text-') || cls.startsWith('font-')) {  // Supaprastintas Tailwind klasės patikrinimas
        classes.add(cls);
      }
    });
  }
  return Array.from(classes);
}


const files = glob.sync('./src/**/*.{js,jsx,ts,tsx}'); // Pakoreguokite glob šabloną, kad atitiktų jūsų failus

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

// Perskaitykite Tailwind konfigūraciją
const tailwindConfigPath = './tailwind.config.js';
const tailwindConfig = require(tailwindConfigPath);

// Atnaujinkite saugų sąrašą
tailwindConfig.safelist = tailwindConfig.safelist || []; // Užtikrinkite, kad saugus sąrašas egzistuotų
tailwindConfig.safelist = tailwindConfig.safelist.concat(uniqueClasses);

// Įrašykite atnaujintą konfigūraciją atgal į failą
fs.writeFileSync(tailwindConfigPath, `module.exports = ${JSON.stringify(tailwindConfig, null, 2)}`);

console.log('Tailwind konfigūracijos saugus sąrašas sėkmingai atnaujintas!');

Ir pakeiskite savo `package.json`, kad paleistumėte tai prieš kūrimo etapą:

{"scripts": {
  "build": "node build-safelist.js && next build",  // Arba jūsų kūrimo komanda
  ...
}}

Svarbūs aspektai atliekant kodo analizę:

Argumentai „už“:

Argumentai „prieš“:

4. Integruotų stilių naudojimas kaip paskutinė išeitis (paprastai nerekomenduojama)

Jei turite itin dinamiškų stilių, kurių negalima lengvai įtraukti į saugų sąrašą naudojant bet kurį iš aukščiau nurodytų metodų, galite apsvarstyti galimybę naudoti integruotus stilius kaip paskutinę išeitį. Tačiau šis požiūris paprastai nerekomenduojamas, nes jis paneigia tokios CSS sistemos kaip Tailwind CSS naudojimo tikslą.

Integruoti stiliai taikomi tiesiogiai HTML elementams, o ne apibrėžiami CSS faile. Tai gali sukelti keletą problemų:

Jei turite naudoti integruotus stilius, pabandykite apriboti jų naudojimą tik pačiais dinamiškiausiais ir nenuspėjamiausiais stiliais. Apsvarstykite galimybę naudoti JavaScript bibliotekas, kurios gali padėti efektyviau valdyti integruotus stilius, pvz., React `style` prop arba Vue.js `:style` susiejimą.

Pavyzdys (React):

function MyComponent({ backgroundColor }) {
  return (
    
{/* ... */}
); }

Geriausia Tailwind CSS saugaus sąrašo sudarymo praktika

Norėdami užtikrinti, kad jūsų Tailwind CSS saugaus sąrašo sudarymo strategija būtų veiksminga ir prižiūrima, laikykitės šių geriausių praktikų:

Pavyzdiniai scenarijai su tarptautinėmis pasekmėmis

Saugus sąrašas tampa dar svarbesnis atsižvelgiant į programas su internacionalizavimo (i18n) ir lokalizavimo (l10n) funkcijomis.

Kalbos iš dešinės į kairę (RTL)

Kalbomis, tokiomis kaip arabų, hebrajų ir persų, tekstas teka iš dešinės į kairę. Tailwind CSS suteikia priemones RTL išdėstymams valdyti, tokias kaip `rtl:text-right` ir `ltr:text-left`. Tačiau šios priemonės įtraukiamos į galutinį CSS failą tik tuo atveju, jei jos aiškiai įtrauktos į saugų sąrašą arba jei jos aptinkamos jūsų šaltinio kode.

Jei jūsų programa palaiko RTL kalbas, įsitikinkite, kad įtraukėte atitinkamas RTL priemones į saugų sąrašą, kad jūsų išdėstymai būtų rodomi teisingai RTL aplinkose. Pavyzdžiui, galite naudoti reguliarią išraišką, pvz., `/^(rtl:|ltr:)/`, kad įtrauktumėte visas RTL ir LTR priemones į saugų sąrašą.

Skirtingos šriftų šeimos

Skirtingoms kalboms reikia skirtingų šriftų šeimų, kad simboliai būtų rodomi teisingai. Pavyzdžiui, kinų, japonų ir korėjiečių kalboms reikia šriftų, kurie palaiko CJK simbolius. Panašiai, kalboms su kirčiuotais simboliais gali prireikti šriftų, kuriuose yra tie simboliai.

Jei jūsų programa palaiko kelias kalbas, jums gali reikėti naudoti skirtingas šriftų šeimas skirtingoms kalboms. Galite naudoti `@font-face` taisyklę CSS, kad apibrėžtumėte pasirinktines šriftų šeimas, o tada naudoti Tailwind CSS, kad pritaikytumėte jas konkretiems elementams. Įsitikinkite, kad įtraukėte šriftų šeimų pavadinimus, kuriuos naudojate savo CSS, į saugų sąrašą, kad jie būtų įtraukti į galutinį CSS failą.

Pavyzdys:

/* Jūsų globaliame CSS faile */
@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;
}

/* Jūsų tailwind.config.js */
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Noto Sans SC', ...],
      },
    },
  },
  safelist: [
    'font-sans', // užtikrina, kad font-sans visada būtų įtrauktas
  ],
};

Kultūriniai stiliaus skirtumai

Kai kuriais atvejais stiliaus nuostatos gali skirtis priklausomai nuo kultūros. Pavyzdžiui, spalvų asociacijos gali labai skirtis nuo vienos kultūros prie kitos. Panašiai, kultūrinės normos taip pat gali paveikti tarpo ir tipografijos naudojimą.

Jei jūsų programa skirta pasaulinei auditorijai, atsižvelkite į šiuos kultūrinius skirtumus ir atitinkamai pritaikykite savo stilių. Tai gali apimti skirtingų CSS klasių naudojimą skirtingoms lokalėms arba leisti vartotojams tinkinti savo stiliaus nuostatas.

Išvada

Tailwind CSS saugaus sąrašo sudarymas yra labai svarbi gamybos aplinkos optimizavimo technika. Aiškiai nurodydami klasių pavadinimus, kurie turėtų būti įtraukti į galutinį CSS failą, galite žymiai sumažinti jo dydį, todėl pagreitės puslapio įkėlimo laikas ir pagerės našumas. Nors dinamiški klasių pavadinimai kelia iššūkį, yra keletas strategijų, kaip juos įtraukti į saugų sąrašą, pradedant nuo paprastų aiškių sąrašų ir baigiant sudėtingesniu dinaminiu saugių sąrašų generavimu. Laikydamiesi šiame vadove aprašytos geriausios praktikos, galite užtikrinti, kad jūsų Tailwind CSS saugaus sąrašo sudarymo strategija būtų veiksminga, prižiūrima ir pritaikoma prie unikalių jūsų projekto poreikių.

Nepamirškite teikti pirmenybę vartotojo patirčiai ir našumui savo interneto kūrimo projektuose. Saugaus sąrašo sudarymas su Tailwind CSS yra galingas įrankis šiems tikslams pasiekti.