0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

PostCSSとTailwind CSSってなに...?

Posted at

PostCSSってなに?Tailwind CSSで触れた範囲のメモ

React(Vite)プロジェクトで Tailwind CSS を導入したとき、
postcss.config.js というファイルを見かけました。

Tailwind CSS と PostCSS の関係を中心に軽く整理しておきます。

PostCSSとは?

PostCSSは、CSSをJavaScriptで変換・最適化するためのツールらしいです。
CSSをそのまま書くのではなく、プラグインを通して「構文の変換」、「自動最適化」、「プレフィックス付与」などを行います。

たとえば:

プラグイン名 役割
autoprefixer ベンダープレフィックス(-webkit-など)を自動付与
postcss-nesting ネスト構文(入れ子書き)を使えるようにする
cssnano CSSを圧縮・最適化する

Tailwind CSSとPostCSSの関係

Tailwind CSSもPostCSSのプラグインの一つです。
Tailwind CSS は、@tailwind@apply などの独自構文を
通常のCSSに変換して最終的なCSSに書き換える必要があります。

この「書き換える処理」を実際に行っているのが PostCSS です。
Tailwind CSS は PostCSS に「自分のルールを使ってCSSを変換してね」と登録されています。

そのため、ビルド時には PostCSS が Tailwind CSS のルールを使って、
CSSファイルを最終的な形に変換します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?