순풍 CSS로 Dev.to 복제

TLDR;
Github 저장소Link
라이브 https://devto-tailwind.netlify.app/
GIF


영상


우리는 다음 주제를 순항할 것입니다

순풍이란 무엇입니까? (요약)

무엇을 빌드했습니까?

시간

tailwind.js에 사용자 정의 추가

뒷바람이란? (요약)

Tailwind CSS는 무시하기 위해 싸워야 하는 성가신 독단적인 스타일 없이 맞춤형 디자인을 구축하는 데 필요한 모든 빌딩 블록을 제공하는 고도로 사용자 정의 가능한 저수준 CSS 프레임워크입니다. here에서 이 정의를 가져왔습니다.

문서는 놀랍습니다. 개인적으로 문서 읽기를 마쳤습니다.

내가 무엇을 만들었습니까?

. 그래서 복제하기로 결정했습니다Dev to . 느낄 수 있을 만큼 가까웠습니다. 웹사이트의 데스크톱 버전일 뿐입니다.

진전

1단계
내가 항상 선호하는 것처럼 레이아웃부터 시작합니다.

2단계NavBar

3단계SideBar

4단계Listings

5단계
내가 가장 좋아하는 것, Et Voila!

시간

소비된 전체 시간은 (wakatime을 사용하여 계산)

tailwind.js에 대한 사용자 정의 추가

이것은 개발 과정에서 사용되는 사용자 정의 색상입니다.

dev: {
        gray: "#1a2634",
        body: "#0d1219",
        text: "#f9fafa",
        link: "#dde0e2",
        teal: "#1CB3A6",
        tealPri: "#26d9ca",
        hoverTags: "#868EE7",
        searchBox: "#2E3A48",
      }

보너스gif :p


평화✌🏻,
로히스 길라.