UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. ゲスト紹介
    01:04
  • 2. Tailwind.css とは
    01:35
  • 3. 実務で感じた Tailwind の特長
    08:00
  • 4. TypeScript ユーザーのための irontail
    14:51
  • 5. Tailwind のメリット
    21:50
  • 6. デザインシステムの例外とその対処
    32:40
  • 7. これからのCSS設計
    37:25
  • 8. クロージング
    45:27
  • HANATANI Takuma
  • 緑豆はるさめ
  • f_subal
2020/08/21 に公開 1316 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

10秒前へ 10秒次へ