Tailwind CSS - בויען מאָדערן וועבסיטעס שנעל אָן פאַרלאָזן דיין HTML

שאַפֿן קאָמפּלעקס דיזיינז מיט יז

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

בויען עפּעס

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

איר זענט בלויז לימיטעד דורך דיין פאַנטאַזיע. דער הויפּט חילוק פון ניצן Vanilla CSS איז די גיכקייַט אין וואָס איר קענען בויען מנהג דיזיינז.

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

בעסטער פּראַקטיסיז טאָן ניט טאַקע אַרבעט

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

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

די מערסט פאָלקס קאָמפּאָנענט ביבליאָטעק פֿאַר Tailwind CSS

daisyUI איז די מערסט פאָלקס קאָמפּאָנענט ביבליאָטעק פֿאַר Tailwind CSS, מיט איבער 50 פאַר-דיזיינד קאַמפּאָונאַנץ, 500+ נוצן קלאסן און כמעט סאָף פּאַסאַבילאַטיז. עס סאַוועס איר פון ריינווענטינג די ראָד יעדער מאָל איר מאַכן אַ נייַע פּרויעקט.

דו זאלסט נישט שייַעך-ינווענט די ראָד יעדער מאָל

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

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

Tailwind CSS - א יוטיליטי ערשטער CSS Framework

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

ניצן סעמאַנטיק קלאַס נעמען

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

ריין CSS. פראַמעוואָרק אַגנאָסטיק. אַרבעט אומעטום

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

Benefits פון Tailwind CSS

די בענעפיץ פון ניצן Tailwind CSS אַרייַננעמען געוואקסן פּראָודאַקטיוויטי, רידוסט CSS טעקע גרייס און אַ ימפּרוווד דעוועלאָפּער דערפאַרונג רעכט צו דער ערשטער נוצן. אַדדיטיאָנאַללי, די Just-In-Time (JIT) מאָדע גיט בליץ-שנעל בויען צייט, און פאַרגיכערן דיין אַנטוויקלונג פּראָצעס נאָך.

טאַילווינד CSS פּרייסינג

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

עס ס מיינונג און פלעקסאַבאַל אין דער זעלביקער צייט

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

מאָדערן פֿעיִקייטן

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

פּרירעקוואַזאַץ פֿאַר ניצן Tailwind CSS

איידער איר אָנהייבן ניצן Tailwind CSS, איר דאַרפֿן אַ יקערדיק פארשטאנד פון HTML און CSS.

ווען צו נוצן Tailwind CSS

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

ניט אין קאָמפּאָנענט פראַמעוואָרקס?

אויב איר זענט נישט אַ פאָכער פון קאָמפּאָנענט פראַמעוואָרקס ווי React אָדער Vue, קיין זאָרג. Tailwind CSS איז פריימווערק-אַגנאָסטיק און קענען זיין געוויינט מיט ריין HTML און דזשאַוואַסקריפּט.

סימאַלעראַטיז און דיפפערענסעס צווישן Tailwind קסס און אנדערע קסס פראַמעוואָרקס

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

טונקל מאָדע

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

פלעקסבאָקס בייַשפּיל

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

מיט די קאָמבינאַציע פון ​​​​Just-in-Time, איר קענען לייכט פּרובירן פאַרשידענע נוצן קלאַס וואַלועס. אויב איין נוצן קלאַס האט נישט אַרבעטן, פשוט טוישן עס צו קאַסטאַמייז דיין עלעמענט.

א ביישפּיל פון פלעקסבאָקס אויסלייג

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

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"></path></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Home</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">About</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Contact</a>
    </div>
  </div>
</nav>

גרייט-געמאכט קאַמפּאָונאַנץ

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

ווי צו גער CSS צו Tailwind CSS

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

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

ונטערטוקנ זיך טיף אין Tailwind קסס פילאָסאָפיע

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

פארוואס מאַך אַוועק פון טראַדיציאָנעל CSS?

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

דערפאַרונג די מאַכט פון וטיליטי קלאסן

יוטיליטי קלאסן העלפֿן איר צו ויסמיידן ריפּיטינג די זעלבע סטיילז איבער דיין סטיילז. עס איז אַ פּרינציפּ פון "דו זאלסט נישט איבערחזרן זיך" (טרוקן). די קלאסן שפּאָרן איר באַטייטיק צייט און מי און פירן צו אַ העכסט מאַינטאַבאַל קאָדעבאַסע.

ויספאָרשן Tailwind קסס דירעקטיווז

Tailwind CSS ינטראַדוסיז עטלעכע דיירעקטיווז וואָס קענען זיין געוויינט אין דיין סטיילז. די אַרייַננעמען @apply, @variants און @screen. פארשטאנד און ניצן די דיירעקטיווז קענען שטארק פֿאַרבעסערן דיין טאַילווינד CSS דערפאַרונג. די קענען זיין געשטעלט אין די Tailwind Config CSS טעקע. איר קענען שרייַבן css קלאסן ניצן דעם צוגאַנג.

פאַרברייטערן Tailwind CSS מיט פּלוגינס

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

ינקאָרפּערייט Tailwind CSS אין דיין וואָרקפלאָוו

ינטאַגרייטינג טאַילווינד CSS אין דיין אַנטוויקלונג וואָרקפלאָוו איז פּשוט, צי איר נוצן בויען מכשירים ווי וועבפּאַקק אָדער פּאַרסעל, אָדער ארבעטן מיט פראַמעוואָרקס ווי Next.js אָדער Gatsby.

פֿאַרבעסערן אַקסעסאַביליטי מיט Tailwind CSS

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

כאַרניס די מאַכט פון פלעקסבאָקס און גריד מיט טאַילווינד CSS

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

ווי צו דעבאַג דיין טאַילווינד CSS פּראַדזשעקס

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

שאַפֿן אַ פאַרביק וועב מיט Tailwind CSS

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

אַנטוויקלען פאַסטער מיט Tailwind CSS 'JIT מאָדע

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

פֿון נול צו העלד: Master Tailwind CSS

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

קאַסטאַמייז Tailwind CSS צו דיין באדערפענישן

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

באַקומען האַנט-אויף מיט Tailwind CSS

אָנטייל נעמען אין פּראַקטיש לערנען דורך אַ סעריע פון ​​פּראַקטיש ביישפילן. ויספאָרשן ווי צו בויען אַ פאַרשיידנקייַט פון וועב קאַמפּאָונאַנץ ניצן Tailwind CSS און DaisyUI.

מיגרייטינג פון אנדערע קסס פראַמעוואָרקס צו Tailwind קסס

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

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

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

א פּשוט בייַשפּיל: בויען אַ אָפּרופיק קאָרט קאָמפּאָנענט

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

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Your Product</div>
      <p class="mt-2 text-gray-500">This is a brief description of your product. The card uses utility classes for padding, text color, and the uppercase font styling.</p>
    </div>
  </div>
</div>

בויען אַ פאָרעם מיט טאַילווינד CSS

שאַפֿן אַ פאָרעם מיט Tailwind CSS איז פּשוט און ינטואַטיוו. דאָ ס אַ פּשוט קאָנטאַקט פאָרעם:

<div class="w-full max-w-xs">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
    </div>
  </form>
</div>

קאַסטאַמייזינג Tailwind קסס

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

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

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
        'custom-green': '#387c6d',
      }
    }
  }
}

וועט איך דאַרפֿן קיין CSS טעקע?

דער בלויז טעקע איר דאַרפֿן מיט Tailwind CSS איז די tailwind.config.js טעקע.

דער טעקע וועט האַלטן דיין קאַנפיגיעריישאַן סעטטינגס. איר וועט נישט שרייַבן css אָדער האָבן קיין אנדערע css טעקע. די קאַנפיגיעריישאַן טעקע איז דער בלויז איינער איר וועט דאַרפֿן.

וואָס זענען די בעסטער פּראַקטיסיז פֿאַר Tailwind CSS?

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

Tailwind CSS: די צוקונפֿט פון וועב דיזיין

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