Tailwind CSS

いろいろなCSSネーミング法があるのがわかりませんが、最近、BEMネーミングを知ってから、どのような異なるCSSスタイルがあるのか気になります.
HTML、CSS、Vanilla JavaScriptでさまざまな試行を試みる場合、明確なクラス名を作成するのは負担になります.そのため、他のCSSライブラリやスタイルに興味があり、CSSをより簡単に使えるものを探していたとき、以前の名前だけを聞いて、最近とても人気のあるTailwind CSSを使ってみました.
Tailwind CSSの使い方について、どのようなメリットとデメリットがあるのか、インターネットを通じて関連コンテンツを検索しました.

📌 Tailwind CSSとは?

tailwindCSS公式ホームページ 🔗 ショートカット👈
A utility-first CSS framework packed with classes like flex, pt-4, text-center  and rotate-90 that can be composed to build any design, directly in your markup.
公式サイトに入るとすぐに出てくるTailwindCSSの説明です.説明のutility-first CSSは、あらかじめ定義されたCSS特性をclass形式でロードして適用する方法です.

<div class="text-slate-700 dark:text-slate-500">
    Staff Engineer, Algolia
</div>

最初はとても不便でしたが、最近何度かBootstrapを使ったことがあるので、この方法はもうよく知っているようです.

📌 Tailwind CSSの利点

✏️ Utility-First CSS

公式サイトで述べたように、実用CSSの最大の利点は、クラス名でstyleを設定できることです.CSSコードを複雑に実装する必要がなくても、Tailwind CSS公式ホームページから提供される各種docsなどでUIを容易に実現できる.

<div class="btn bg-secondary-100 text-secondary-200 hover:shadow-inner transform hover:scale-125 hover:bg-opacity-50 transotion ease-out duration-300">
    Load more
</div>

classでHTMLにスタイルを適用できるので、HTMLとCSSファイルを個別に管理する必要はありません.
そして、自分で悩んでいるTAGのランク名の苦労を減らすことが大きなメリットだと思います.最近BEMについて学習し,それに基づいてクラス名を付けたが,適用されない点もあり,クラス名の明確性を付与することはかなり困難である.ただし、Tailwind CSSはほとんどのクラス名を提供しています. クラス名はもう考えなくてもいいです.

カスタマイズが容易

必要な色や機能がなくても、必要なクラスを簡単にカスタマイズできます.

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: "#FF6363",
        secondary: {
          100: "#E2E2D5",
          200: "#888883",
        },
      },
      fontFamily: {
        body: ["Montserrat"],
      },
    },
  },
  plugins: [],
};

✏️ Tailwind CSS IntelliSense

Tailwind CSS IntelliSense for VS code
Tailwind CSSはTailwind CSSインテリジェントサービスプラグインを提供しています.したがって、すべてのスタイルクラスを暗記する必要はなく、簡単なキーワードを入力するだけで、必要なプロパティを簡単に見つけることができます.
これによって プレビュー、自動補完、印刷など 支援する.
TailwindCSSが提供する基本機能に加えて、以前にカスタムで作成したクラスでも検索可能な機能が提供されています.

▼▼▼スタイルを再利用

異なるクラスを使用すると、設計された要素を組み合わせて、クラスを容易に再利用できます.
@applyでスタイルをコンポーネント化し、このクラスを使用してスタイルを再使用します.

.card{
  @apply bg-white rounded overflow-hidden shadow-md relative hover:shadow-lg;
}

📌 TailwindCSSの欠点

✏️ Learning Curve

TailwindCSSは学習しやすいCSSフレームワークであると考えられているが、基本的に提供される機能に対して使用しなければならないため、学習曲線は非常に低いフレームワークではない.欠点は、フォントや色などすべての目的の機能を提供できないことです.そのため、どの機能があるのか、どの機能がないのかを確認する必要があります.
逆に、デフォルトで提供されているクラスを暗記しないと、毎回確認が必要な問題が発生します.

▼▼見苦しいコード

欠点は、すべてのCSS属性がクラスによって解決されるため、コードが非常に見苦しいことです.

span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">204</span>

各クラスには属性が含まれているため、上記のように多くのクラスを貼り付ける必要があります.コードに直感性が付与されているが,可読性が悪いという問題がある.

▼▼興味のあることは離れない

基本的には、htmlとcssファイルを分けて興味のある内容を分離するために、多くの仕事をしています.しかし、Tailwind CSSは注目点を分離するのではなく、1つのhtmlファイルで実現できるので、html自体には多くの機能が含まれています.

📌 TailwindCSSの起動

Install Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init

Configure your template paths

tailwind.config.npx tailwind init--fullコマンドjsのすべての情報を理解

-fullを付けない場合、tailwindCSSの情報以外の基本スケルトンのみが表示されます.

tailwind.config.js

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

contentでは、プライマリcssファイルの場所情報とCSSを使用するファイルを指定します.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

src/input.css(tailwindをロードするコードを入力)

@tailwind base;
@tailwind components;
@tailwind utilities;

Start the Tailwind CLI build process

次のコマンドでtailwindcssを構築します.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

パッケージは以下の通りです.jsonファイルを入力すると、npm run build-cssが自動的に生成されます.

-watchモジュール変更時に

を自動的にコンパイル

"scripts": {
		"build-css": "tailwindcss build -i src/styles.css -o public/styles.css --watch"
  },

Installation: Tailwind CLI - Tailwind CSS

📌 機能

その後作成されたコードはすべてTailwind CSS公式ホームページとyoutubeで参照されたコードで、ホームページにはこれらの機能が詳しく紹介され、使用方法が書かれているので、すべての機能は紹介されません.
試してみたいなら、必ず公式文書を参考にしてください.

✏️ customizing

tailwind.config.jsでは、以下に示すように、カスタマイズしたいクラスを作成できます.

fontSize: {
			mammoth: ["10rem", { lineHeight: "1" }],  // <= 만들고 싶은 새로운 class
      xs: ["0.75rem", { lineHeight: "1rem" }],
      sm: ["0.875rem", { lineHeight: "1.25rem" }],
      base: ["1rem", { lineHeight: "1.5rem" }],
      lg: ["1.125rem", { lineHeight: "1.75rem" }],
      xl: ["1.25rem", { lineHeight: "1.75rem" }],
      "2xl": ["1.5rem", { lineHeight: "2rem" }],
      "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
      "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
      "5xl": ["3rem", { lineHeight: "1" }],
      "6xl": ["3.75rem", { lineHeight: "1" }],
      "7xl": ["4.5rem", { lineHeight: "1" }],
      "8xl": ["6rem", { lineHeight: "1" }],
      "9xl": ["8rem", { lineHeight: "1" }],
    },

その後、npm run build-cssコマンドで変更を生成します.
前述したように、ファイル構成を変更し、すべての値を変更し、新しい値を追加できます.
この場合、設計は変更されますが、実際に変更した値と追加した新しい値を特定するのは難しいため、デフォルトの構成で値を変更することは推奨されません.
したがって、fullではなく新しいファイルを作成することをお勧めします.
コア値を変更しない場合、追加された付加価値の確認が容易になるためです.
したがって、受信した完全なファイルの名前を(ex,tailwind-default.config.js)に変更し、新しい空のファイルを生成します.
tailwind.config.js

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: '#FF6363',
        secondary: {
          100: '#E2E2D5',
          200: '#888883',
        }

      }
    },
  },
  plugins: [],
};

✏️ フォントのカスタマイズ

Googleなどからsrc/stylesをimport形式でインポートします.cssに貼り付けます.

@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>');
@tailwind base;
@tailwind components;
@tailwind utilities;

その後、tailwindconfigfileでフォントを参照できます.

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: "#FF6363",
        secondary: {
          100: "#E2E2D5",
          200: "#888883",
        },
      },
      fontFamily: {
        body: ["Montserrat"],
      },
    },
  },
  plugins: [],
};

✏️ Customizing Screens

Customizing Screens - Tailwind CSS
responsive classes

✏️ Commonコンポーネントの作成

同じクラスを繰り返すとめちゃくちゃになり、@applyで解決できます.
src/style.cssに移動
構成部品の作成

.card {
  @apply bg-white rounded overflow-hidden drop-shadow-lg relative
}

既存のクラス名をインポートすると、その要素に作成した名前が付けられます.
j@applyで共通属性を作成する場合は、共通の性質を持つ属性を限定し、個別の要素を直接クラスに書き込むことが望ましい.

✏️ Gridの使い方

<div class="grid lg:grid-cols-3">
</div>

に示すようにgridを使用できます.

✏️ サスペンションの使用

hover:shadow-inner

<div class="btn bg-secondary-100 text-secondary-200 hover:shadow-inner">
	Load more
</div>

に示すように、クラス名に使用します.

ポスト

この感動的な先端時代に、私たちは初めてTailwindCSSに接触し、それが現在人気のあるCSSフレームワークの代表であるかどうかを探しました.ある意味では、このフレームワークを使うことで注目されていることを実感することができます.コードが醜くなるという致命的な欠点があるが,これらの欠点を顧みず,クラス名によって様々なCSS要素の機能を容易に実現できることが大きな利点であると考えられる.
正式なプロジェクトに入ると、TailwindCSSに基づいてUI要素を装飾したいと思います.新しい機能がわかったら、もう1つ文章を書いて後記を残します.

リファレンス

https://tailwindcss.com/
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com
https://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw&index=2/
https://heroicons.com/