Tailwind.cssの
開発環境構築-応用編 #2/2
前回のセッションから続けて、開発環境のセットアップを行いたいと思います。具体的には、テスト環境と本番環境のコードを分離するためにプラグインを使用し、本番環境に適用するためにコードを圧縮したいと考えています。さらに、tailwindでコードを再利用する方法についても説明しますので、活用してください。※前回の基礎編はこちらを参照してください。
プラグインの導入
postcss-cli
PostCSSは、CSSを変換するためのツールで、多くのプラグインと組み合わせて使用されます。
autoprefixer
PostCSSのプラグインとして動作するツールです。CSSファイルの内容を解析し、必要に応じてベンダープレフィックス（例: -webkit-、-moz-、-ms-など）を自動的に追加または削除します。
cssnano
CSSを最適化してサイズを縮小するためのツールです。それはPostCSSのプラグインとして動作し、様々な最適化手法を組み合わせて、出力されるCSSファイルのサイズをできるだけ小さくすることを目指します。
ターミナル
npm install -D postcss-cli cssnano autoprefixer
package.json
{
"devDependencies": {
"autoprefixer": "^10.4.15",
"cssnano": "^6.0.1",
"postcss-cli": "^10.1.0",
"tailwindcss": "^3.3.3"
}
}
バージョンは異なる可能性がありますが、問題ありません。
続いてpostcssの設定ファイルを作成しましょう。
ターミナル
touch postcss.config.js
postcss.config
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: {},
},
}
本番環境用のコマンド
package.json
"scripts": {
"dev": "npx tailwindcss -i ./root/input.css -o ./dist/output.css --watch",
"build": "NODE_ENV=production postcss ./root/input.css -o ./dist/output.min.css --watch"
},このコードを使用して、NODE_ENV=productionを指定することで、プロダクション環境をテスト環境本番環境を分離することができます。
コードの再利用
@apply
Tailwind CSS の @apply ディレクティブは、既存のユーティリティクラスを他の CSS クラスやコンポーネントに適用するのに使います。この機能を使うことで、再利用可能なコンポーネントを作る時に Tailwind のユーティリティを使用してスタイルを合成することができます。
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
クラスbtnとbtn-blueを指定することで、それぞれの特性が適用されます。
クラスのカスタマイズ
Tailwind CSSは高度にカスタマイズ可能で、デフォルトの設定を上書きするか、新しい設定を追加することで、新しいユーティリティクラスを簡単に生成できます。ここではカラーを例にカスタマイズしていきます。
tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#1DA1F2',
},
},
},
variants: {},
plugins: [],
}
テキストカラー:
.text-brand-blue
背景カラー:
.bg-brand-blue
境界線のカラー:
.border-brand-blue
このようにカスタマイズした値をクラスに適応することが可能です。
- テスト環境と本番環境をプラグインで分離して管理
- ベンダープレフィックスの追加やコードの圧縮が簡単
- コードの利用で可読性がアップ
- 高いカスタマイズ自由度
- ChatGTPで調べれば、カスタマイズうの仕方やクラスの適応方法を的確に伝えてくれる