2021年になりましたが、まだTailwindCSSを試していないのですか？

TailwindCSSは、スタイルを素早く記述するための CSS フレームワークです。

公式ウェブサイトの紹介を初めて見たとき、これは以前の Bootstrap などと同じように多くのスタイルを含んだスタイルシートではないかと思いました。それは多くのスタイルを持っており、それを使用するだけで済むのです。

しかし、TailwindCSS はそれだけではありません。TailwindCSS は多くのスタイルを組み込んでいるだけでなく、設定ファイルを使用して組み込みのスタイルを上書きしたり、独自のスタイルを拡張したりすることもサポートしています。一般的にはカスタムカラーが多いです。

TailwindCSS の基本的な使用方法は、以前の Bootstrap などの CSS ライブラリとほとんど変わりません。クラスにさまざまなクラス名を追加するだけです。TailwindCSS のクラス名は、属性の略称 + 属性の程度 +[属性値] で構成されています。たとえば、デフォルトでは、TailwindCSS は値をいくつかの程度に分割しています。各程度は 0.25rem です。例えば、mt-2はmargin-top: 0.5remを表します。透明度などの属性には値もあります。例えば、bg-opacity-30は--tw-bg-opacity: 0.3; // e.g. background-color: rgba(0, 0, 0, var(--tw-bg-opacity));を表します。（色や変換などでは変数が使用されます。）また、レスポンシブレイアウトにはmd、smなどのリテラルも提供されています。

これらはすべて基本的なものであり、それほど難しくはありませんが、覚えるのは難しいかもしれません。心配しないでください、Tailwind CSS IntelliSenseがあります。クラス名を素早く入力できます。練習すれば、Emmet よりも速く入力できること間違いありません。

設定を通じて TailwindCSS をカスタマイズすると、色などのさまざまな属性をカスタマイズできます。たとえば、上の画像のbg-background-regularはカスタムカラーです。一度定義すれば、その後のすべての色のスタイルで使用できます。例えば、text-regular、border-regularなどです。TailwindCSS 2.1 以降、JIT を有効にすると、raw 属性のスタイルも生成できます。たとえば、h-[40px]は値として 40px を使用します。

それでは、これだけのクラスを 1 つのタグに書くと、とても乱雑になりませんか？この時、PostCSS + TailwindCSS が登場します。TailwindCSS は実際には PostCSS のプラグインです。PostCSS は CSS をさまざまな前処理するためのものです。PostCSS を設定すると、いくつかの特殊な構文を使用できます。たとえば、css ファイル内で@applyを使用して TailwindCSS のスタイルを追加できます。例：

.test {
  @apply relative w-full h-[40px] bg-background-regular flex items-center justify-between px-4 truncate;
}

注：PostCSS の補完を使用するには、PostCSS Language Server をインストールする必要があります。PostCSS は.css、.pcssの拡張子を持つ形式です。

@screen、@componentsなどのメソッドについては、具体的な説明は省略します。

@screen desktop { /* @media(max-width: 1024px), 別途設定が必要 */
  .test {
    @apply bg-white;
  }
}

もちろん、PostCSS はプラグインもサポートしており、SCSS に似た構文を拡張することができます。

これらはすべて役に立たないようですね？

最後に、最後の手段です。多くのデザイナーは、毎日デザインから画像を切り抜いています。

Figma を開き、適当な領域を選択し、プラグイン、Figma to Code, Tailwind 2 を選択します。

¡ 爽！