ep.58 デザインとフロントエンドの関係を Tailwind CSS から考えよう

  • HANATANI Takuma(@potato4d)
  • spring-raining
  • f_subal
2020/08/21 に公開2747 views

このエピソードについて

@spring-raining が @f_subal @potato4d に Tailwind CSS やフロントエンドにおける CSS 設計について話を聞きました。

ゲスト紹介

Tailwind.cssとは

  • https://tailwindcss.com/
  • Utility-firstなCSSフレームワーク
  • CSSのプロパティがそのままクラス名と紐付く設計
  • 高いカスタマイズ性も特長

実務で感じたTailwindの特長

  • pixivのデザインシステムを構築していく際の様々な問題
    • 最初はReact componentを横展開していく計画だったが、Reactを採用していないプロダクトへの導入が課題
    • 自前のCSSフレームワークを作るコストの高さ
  • メタCSSフレームワークとしてのTailwind.cssの可能性

TypeScriptユーザーのためのirontail

Tailwindのメリット

  • どんな既存のプロジェクトでも導入でき、どんなプロジェクトでも通用する可搬性
  • JavaScriptとCSSの境界が明確
  • Utility-firstでありながらも、クラスの組み合わせにより自然とデザイン規約に従うことができる設計

デザインシステムの例外とその対処

  • デザインシステムを設計しても、例外的な要求はしばしば発生する
  • Utility系のクラスを用意して上書きしていくこともできるが、あえてstyleを直接書いて可視化するのも手
    • 実装側からデザインシステムへのフィードバックを生み出す

これからのCSS設計

  • Tailwindの登場によって、従来のCSSフレームワークともCSS-in-JSとも違うCSSの複雑化に対する解が生まれた
  • CSSを設計・実装する上で、今後どのようなことが重要になる?
    • spring-raining: メディアクエリの多様化への対処
    • f_subal: CSS設計を通したエンジニアとデザイナーの意識の共通化
    • potato4d: フィールに対するCSSを超えた包括的な設計

Refs


採用について

使用素材・クレジット

© Presented by UIT