Egyéni osztályok (haladó)

A Remake osztályokként tárolja a stílusokat. A panel megírja őket helyetted, de az osztálylistát közvetlenül is szerkesztheted.

Hova kerüljön az osztály

Egy blokk vagy az oldal

1. Jelöld ki a blokkot.

2. Nyisd meg az Áttekintés fület az eszköztárban.

3. Keresd meg a blokkot a listában.

4. Nyisd meg a sorában a hárompontos menüt, és válaszd az Osztályok kézi szerkesztése lehetőséget.

5. Add hozzá az osztályaidat az Osztálylista mezőhöz szóközzel elválasztva.

6. Válaszd a Módosítások mentése lehetőséget.

A lista tartalmazhat Remake-jelölőket is, például x-btn:primary. Ezek nem Tailwind osztályok. Így alkalmaz a Remake egy alapstílust vagy változatot. Hagyd őket a helyükön, hacsak nem akarod eltávolítani az adott stílust.

Az Oldal bejegyzés az oldal törzsét szerkeszti. Ez hasznos egy oldalszintű háttérhez, vagy az overflow-x-hidden esetében, amikor egy díszítőelem oldalirányú görgetést okoz.

Egy szövegrész

A soron belüli formázással ellátott szöveg Formázott szöveg bejegyzésként jelenik meg az Áttekintés fülön. Az osztálylistáját ugyanúgy szerkesztheted.

Elemek egész csoportja

Nyisd meg a Stíluskezelőt, keresd meg az alapstílust vagy változatot, nyisd meg a műveletmenüjét, és válaszd az Osztályok szerkesztése lehetőséget.

Ez minden elemet megváltoztat, amelyik azt a stílust használja. Ha például hozzáadod a tracking-tight osztályt a címsor alapstílusához, minden címsor szorosabban szedődik a webhelyen.

Az alapstílus módosításai azonnal megjelennek a szerkesztőben, és a következő publikálással kerülnek élesbe. A blokk- és komponensosztályok az oldallal vagy a komponenssel együtt kerülnek publikálásra.

Egy komponens

Az komponenspéldány osztálylistájának szerkesztése az komponens közös gyökerét szerkeszti. A változás minden szinkronizált példányhoz eljut.

Szintaxis

Használj normál Tailwind-stílusú segédosztályneveket szóközzel elválasztva:

Gyakori minták:

A legtöbb Tailwind segédosztály, variáns és tetszőleges érték működik. A Remake nem egy teljes Tailwind-projekt, így előfordulhat, hogy egy osztály, ami a saját kódbázisod egyedi konfigurációjára vagy pluginjára épül, nem létezik.

A csupasz max-w-* helyett inkább a w-* max-w-full párost használd. A Méret vezérlő a w-* osztályt olvassa és írja, így egy csak maximális szélességgel rendelkező blokk úgy tűnik, mintha ott nem lenne szélessége.

Képernyőméret-előtagok

Az eszközmenü a max-lg:, max-md: és max-sm: előtagokat írja. Ezek a Tablet, a mobil fekvő és a mobil álló módnak felelnek meg.

Egy osztálylistában ugyanezeket az előtagokat használd, hogy összhangban maradj a szerkesztő többi részével:

Ez 4 egység belső margót ad asztali gépen, 3-at tableten és azon lefelé, 2-t a legkisebb telefonokon. Ugyanazt a felülről lefelé haladó sorrendet követi, mint az eszközmenü.

A normál sm:, md: és lg: előtagok is működnek, de ezek azt jelentik, hogy „ettől a szélességtől felfelé”. Ez a mobile-first irány. Kerüld a két stílus keverését ugyanazon a tulajdonságon, hacsak nincs rá okod.

Ütközések és felülírások

Amikor két egyszerű segédosztály ugyanazt a tulajdonságot állítja, a listában későbbi nyer. Például:

ebből p-8 lesz.

Ha felül akarsz írni egy értéket, amit az eszköztár állít be, tedd az új osztályt a lista végére. Ha egy alapstílust vagy változatot akarsz felülírni, tedd az osztályt a stílusjelölő után, és ellenőrizd az eredményt. A jelölők nem hétköznapi segédosztályok, így ott még inkább számít a sorrend.

Lehet, hogy az eszköztár nem ismer fel egy egyedi osztályt. Egy belső margó vezérlő üresnek tűnhet, pedig a p-[18px] érvényben van. A módosításhoz szerkeszd újra az osztálylistát.

Osztály eltávolítása

Töröld az osztályt a listából, és ments.

Ha az osztály egy alapstílusból vagy változatból jön, ott távolítsd el, vagy írd felül a blokk listájában. A stílusjelölő törlése az egész stílust eltávolítja, nem csak egy tulajdonságot.

Nincs blokkonkénti CSS-szerkesztő. Ha valódi CSS-szabályra van szükséged a segédosztályok helyett, hozzáadhatsz egy <style> blokkot a projekt egyedi head kódjában, a Projektbeállítások alatt. Az az egész webhelyre érvényes, szóval csak mértékkel használd.

Mi sülhet el

• A hidden minden képernyőn elrejti az elemet.

• A fixed és az absolute képes tönkretenni egy elrendezést, főleg mobilon.

• Az overflow-hidden levághat menüket vagy árnyékokat.

• Egy másik projektből másolt osztály olyan színre vagy pluginra támaszkodhat, ami itt nem létezik.

• Egy osztály, ami a szerkesztőben jól néz ki, a publikált webhelyen másképp viselkedhet, ha olyan tartalomra épül, ami ott nincs.

Nézd meg az oldalt tableten és mobilon, publikáld, és nézd meg az élő oldalt is, mielőtt egy egyedi osztályra hagyatkozol.

Egy egyszerű kezdő recept

1. Jelölj ki egy kártyát.

2. Nyisd meg az Áttekintés fület, keresd meg a kártyát, és válaszd az Osztályok kézi szerkesztése lehetőséget.

3. Add hozzá ezt: bg-[#f5efe6] p-8 rounded-3xl.

4. Ments, és nézd meg a kártyát mobilon.

5. Ha ott túl nagy a belső margó, tedd a végére a max-sm:p-5 osztályt.

6. Publikáld.

A közös stílusokról a Stíluskezelő, az eszközsorrendről a Reszponzív dizájn fejezetben olvashatsz.