twitter ui practiseダウンロードtwitter ui practiseソースコードダウンロード

twitter ui practise

AI ソースコード

1.0.0

ダウンロード

Twitter UI練習クローン

このプロジェクトの目標は、次のJSについて学ぶことです。私の背景は、HTMLとTailwind CSSの経験を持つWebデザイナーです。 TwitterアプリのホームページUIを再作成しようとしました。それはオリジナルとはほど遠いものであり、多くの欠陥があると確信しています。提案や改善があれば教えてください。主なことは、楽しんで、何か新しいことを学ぶことです。できればあなたもできることを願っています。

Twitter-demo.mp4.mp4

はじめる

gitをgitリポジトリにクローンするとき

npm install
npm run dev

ストーリーブックをチェックアウトして、コンポーネントを単独で表示します

npm run storybook

問題

右側のパネルは、Twitterと同じ動作に従いません。スクロールすると、固執しますが、フッターリンクを見ることができるはずです。

スタック

next.js
Tailwind CSS
基数
ストーリーブック
ヴェルセル

リソース

私がフォローして、クローンを構築するためにリポジトリとビデオをチェックしました。

Tru Narla
コルビーフェヨック
スティーブン・テイ
リー・ロブ
フロレンティン

それは何ですか？

Package.jsonをチェックアウトする場合は、いくつか説明してみましょう

Class-Variance-Authority：ボタンなどのバリエーションを作成できます。あなたがデザイナーなら、それはFigmaのコンポーネントバリアントのようなものです。
ClassNames：RADIX UIコンポーネントなどのコンポーネントをスタイリングすると、Tailwind CSSを使用するときにCSSユーティリティクラスの長いラインを作成できます。ホバー、アニメーション、レスポンシブ、レイアウト、その他のクラスがあるかもしれません。これで、それらを別々の行にグループ化できます。