エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
tailwindcssで美しいデザインシステムを構築した話
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
tailwindcssで美しいデザインシステムを構築した話
デザインシステムとは、「あるべきデザインを一貫性を持ってユーザーに提供するための仕組み」である。... デザインシステムとは、「あるべきデザインを一貫性を持ってユーザーに提供するための仕組み」である。(デジタル庁デザインシステムより引用) デザインシステムには、Figma等で描かれたスタイルガイドやコンポーネントだけでなく、ソースコードも含まれる。むしろ、デザインの一貫性を担保するにはソースコードの中身が重要なのは言うまでもない。 今回は、tailwindcss(以下tailwind)を採用したプロジェクトで美しいデザインシステムを構築することができたので、その際に意識したことを紹介する。 1. tailwindでプリミティブなスタイルを提供する プリミティブ=原始的。これ以上細かい単位でCSSを当てることはできない。 marginやwidthなど、全てのCSSに制約を設定するのは現実的ではないが、tailwindのデフォルトの制約が丁度よかった。 color, fontSizeなどはデザイ