PostCSSとは？
Node.js製のCSS変換ツールです。さまざまなプラグインを組み合わせることでCSSファイルにさまざまな処理を行った上で変換を行うことができます。
実務では、SassやTailwindと組み合わせで使うことが多いです。
さまざまなプラグインの例
- ベンダープレフィックスを追加する。(autoprefixer）
- プロパティの順番を入れ替える。(CSS Declaration Sorter)
- sassなどでバラバラになった同じセレクタのメディアクエリーを一つにまとめてくれる。(css-mqpacker)
- 未来のcssを今のブラウザで解釈できるようにする。（cssnext）
- cssリンター（stylelint）
PostCSSの実態
CSSパーサー(変換ツール)です。変換過程の中で上述した各種プラグイン(autoprefixerなど)による変換処理を色々やってくれます。
Tailwindを使う
ほとんどのインストールは、postcssのプラグインとしてTailwindcssをインストールすることを推奨しています。
設定
postcss.config.js
|
1 2 3 4 5 6 |
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } |
通常は、postcssのプラグインとして「tailwindcss」や「autoprefixer」を読み込むような形となります。
package.json
以下のような記述をしてpostcssのビルドの設定をします。(本番向けのビルドと開発環境向けのビルドを分けたりします。）
|
1 2 3 4 |
"scripts": { "dev": "postcss style.css -o dist.css", "build": "NODE_ENV=production postcss style.css -o dist.css" }, |
第一引数が、ビルド対象のファイルで、-oで出力先のcssを指定します。
postcss-cliもインストールしておきます。
|
1 2 |
npm i -D postcss-cli npm run build |
こうすることで、ビルド後のcss（今回でいえば、dist.css）が生成されます。
VSCodeのプラグイン
PostCSS Language Support
このプラグインを入れることでPostCSSの構文などを解釈できるようになります。
この記事へのコメントはありません。