정보실

웹학교

정보실

css Tailwind CSS : 내일의 부트 스트랩입니까?(1)

본문

우리는 놀라운 웹 플랫폼과 반응 형 디자인의 르네상스를 경험하고 있습니다. 반응 형 사용자 인터페이스는 대부분 Bootstrap, Foundation, Bulma 또는 우수한 구식 미디어 쿼리와 같은 라이브러리로 구현되었습니다.


우리는 이러한 UI 키트를 사용하여 지시문을 쉽게 구현하여 적은 UI로 필요한 정확한 UI와 적절한 응답성을 달성했습니다. 그러나 큰 문제는, 우리가 정말로 올바르게 하고 있었는가 하는 것입니다.


https://blog.logrocket.com/tailwind-css-is-it-tomorrows-bootstrap-ebe560f9d00b/ 


UI 키트의 규칙에 구속되지 않고 반응형 UI를 달성 할 수 있는 방법이 있다면 어떨까요? 응답성을 달성하고 맞춤형 사용자 인터페이스 디자인을 유지하는 방법이 있습니까? 알아 봅시다.


Tailwind CSS 란 무엇입니까? 


공식 문서에 따르면 Tailwind CSS는 사용자 정의 사용자 인터페이스를 빠르게 구축하기 위한 유틸리티 우선 CSS 프레임 워크입니다. 인라인 스타일을 작성하고 CSS 한 줄을 쓰지 않고도 멋진 인터페이스를 만드는 멋진 방법이라고 생각합니다.


제 생각에는 대부분의 개발자가 Tailwind CSS에 약간 혼란스러워 한다는 점은 마크업이 원하는 것보다 훨씬 더 바쁘다는 사실입니다. Tailwind는 최초의 유틸리티 CSS 라이브러리는 아니지만 현재 가장 인기 있는 라이브러리입니다.


시작하기 


CDN이 프로젝트에서 스타일을 가져 오는 좋은 방법이지만 CDN 빌드를 사용하여 Tailwind CSS의 많은 기능을 사용할 수 없습니다. Tailwind의 기능을 최대한 활용하려면 npm을 통해 Tailwind를 설치하십시오.


1. npm을 통해 Tailwind를 설치 


Tailwind는 npm에서 사용할 수 있으며 npm 또는 Yarn을 사용하여 설치할 수 있습니다.


# Using npm
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --dev

2. Tailwind 구성 파일 생성 


Tailwind는 거의 전적으로 일반 JavaScript로 구성됩니다. 이렇게 하려면 프로젝트에 대한 Tailwind 구성 파일을 생성해야 합니다. 프로젝트 루트에 tailwind.js 파일을 만드는 것이 좋습니다. CLI 유틸리티는 이를 쉽게 처리 할 수 ​​있도록 도와줍니다.


# Using npm
npx tailwind init [filename]
# Using Yarn
yarn tailwind init [filename]

구성 파일에 주석이 필요 없는 숙련 된 Tailwind 사용자 인 경우 구성 파일을 생성 할 때 주석 없음 플래그를 사용하여 주석을 제거 할 수 있습니다. 설정에 대한 자세한 내용은 공식 문서를 확인하십시오.


UI 키트의 문제 


우선, 우리가 하고 있는 일과 프레임 워크에 유연성을 추가하는 방법을 살펴 보겠습니다. 그런 다음 최신 정보에 비추어 UI 키트를 사용하는 것이 최선의 선택이 아닌 이유를 살펴 보겠습니다.


Bootstrap과 같은 프레임 워크는 개발자가 제공된 패턴만 사용하도록 강요하는 시점까지 컴포넌트 작성을 추상화 했습니다. 다른 UI 키트 유형 프레임 워크도 마찬가지입니다.


일부는 자체 CSS로 프레임 워크를 재정의 하는 것이 옵션이라고 주장 할 수 있지만 많은 것을 재정의 하면 프레임 워크를 사용할 때 실제로 어떤 점이 있습니까? 우리는 라이브러리를 가져오고 여전히 자체 코드를 작성하고 있습니다 .— 이것은 걱정할 파일이 더 많으며 시간을 절약하지도 않습니다.


내가 Bootstrap 사이트에서 발견한 또 다른 문제는 거의 항상 모양이 비슷하므로 개발 환경에 창의성을 통합할 수 없다는 것입니다. 이것은 Tailwind CSS의 장점 중 하나입니다. 두 사이트를 동일하게 보지 않고도 복잡한 사용자 인터페이스를 쉽게 구축 할 수 있는 기능입니다.


"유틸리티 우선"은 무엇을 의미합니까? 


유틸리티 우선 라이브러리는 Bootstrap과 달리 Tailwind는 자동으로 스타일이 지정된 구성 요소를 제공하지 않음을 의미합니다. 오히려 특정 방식으로 컴포넌트를 스타일링하는 데 도움이 되는 유틸리티 클래스를 제공하며 이러한 유틸리티 클래스를 사용하여 자체 클래스를 작성할 수 있습니다. 간단한 두 가지 예를 사용하여 이를 자세히 설명하겠습니다.


예 1 : 간단한 버튼 데모 


https://codepen.io/ekwunoobinna/pen/MRpNQj 


위의 예에서 Tailwind CSS로 버튼 구성 요소를 구현하는 것이 얼마나 쉬운 지 알 수 있습니다.


예 2 : 간단한 카드 데모 


아래 코드는 Tailwind CSS 프레임 워크로 만든 간단한 카드 예입니다. CSS에 익숙한 경우 스타일과 관련하여 이미 진행중인 작업을 수행 할 수 있습니다. 처음에는 이 모든 것을 암기하는 것이 약간 까다로울 수 있지만 구문에 익숙해지면 괜찮을 것입니다.


아래 코드 스니펫에는 shadow-lg 클래스와 bg-white을 사용하여 구현 된 흰색 배경으로 인해 큰 화면에 그림자가 있는 컨테이너가 있습니다. 우리는 또한 px-4와 py-1 py-1 클래스가 메시지 버튼의 x 및 y 축 패딩에 도움이 된다는 것을 알 수 있습니다


<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">Adam Wathan</p>
        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
      </div>
      <div>
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
      </div>
    </div>
  </div>
</div>

위 코드의 모양을 보여주는 CodePen에 대한 링크는 다음과 같습니다.


https://codepen.io/ekwunoobinna/pen/oOWvEr 





페이지 정보

조회 567회 ]  작성일19-08-07 12:04

웹학교