Angular + Angular Material + Tailwind CSS セットアップ方法
Angular + Angular Material + Tailwind CSS のセットアップが意外と難しかったので備忘録です。
Angular + Angular Materialまで
これはほとんど説明不要で、ドキュメント のとおり
$ ng add @angular/material
するだけです。
あとは好きなモジュール（例えば ツールバー を使うときは MatToolbarModule ）を読み込めばコンポーネントやディレクティブが普通に使えます。
Tailwind CSSを追加で導入
簡単な方法と難しい方法の2つがあります。
簡単な方法
簡単な方法は、
$ npm install tailwindcss
# または
$ yarn add tailwindcss
でインストールして、 angular.json で styles に以下の3ファイルを加えるだけです😇
"styles": [
- "src/styles.scss"
+ "src/styles.scss",
+ "node_modules/tailwindcss/dist/base.css",
+ "node_modules/tailwindcss/dist/components.css",
+ "node_modules/tailwindcss/dist/utilities.css",
],
これで、とりあえず自分のコンポーネントの中で普通にTailwind CSSの各種クラスが使えるようになります。
が、これだとビルド済みのCSSをただ読み込むだけなので、ここに書いてあるような 制約を受けます。特に @apply などのディレクティブが使えないのはだいぶ不便です。
難しい方法（ビルドプロセスに組み込む）
上記のような制約を受けずにTailwind CSSの本来の機能をフルに使いたい場合は、webpackのビルドプロセスに組み込む必要があります。
一般的な手順は こちらのドキュメント に記載されているので、これをAngularプロジェクトに適用してあげればOKです。
tailwindcss/setup-examples リポジトリに Angular向けのセットアップ手順のドキュメントのPR があったのでこれを参考にしたのですが、Angular Materialを導入済みのプロジェクトでは一部この通りでは上手くいかないところがありました。
なので、以下に僕の環境で実際にやったことを示します✋
1. 必要な依存をインストール
$ npm install -D tailwindcss postcss-import postcss-scss @fullhuman/postcss-purgecss @angular-builders/custom-webpack
# または
$ yarn add -D tailwindcss postcss-import postcss-scss @fullhuman/postcss-purgecss @angular-builders/custom-webpack
2. angular.json を編集
上でインストールした @angular-builders/custom-webpack を使ってwebpackの設定を拡張するため、 angular.json を以下のように編集します。
"build": {
- "builder": "@angular-devkit/build-angular:browser",
+ "builder": "@angular-builders/custom-webpack:browser",
"options": {
+ "customWebpackConfig": {
+ "path": "./webpack.config.dev.js"
+ },
"outputPath": "dist/angular-cli",
"index": "src/index.html",
"main": "src/main.ts",
(...)
"configurations": {
"production": {
+ "customWebpackConfig": {
+ "path": "./webpack.config.prod.js"
+ },
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
"serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
+ "builder": "@angular-builders/custom-webpack:dev-server",
"options": {
+ "customWebpackConfig": {
+ "path": "./webpack.config.dev.js"
+ },
"browserTarget": "xxx:build"
},
"configurations": {
"production": {
+ "customWebpackConfig": {
+ "path": "./webpack.config.prod.js"
+ },
"browserTarget": "xxx:build:production"
}
}
},
3. webpackの追加設定を書く
ここ、ポイントです。
Angular Materialを導入しているプロジェクトの場合、 .scss ファイルに対して postcss-loader だけを有効にするような設定を書いてしまうと
Error: Failed to find '~@angular/material/theming'
のようなエラーになります。この場合、 postcss-loader だけでなく sass-loader も有効にしてあげる必要があります。（参考）
setup-examplesのPR に書かれているとおり、プロダクションビルドでのみ purge-css で無駄なCSSを削除するために、2ファイル用意しています。（上記の angular.json で customWebpackConfig のパスを2種類使い分けています）
// webpack.config.dev.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
{
loader: 'sass-loader',
options: {},
},
],
},
],
},
};
// webpack.config.prod.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
require('@fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
'./src/**/*.html',
'./src/**/*.ts',
// etc.
],
// Include any special characters you're using in this regular expression
defaultExtractor: content =>
content.match(/[A-Za-z0-9-_:/]+/g) || []
}),
],
},
},
{
loader: 'sass-loader',
options: {},
},
],
},
],
},
};
4. tailwind.config.js を生成
$ npx tailwind init
中身が空の設定ファイルが生成されます。設定を変えたいのでなければ特にいじる必要はありません。
5. src/styles.scss でTailwindのCSSファイルを読み込む
僕はAngular Materialを カスタムテーマ でインストールしていたので styles.scss は以下のような状態でした。
末尾（先頭でもいいけど）にTailwind CSSのCSSファイルのインポートを追記すればOKです。
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$app-primary: mat-palette($mat-amber);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$app-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-theme);
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+ @import '~tailwindcss/base';
+ @import '~tailwindcss/components';
+ @import '~tailwindcss/utilities';
まとめ
Angular + Angular Materialなプロジェクトに、追加でTailwind CSSを導入する方法をまとめてみました。参考になれば幸いです。
Discussion