PurgeCSSとPostCSSでTailwindを設定する方法

PurgeCSSと簡単なPostCSSセットアップ(Webpackは含まれていません)を使用してTailwindCSSをトリミングするワークフローをセットアップする方法

私は最近、ブログのCSSをに移動することに着手しました追い風

Tailwindは、Bootstrapなどのウィジェットのセットを提供する代わりに、提供するため、興味深いフレームワークです。ユーティリティ

HTMLの操作方法に非常に共鳴していることがわかりました。

使い方を紹介しましたVueで追い風以前の投稿で、ビルドツールがすでに配置されていないと、正しいセットアップを正しく行うのが難しい場合があります。後で覚えておくためだけに、このブログ投稿を書くことにしました🙃

この投稿では、Tailwindを使用する方法を説明しますどれか一種のプロジェクト。

Tailwindをインストールする

最初のステップは、npmまたはyarnを使用してTailwindをインストールすることです。

npm init -y
npm install tailwindcss

構成ファイルを作成します

次に、次のコマンドを使用して構成ファイルを作成します。

npx tailwind init

これにより、tailwind.config.jsプロジェクトのルートにあるファイルに、基本的なTailwind構成を追加します。

PostCSSを構成する

今、あなたは微調整する必要がありますPostCSSTailwindが実行されることを確認するための構成。追加:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

あなたにpostcss.config.js。存在しない場合は作成してください。

便宜上、自動プレフィックスも追加しました。おそらく必要になるでしょう。でインストールnpm install autoprefixer

ああ、PostCSSをインストールしたことも確認してください(npm install -g postcss-cli

TailwindCSSファイルを作成します

次に、次のように、必要な場所にCSSファイルを作成します。tailwind.cssと追加

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

ビルドコマンドを作成する

今あなたのpackage.jsonファイルを作成し、スクリプトセクションがない場合は追加します。

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css"
}

テールウィンドを構築する

コマンドラインから実行しますnpm run build:css最終的なCSSファイルを作成します。

結果のファイルはstatic/dist/tailwind.css(上記のコマンドで場所を変更できます)。

ファイルの変更時にCSSを自動的に再生成します

テーマHTMLで何かを変更するたびに(layouts私の場合はフォルダ)、CSSを再生成し、設定したパージとミニファイをトリガーします。

これを行う方法?

をインストールしますwatchnpmパッケージ:

npm install watch

を追加しますwatchあなたへのスクリプトpackage.jsonファイル。あなたはすでに持っていたbuild:css以前から、layoutsフォルダーを監視して実行するスクリプトを追加するだけですbuild:css変更のたびに:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

今すぐ実行npm run watchそして、あなたは行ってもいいはずです!

ファイルサイズをトリミングする

チェックすると、結果のファイルは巨大です。 HTMLでTailwindクラスを使用しない場合でも、フレームワークはすべてデフォルトで含まれています。これは、これがデフォルトの構成であるためです。tailwind.jsファイル。

彼らは、人々が物事を見逃さないように、すべてを含めることにしました。それはデザインの選択です。私たちは今する必要がありますものを削除する、そして、purgecssを使用して未使用のCSSクラスをすべて削除できることがわかりました。

また、CSSからすべてのコメントを削除し、できるだけ小さくしたいと思います。cssnano私たちが探しているものです。

このようなものを自動化できます!まず、これらのユーティリティをインストールします。

npm install cssnano
npm install @fullhuman/postcss-purgecss

次に、これをPostCSS構成ファイルに追加しますpostcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = { plugins: [ require(‘tailwindcss’), require(‘autoprefixer’), cssnano({ preset: ‘default’ }), purgecss({ content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) ] }

開発では、過度の処理を避けてください

どうして?追加するすべてのステップは、開発中のフィードバックサイクルを遅くします。私はこの設定を使用して、本番環境でプレフィックスを追加し、コメントを削除するだけです。

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = { plugins: [ require(‘tailwindcss’), process.env.NODE_ENV === ‘production’ ? require(‘autoprefixer’) : null, process.env.NODE_ENV === ‘production’ ? cssnano({ preset: ‘default’ }) : null, purgecss({ content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) ] }

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: