Zenn
💡

Tailwind CSSの導入方法（Webpack環境）

2022/09/17に公開
CSS
TypeScript
webpack
npm
Tailwind CSS
tech

はじめに

  • TailwindCSSをWebpack環境に入れた際の手順などのメモをまとめたものです

前提

  • Tailwind CSS v3
  • Webpack v5
  • TypeScriptを使用

手順

  1. npmでインストールと初期化

    npm i -D tailwindcss
npx tailwindcss init

  2. 使うファイルのPathを設定

    tailwind.config.js
    content: ["./src/main/resources/**/*.{html,js,ts}"],

  3. Webpackで読み込むCSSにTailwindディレクティブを追加

    index.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  4. 関連プラグインのインストール

    npm i -D mini-css-extract-plugin css-minimizer-webpack-plugin css-loader postcss postcss-loader autoprefixer

  5. webpackからpostcss-loaderを利用出来るように、webpack.config.jsを変更

    webpack.config.js
    ...
plugins: [
	new MiniCssExtractPlugin({
	filename: './css/index.css',
	}),
],
...
module: {
	rules: [
		...
		 {
			test: /\.css$/i,
			use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
		}
		...
	],
},
optimization: {
	minimizer: [new CssMinimizerPlugin()],
},

  6. postcss.config.jsに設定を記述

    postcss.config.js
    module.exports = {
	plugins: {
		tailwindcss: {},
		autoprefixer: {},
	}
}

  7. WebpackのエントリポイントのTSに記述（Pathは配置した場所に合わせる）

    index.ts
    import '../css/index.css';

  8. HTMLでTailwindの使用を開始する

メモ

  • https://tailwindcss.com/docs/using-with-preprocessors
    • ベンダープレフィックスが必要な場合はPostCSSプラグインのAutoprefixerを入れる
  • mini-css-extract-pluginを使う場合、style-loaderは不要
  • 各プラグイン説明
    • mini-css-extract-plugin
      • CSSを別ファイルに書き出すプラグイン
        • 使わない場合、JSファイルに出力される
    • css-minimizer-webpack-plugin
      • CSSをminifyするプラグイン
      • 出力されるCSSファイルの容量が減る（開発時はminifyされていない）
        • 開発でも実行する場合は、 optimization.minimizeオプションをtrueに設定する
    • css-loader
      • CSS を JS で扱える形に変換する loader
        • JSでCSSをインポートする際に必要になる
    • postcss-loader
      • CSSビルドプロセスの静的解析からプリプロセッサ、ポストプロセッサまでの様々な処理を実行するOSS
        • 他のプラグインと組み合わせてCSSビルドツールを自作するイメージ
    • autoprefixer
      • ベンダープレフィックスを自動で付けてくれる

参考

https://tailwindcss.com/docs/installation
https://qiita.com/hirogw/items/518a0143aee2160eb2d8
https://blog.yusan009.com/tailwindcss/
https://tech-blog.rakus.co.jp/entry/20210702/postcss#アーキテクチャ
https://zenn.dev/ikuraikura/articles/71b917ab11ae690e3cd7
https://qiita.com/takano-h/items/1a6a5a0b9d25a677f7d2
https://ui.appleple.blog/JS/entry-100.html

Discussion