はじめに
こんにちは、DELISH KITCHEN開発部でバックエンド開発を担当している高木です。 DELISH KITCHENのリテールソリューションズ事業部（以下、RS事業部）が、小売向けに展開している店頭サイネージの管理画面等の開発をしています。
DELISH KITCHEN RS事業部で提供している管理画面は、AngularというWebフレームワークを用いて開発されています1。 画面のレイアウト(Flexbox, Grid CSS + mediaQuery)には、Angular公式である@angular/flex-layoutというライブラリを使用していたのですが、 開発が活発ではないのと、ずっとベータの状態というのもあり、他の方法を模索していました。 そんな時に最近、tailwindcssというCSSフレームワークが話題になっていたのと、@angular/flex-layoutと同じようにHTML上でレイアウトが記述できることから、試しに置き換えた話をします。
tailwindcssとは
flex、pt-4、text-center、rotate-90などのCSSクラスが集まったutility-first CSSフレームワークです。下記のように、用意されているutilityクラスをHTML上で組み合わせることによってデザインしていくことが出来ます。
<div class="flex flex-row gap-2 p-4"> <div class="text-blue-600 text-xl">Hello,</div> <div class="text-green-600 text-2xl">World</div> </div>
導入
Angular CLI v11.2からtailwindcssが公式サポートされたので、導入は簡単です。 まずはtailwindcssをプロジェクトに追加します。
npm install tailwindcss
インストールが終わったら、設定ファイルを生成します。
npx tailwindcss init
初期設定のままでは不都合が多いので、下記の項目を設定しています。
- purge
- tailwindcssで用意されている全クラスが含まれてCSSのサイズが肥大化してしまので、使用しているクラス以外は除外する設定
- prefix
- クラス名が他のCSSフレームワークやアプリ固有のクラスと被らないための設定
- screens
- レスポンシブ対応のための設定で、ここではモバイルとそれ以外で分けている
- important
- tailwindcssのクラスを常に優先させるための設定
module.exports = {
prefix: 'tw-',
purge: {
content: ['./apps/**/*.{html,ts,css,scss}', './libs/**/*.{html,ts,css,scss}']
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
screens: {
xs: { max: '599px' },
'gt-xs': { min: '600px' }
}
},
variants: {
extend: {}
},
plugins: [],
important: true
};
最後にstyles.scssに下記を追加します。
@import 'tailwindcss/components'; @import 'tailwindcss/utilities';
公式ドキュメントではtailwindcss/baseも追加していますが、これは標準タグのスタイルに変更が入ってしまうので、抜いています。
以上で導入は完了したので、次は実際に@angular/flex-layoutの部分をtailwindcssに置き換えていきます。
変換表
@angular/flex-layoutは、tailwindcssと同じくHTML上でレイアウトを記述するので移行は簡単でした。 プロジェクトで使用していたAPIのみ、下記に変換表を載せておきます。
| @angular/flex-layout | tailwindcss |
|---|---|
<div fxLayout="column"> |
<div class="tw-flex tw-flex-col"> |
<div fxLayout="row"> |
<div class="tw-flex tw-flex-row"> |
<div fxLayout.xs="column" fxLayout.gt-xs="row"> |
<div class="tw-flex xs:tw-flex-col gt-xs:tw-flex-row"> |
<div fxLayout="row wrap"> |
<div class="tw-flex tw-flex-wrap"> |
<div ... fxLayoutGap="16px"> |
<div class="... tw-gap-4"> |
<div ... fxLayoutAlign="start center"> |
<div class="... tw-items-center"> |
<div fxFlexFill> |
<div class="tw-w-full"> |
まとめ
@angular/flex-layoutからtailwindcssにレイアウト部分の記述を移行しました。Angularが公式にtailwindcssをサポートしているのと、 どちらも似たような書き方で記述できることから、移行は比較的に簡単に出来ました。
今回tailwindcssを使用してみて、用意されているクラス名を組み合わせていくことで、クラス名を考える必要がなくなり、 CSSサイズの削減にも繋がるメリットを感じられたので、レイアウト以外のスタイルもtailwindcssに乗り換えていくことを検討中です。
