다음은 Jekyll에서 Tailwindcss의 이점을 활용하는 간단한 데모입니다.

데모를 검색하다가 몇 가지 예를 찾았지만 종종 사용되지 않거나 전혀 작동하지 않는 경우가 많았습니다.

데모를 했습니다:

jmau111 / jekyll-tailwindcss

Jekyll에서 Tailwindcss의 간단한 데모

지킬을 위한 Tailwindcss

다음은 sass가 포함된 Jekyll의 Tailwindcss 3++ 데모입니다.
See the live demo

사용 방법

저장소 복제

cd jekyll-tailwindcss

bundle jekyll 종속 항목 설치

yarn 노드 모듈 설치

bundle exec jekyll serve 로컬 서버 실행

즐기다!
Source: documentation Tailwindcss
최종 빌드 명령은 다음과 같습니다.

JEKYLL_ENV=production jekyll build

작동하지 않으면 다음을 시도하십시오.

JEKYLL_ENV=production bundle exec jekyll build

또는 yarn dev 및 yarn build 를 사용할 수 있습니다.

데모 URL

See the live demo
스타일 출처: https://tailwindcomponents.com/component/card-hero-section



View on GitHub

Tailwindcss란 무엇입니까?

Tailwindcss은 광범위한 API 표면이 있는 CSS 프레임워크입니다. 아이디어는 개발자로부터 중복 CSS 규칙을 추상화하는 것이므로 멋지고 깨끗한 UI를 얻기 위해 일부 구성을 설정하고 HTML 클래스를 사용하기만 하면 됩니다.

지킬 데모

우리는 Jekyll 자체 외에도 여러 리소스를 사용합니다. 가장 중요한 파일은 postcss.config.js 및 tailwind.config.css입니다. 이 데모에서는 매우 기본적이지만 작동합니다.

the card hero component from tailwind components 도 사용했습니다.

Jekyll로 Tailwindcss를 설정하는 데 도움이 되기를 바랍니다. README 파일에 필요한 지침을 모두 추가했지만 질문이나 추가할 사항이 있으면 주저하지 말고 문제를 제기하고 풀 리퀘스트까지 하세요.

완벽합니까? 다른 Bootstrap과 유사한 프레임워크입니까?

첫 번째 질문에는 전혀 해당되지 않으며 두 번째 질문에도 해당되지 않습니다.

빌드를 개선하기 위해 sassc gem을 포함시켰지만 Jekyll에서 Tailwindcss를 사용하는 방법일 뿐입니다. 다른 접근법이 있습니다.

게다가 Tailwindcss가 유망하더라도 완벽한 도구는 아닙니다. 완벽한 것은 없습니다. UI를 얻으려면 많은 클래스와 div를 사용해야 하는데 이는 반드시 이상적이지는 않습니다.

그런 관점에서 보면 Bootstrap 과 비슷하지만 꽤 다른 접근 방식이며 내장된 purge CSS로 훨씬 더 가볍습니다.

그러나 같은 양의 튜토리얼과 공짜는 찾을 수 없습니다. 실제로 Tailwindcss는 아직 어리고 문서는 환상적이며 많은 유용한 링크를 제공합니다.

Tailwindcss의 요점은 무엇입니까?

나는 여전히 Tailwindcss를 틈새 시장으로 보고 있지만 그것이 유용하지 않다는 의미는 아닙니다. 모든 것을 원하지는 않지만 모범 사례, 손쉬운 레이아웃 및 빠른 시장 출시가 필요한 사람들에게 특히 적합합니다.

IMHO는 웹에 대한 뛰어난 기여이며 많은 사람들이 앱을 빌드하고 제공하는 데 도움이 될 수 있습니다.

사진 제공: Travis Yewell on Unsplash