概要
Tailwind CSSで、CSSトランジションとレスポンシブ対応のためのメディアクエリを、WebフレームワークPhoenixに導入・実装します。
Tailwind CSS
flex, pt-4, text-center, rotate-90 などのCSSクラスを準備している「ユーティリティ・ファースト」のCSSフレームワークです。
モダンなWebサイトをすばやく構築できます。（公式より引用和訳）
Phoenix
膨大なアクセスやデータに対する高速処理、堅牢性に強みのあるプログラミング言語Elixir製のWebフレームワークです。
※ 本記事ではTailwindCSSをメイントピックにしているので、Phoenixについては以下の拙記事などご覧ください。
- 【Elixir 1.11】Phoenix Framework + DB開発をDockerでやる #1（コンテナ開発環境構築~CRUD実装~テスト
- 【Elixir 1.11】Phoenix Framework + DB開発をDockerでやる #2（CIパイプライン導入）
実行環境・バージョン
- macOS
- VSCode
- Tailwind CSS 2.0.2
- Node.js 14.15.4
- Phoenix 1.5.7
- Elixir 1.11.2 (compiled with Erlang/OTP 22)
コードとセットアップ
Phoenixプロジェクトディレクトリ作成
任意の名前でディレクトリをつくって、その中に入ってmix phx.newを実行します。
$mix phx.new .--app sample_app --no-ecto$mix deps.get && mix deps.compile
$cd assets && npm install&& node node_modules/webpack/bin/webpack.js --mode development
TailwindCSSセットアップ
/assets内で、Tailwind CSSと依存パッケージをインストール。
$npm install--save-dev tailwindcss@2.0.2 postcss@8.2.2 autoprefixer@10.1.0 postcss-loader@4.1.0
postcss.config.jsを新規作成しwebpack.config.jsにpostcss-loaderを追加。
module.exports={plugins:{tailwindcss:{},autoprefixer:{},}}use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader',// <-- add'sass-loader',],- npxで
tailwind.config.jsを生成。
$npx tailwindcss init
tailwindcss 2.0.2
✅ Created Tailwind config file: tailwind.config.js
- 最後に、CSS（SCSS）にインポート。
@import"tailwindcss/base";@import"tailwindcss/components";@import"tailwindcss/utilities";フロントページにお試し実装
公式トップのプロフィールカードや、こちらのチートシートを参考にして、お試し実装していきます。
<mainrole="main"class="container"><pclass="alert alert-info"role="alert"><%=get_flash(@conn,:info)%></p><pclass="alert alert-danger"role="alert"><%=get_flash(@conn,:error)%></p><!-- 追加ここから --><section><h1class="text-center font-medium text-4xl"><%=gettext"team%{name}",name:"im"%></h1></section><%=@inner_content%><%=@inner_content%><!-- 追加ここまで --><%=@inner_content%></main></body>- 以下
index.html.eexコード中にベタ書いているclassが、Tailwindの持つCSSクラスになります。
<sectionclass="my-8"><figureclass="md:flex transition duration-500 ease-in-out bg-gray-100 hover:bg-indigo-200 transform hover:-translate-y-1 hover:scale-105 rounded-xl p-8 md:p-0"><!-- プロフィール画像は`/assets/static/images/`に準備 --><imgclass="w-32 h-32 md:w-56 md:h-56 rounded-full md:rounded-none mx-auto md:mx-0"alt="im image"src="<%= Routes.static_path(@conn, "/images/im.jpg")%>"
>
<divclass="pt-6 md:p-8 text-center md:text-left space-y-4"><pclass="text-xl font-semibold">
"Aenean eleifend, massa id scelerisque lacinia, odio elit blandit diam, at varius nisi turpis ut neque. Nam at consequat erat."
</p><figcaptionclass="font-medium"><div><pclass="text-purple-600">im</p></div><div><pclass="text-gray-500">Web Developer</p></div></figcaption></div></figure></section>test"GET /",%{conn:conn}doconn=get(conn,"/")asserthtml_response(conn,200)=~"Welcome to Phoenix!"# <-- deleteasserthtml_response(conn,200)=~"team im"# <-- addendendここまできたら、mix phx.serverでローカルサーバー起動して、お使いのWebブラウザでlocalhost:4000を確認してみましょう。
実装は以上になります。
補足（Tailwind CSS IntelliSense）
VSCodeのプラグインTailwind CSS IntelliSenseを導入すると、オートコンプリートやリンター機能のほか、Tailwind CSSクラスをホバーして生CSSを確認できたりするのでオススメです。
おわりに
Tailwind CSSをPhoenixフレームワークにお試し導入しました。
BootstrapみたいにUIコンポーネントが用意されているものではないのですが（例えばbtn btn-primaryのように一発でUI部品を作れない）、カスタマイズ性に優れていてPhoenixとの親和性も良いと感じました。
また、Tailwind CSSを導入することによって以下の効果が得られそうな予感を持ちました。
- CSSまわりのコードがスッキリする。（特にメディアクエリまわり）
- クラス名が直感的であり、お手軽にねらった効果を実装できる。
普段使いにも良さそうです。