Tailwind בעסטער פּראַקטיסיז - די לעצט גייד פֿאַר טאַילווינד קסס

ווען עס קומט צו ימפּלאַמענינג נוצן-ערשטער CSS, Tailwind CSS איז געווארן אַ גוט לייזונג פֿאַר פילע דעוועלאָפּערס.

די בייגיקייט, פּראָודאַקטיוויטי און יז פון נוצן עס אָפפערס האָבן פּראָווען ינוואַליאַבאַל אין מאָדערן וועב אַנטוויקלונג.

אָבער, ווי קיין געצייַג, צו באַקומען די מערסט פון עס, עס איז קריטיש צו פֿאַרשטיין און צולייגן די בעסטער פּראַקטיסיז פון Tailwind CSS.

זאל ס ונטערטוקנ זיך אין עטלעכע פון די טעקניקס.

1. נוצן-ערשטער פונדאַמענטאַלס

די נוצן-ערשטער פילאָסאָפיע איז די האַרץ פּרינציפּ פון Tailwind CSS, מיט אַ ציל צו ימפּאַוער דעוועלאָפּערס מיט נידעריק-מדרגה נוצן קלאסן אַנשטאָט פון פאַר-דיזיינד קאַמפּאָונאַנץ. דער צוגאַנג קען טכילעס ויסקומען דאָנטינג רעכט צו דער ווערבאָוסיטי פון דיין HTML; אָבער, אַמאָל פארשטאנען, עס ינייבאַלז גיך פּראָוטאַטייפּ און פּראָדוקציע-מדרגה קוסטאָמיזאַטיאָן.

אין אַ נוצן-ערשטער אַרקאַטעקטשער, יעדער קלאַס קאָראַספּאַנדז צו אַ ספּעציפיש סטיל אַטריביוט. פֿאַר בייַשפּיל, די טעקסט-צענטער קלאַס וועט ייַנרייען דיין טעקסט צו די צענטער, בשעת bg-blue-500 וועט געבן דיין עלעמענט אַ ספּעציפיש שאָטן פון בלוי הינטערגרונט.

דער צוגאַנג פּראַמאָוץ קאָמפּאָנענט ריוזאַביליטי און ראַדוסאַז די סומע פון CSS איר שרייַבן, ילימאַנייטינג פּראָסט ישוז ווי ספּעציפֿיש מלחמות און טויט קאָד ילימאַניישאַן.

2. אָפּרופיק פּלאַן

טאַילווינד CSS אויך יקסעלז אין אָפּרופיק פּלאַן. עס ניצט אַ רירעוודיק-ערשטער ברייקפּוינט סיסטעם, טייַטש סטיילז געווענדט צו קלענערער סקרינז קענען לייכט קאַסקייד צו גרעסערע. איר קענען טאָן דאָס מיט פּשוט פּרעפיקסיז ווי sm:, md:, lg: און xl: איידער דיין נוצן קלאסן.

צום ביישפּיל, md:text-center וועט בלויז צולייגן דעם טעקסט-צענטער קלאַס אויף מיטל און גרעסערע סקרינז. דאָס אַלאַוז איר צו פּלאַן ינטואַטיוולי פֿאַר פאַרשידענע פאַרשטעלן סיזעס, וואָס מאכט אָפּרופיק פּלאַן אַ ווינטל מיט טאַילווינד.

3. ריוזינג סטיילז

בשעת נוצן-ערשטער ינקעראַדזשאַז אַפּלייינג סטיילז גלייַך צו דיין HTML, ריפּיטינג קאָמפּלעקס קאַמבאַניישאַנז פון יוטילאַטיז קענען ווערן קאַמבערסאַם. דאָ, Tailwind's @apply דירעקטיוו ווערט אַ לייפסייווער, אַלאַוינג איר צו עקסטראַקט ריפּיטיד סטיילז אין מנהג CSS קלאסן.

פֿאַר בייַשפּיל, אויב איר אָפט נוצן די קאָמבינאַציע פון bg-red-500 טעקסט-ווייַס פּ-6, איר קענען מאַכן אַ נייַע קלאַס ווי .טעות און נוצן @אַפּפּלי צו רייוס די סטיילז. דעם ימפּרוווז קאָד רידאַביליטי און מאַינטאַיאַביליטי.

4. אַדינג מנהג סטילעס

כאָטש Tailwind CSS קומט מיט אַ ברייט קייט פון נוצן קלאסן, איר קען דאַרפֿן מנהג סטיילז פֿאַר ספּעציפיש באדערפענישן. טאַילווינד אָפפערס ברייט קוסטאָמיזאַטיאָן אָפּציעס דורך זייַן קאַנפיגיעריישאַן טעקע, tailwind.config.js.

איר קענען פאַרברייטערן די פעליקייַט קאַנפיגיעריישאַן, קריייטינג מנהג פארבן, ברעאַקפּאָינץ, פאַנץ, און מער. עס איז וויכטיק, אָבער, צו נוצן דעם שטריך ספּערינגלי צו פאַרמייַדן בלאָוטינג דיין קאַנפיגיעריישאַן טעקע.

5. פאַנגקשאַנז & דיירעקטיווז

Tailwind CSS גיט עטלעכע פאַנגקשאַנז און דיירעקטיווז צו מאַכן דיין אַנטוויקלונג דערפאַרונג סמודער. פֿאַר בייַשפּיל, די טעמע () פֿונקציע אַלאַוז איר צו אַקסעס דיין קאַנפיגיעריישאַן וואַלועס גלייַך אין דיין CSS, און פאַסילאַטייט דינאַמיש סטילינג.

דערצו, די דיירעקטיווז פון Tailwind, ווי @responsive, @variants, און @apply, לאָזן איר צו דזשענערייט ריספּאַנסיוו, שטאַט וועריאַנץ און עקסטראַקט ריפּיטיד סטיילז ריספּעקטיוולי. ניצן די פאַנגקשאַנז און דיירעקטיווז אַפּראָופּרייטלי וועט פאַרגיכערן דיין אַנטוויקלונג פּראָצעס און האַלטן דיין קאָדעבאַסע אָרגאַניזירט.

6. האַנדלינג האָווער, פאָקוס, און אנדערע שטאַטן

אן אנדער געגנט ווו טאַילווינד CSS שיינט איז האַנדלינג פאַרשידענע עלעמענט שטאַטן. אַפּלייינג סטיילז אויף האָווער, פאָקוס, אַקטיוו און אנדערע שטאַטן איז ווי פּשוט ווי פּרעפיקסינג די נוצן קלאַס מיט די שטאַט נאָמען.

פֿאַר בייַשפּיל, האָווער:bg-blue-500 וועט צולייגן די bg-blue-500 קלאַס ווען דער עלעמענט איז כאַווערד איבער. די פּרעפיקסעס פאָרשלאָגן אַ הויך מדרגה פון קאָנטראָל איבער ווי עלעמענטן ביכייוו אין פאַרשידענע שטאַטן, ימפּרוווינג די באַניצער דערפאַרונג פון דיין פּלאַץ.

אין מסקנא, מאַסטערינג די טאַילווינד CSS בעסטער פּראַקטיסיז קענען דראַסטיקלי פאַרבעסערן דיין וועב אַנטוויקלונג פּראָצעס. א נוצן-ערשטער צוגאַנג, קאַמביינד מיט עפעקטיוו רייוס פון סטיילז, קוסטאָמיזאַטיאָנס און געזונט-האַנד

פֿאַרבעסערן דיין טאַילווינד קסס וואָרקפלאָוו מיט DivMagic

אויב איר זוכט צו פֿאַרבעסערן דיין Tailwind CSS וואָרקפלאָוו, טשעק DivMagic, אַ בלעטערער פאַרלענגערונג וואָס אַלאַוז איר צו נאָכמאַכן און גער Tailwind CSS קלאסן גלייַך פֿון דיין בלעטערער און עס אַרבעט אויף קיין וועבזייטל.

Chrome:ינסטאַלירן פֿאַר קראָום

Firefox:ינסטאַלירן פֿאַר פירעפאָקס

האָט איר באַמערקונגען אָדער אַן אַרויסגעבן? לאָזן אונדז וויסן דורך אונדזער פּלאַטפאָרמע, און מיר וועלן שעפּן די מנוחה!