TailwindCSS 시작 - 개요 및 연습 자습서

7666 단어 csstutorialwebdevbeginners

소개하다.


안녕하십니까, 이 블로그로 돌아온 것을 환영합니다. 오늘은TailwindCSS를 어떻게 사용하는지 살펴보겠습니다.

Every software engineer is always looking for a tool that can perform the 80/20 rule, that is 20% work and 80% output and this does not exclude programming languages.


CSS는 파악하기 어렵다고 여겨져 Bootstrap,Bulma 등 많은 소스 개발 도구가 등장했다. 이 모든 도구의 목적은 CSS를 작성하는 데 필요한 시간과 정력을 최대한 줄이는 것이다.
본고에서 우리는 TailwindCSS를 연구할 것이다. 이것은 80/20을 실현하기 위한 또 다른 CSS 구조이다.

프리 액화


이 자습서는 CSS 프레임워크를 시작하려는 초보자를 대상으로 하며 다음과 같은 지식을 갖추어야 합니다.
  • 기본 CSS
  • 기본 HTML.
  • 기본 명령행 지식
    ###TailwindCSS란?
    • TailwindCSS는 유틸리티 우선 CSS 프레임워크로 flex, pt-4, text-center, and rotate-90 등 클래스를 포함하고 태그에 직접 조합하여 모든 디자인을 구축할 수 있다.
    유틸리티 클래스는 스타일시트에서 임의의 값을 잃어버리지 않고 시스템의 제약 속에서 작업을 할 수 있도록 도와줍니다.그것들은 우리로 하여금 색채 선택, 간격, 레이아웃, 음영, 그리고 정성스럽게 디자인된 디자인 시스템을 구성하는 모든 다른 요소와 쉽게 일치하게 한다.
    Bootstrap과 달리 Bootstrap은 클래스를 사용자가 사용할 수 있도록 설명하고 CSS에 제로 제어를 제공하여 Bootstrap 사이트를 사용하는 모든 사람들이 비슷하게 보일 수 있도록 합니다.그러나 TailwindCSS를 사용하면 유틸리티 클래스만 얻으면 CSS를 제어하는 방법을 알 수 있습니다.TailwindCSS 클래스는 CSS 초보자라도 누구나 쉽게 이해할 수 있습니다.예: bg-orange-100, background: orange; 100은 색상에 필요한 밀도를 나타냅니다. TailwindCSS를 사용하면 100-900에서 선택할 수 있습니다.

    왜 TailwindCSS입니까?


    이것은 완전히 초보자나 경험이 있는 CSS 프레임워크 사용자가 제기한 문제일 수 있습니다.나도 같은 질문을 한 적이 있다.Tailwind는 사용자 정의, 실용 프로그램 클래스를 사용할 수 있는 자유를 제공합니다. CSS 프레임워크를 사용하기 원하는 모든 사람들에게 매우 저급하고 기본적입니다.CSS의 초보자는 한두 시간 안에 그것을 배워서 익힐 수 있다.TailwindCSS를 선택한 이유:
  • 이해하기 쉬운 CSS 클래스 이름
  • 잊을 수 없는 유명.
  • 초보자 친선형.
  • 에는 유명을 어떻게 사용하는지에 대한 규칙이 없다.
  • 완전 맞춤 구성 가능 - SASS 또는 그 이하로 스타일을 덮어쓸 필요가 없습니다.
  • 유틸리티 클래스 1
    Tailwind가 있으면 HTML에서 벗어나지 않고 기능이 완비된 사이트의 앞부분을 구축할 수 있습니다.

    • TailwindCSS 클래스 및 출력


    다음은 Tailwind 유틸리티 클래스가 어떻게 작동하는지 간단한 예입니다
    <div class=" bg-indigo-500 text-white px-4 py-4">
<h1> Hello </h1>
</div>
    출력:

    우선, 우리는 div을 창설하여 순풍의 등급을 주었다.
  • bg-indigo-500: 밀도가 500인 인디고 배경색.
  • text-white: 이 div의 모든 텍스트는 흰색이어야 합니다.
  • px-4: div 채우기 4를 좌우 x축에 놓습니다.
  • py-4: Y축(즉, 위쪽과 아래쪽)에 div을 4로 채웁니다.
    위의 출력에서 우리는 이러한 종류가 효과적임을 알 수 있다.

    • 기본 실용 프로그램 종류와 그 함의.


    이 섹션에서는 일부 유틸리티 클래스와 그 의미를 소개하지만, 이것은 매우 간단하며, 자신의 CSS를 작성할 때 HTML 파일에서만 하면 된다는 것을 기억하십시오.잠수합시다.
  • bg-red-100: 밀도가 100인 빨간색 배경으로 100-900에서 선택할 수 있습니다.
  • mt, mb, mr, ml: 간단한 뜻은 페이지의 맨 위, 페이지의 맨 아래, 페이지의 오른쪽, 페이지의 왼쪽이다.따라서 mx과 my을 사용하여 x축(왼쪽과 오른쪽)과 y축(꼭대기와 밑부분)을 획득할 수 있다.
  • pt, pb, pr, pl: 간단한 뜻은 윗부분, 밑부분, 오른쪽, 왼쪽을 채우는 것입니다.px과 py을 사용하여 x축(왼쪽과 오른쪽)과 y축(꼭대기와 밑부분)을 획득할 수 있다.
  • text-orange-200: 주황색 텍스트, 밀도 200.
  • b-gradient-to-r from-pink-200 to-red-500: CSS의 이 점차적인 변화는 왼쪽에서 오른쪽, 왼쪽은 분홍색, 오른쪽은 빨간색이다.
  • text-center - 이것은 text-align: center;을 쓰는 것과 같다.
  • font-bold - font-weight: bold;을 쓰는 것과 같다.
    • 위에서 보듯이 TailwindCSS 클래스는 매우 기본적입니다.CSS 속성 이름과도 유사합니다.언제든지 documentation을 확인하여 CSS에 필요한 클래스의 이름을 확인할 수 있습니다.
    또 다른 순풍의 예:
    <div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 p-10 text-white font-bold text-lg text-center">
Hello there! My name is Franklin and we are learning TailwindCSS </div>
    출력:

    이 예가 끝난 후에 나는 내가 CSS로 쓴 줄 수를 기억하려고 했지만, 나는 Tailwind로 한 번 돌았을 뿐, 나의 HTML을 남기지 않았다.

    설치 가이드.


    현재, 우리는 미풍이 얼마나 신기한지 보았고, 로컬 기계에 그것을 설치해서 우리의 프로젝트에서 그것을 사용하는 방법을 보여 준다.문서에 따라 TailwindCSS를 설치하는 두 가지 방법이 있습니다.
    npm 을 통해
  • 설치
  • 은 CDN을 통해 사용할 수 있습니다. 제한이 많습니다.
    • 이 절에서는 Tailwind를 사용할 수 있도록 환경을 설정할 것입니다. 다음은 이 달콤한 프레임워크를 탐색해 보겠습니다.
  • 첫 번째, 당신이 좋아하는 코드 편집기를 엽니다. 저는 Visual 스튜디오 코드를 사용합니다.인터넷에 연결되었는지 확인하십시오. npm은 인터넷이 있어야만 Tailwind를 설치할 수 있기 때문입니다.완성좋아.
    • 지금 이 설치를 연습하는 데 사용하고 싶은 폴더를 말해 보세요. 어떤 이름이든 좋습니다.코드 편집기에서 엽니다.
    가방을 만듭니다.json 파일은 우리의 의존 관계를 관리합니다. 이 예에서 설치하고자 하는 순풍입니다.
    폴더를 열고 코드 편집기에서 터미널을 엽니다.
    유형:npm init -y완성좋아.우리는 곧 도착한다.
    우리는 우리의 폴더를 어떻게 구성하는지 배울 것이다.'src' 라는 폴더를 만들고 이 폴더에 CSS 파일을 만듭니다.이것은 우리의 미풍 base, components, utilities 양식에 도입할 것이다.
    /* in your src/style.css  paste the tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;
    우리는 곧 도착한다.네가 아주 잘했으니, 나는 너를 자랑스럽게 생각한다.
  • 두 번째 단계는 폴더 이름을 만듭니다. 하지만 제 폴더를 '공공' 이라고 합니다. 이 폴더에 표시된 HTML 파일과 CSS 파일을 만듭니다. src 파일을 만듭니다.
    너의 구조는 마땅히 이렇게 해야 한다.
    .
    우리는 이미 Tailwind를 설치할 준비가 되어 있습니다. 우리의 폴더는 이미 설치되어 있습니다.
    • 터미널을 열고 다음을 입력합니다.npm install tailwindcss@latest autoprefixer@latestTailwind는 생성된 CSS에 공급업체 접두사를 자동으로 추가하지 않기 때문에, 위의 코드 세션에서 보듯이 autoprefixer를 설치해서 이 문제를 처리하는 것을 권장합니다.
    이제 미풍이 정말 설치되었는지 확인하러 왔습니다.package.json 파일을 보면 다음과 같습니다.
    "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.1.0",
    "tailwindcss": "^2.0.2"
  }
}
    의존항과 버전을 나타낸다.성공인가요?좋아.너는 그것을 말살하고 있다.package.lock.json이라는 파일과 node_modules 폴더가 나타납니다.이렇게:
  • 마지막 단계: Tailwind를 구축하고 클래스를 스타일시트에 내보내서 사용할 수 있도록 합니다.package.json을 열고 scripts 키를 찾아 편집합니다.
    • "scripts": {
    "build:css": "tailwind build src/style.css -o public/style.css"
  }
    위에서 말한 바와 같이, 우리는tailwind의 '구축 또는 내보내기' 가 src/style.css에 저장된 it 스타일 (기초, 구성 요소, 실용 프로그램) 을 public/style.css에 우리의 스타일시트로 내보내도록 요구한다.
    이제 터미널을 켜고 실행합니다.npm run build:css . 지금 public/style.css을 검사해서 확인하세요.건배!!!방금 TailwindCSS를 설치했습니다.호리야.
    HTML 파일에 public/stylesheet을 연결하는 것을 잊지 마세요.
    <link rel="stylesheet" href="public/stylesheet">
    이 설치는 당신에게 낯설을 수도 있습니다. 이것은 괜찮습니다. 세 번 더 하면 이 설치는 계속될 것입니다. 이 article에서 저는 개발자로서 일치성에 대해 이야기했습니다. 이렇게 하면 이 설치가 계속될 것입니다. 만약에 멈추면 언제든지 되돌아와서 다시 읽을 수 있습니다.Tailwind를 선택한 것을 축하합니다.

    자원.

  • Tailwind Docs .

  • .


  • .

    • 결론


    읽어 주셔서 감사합니다. 다음 글은 Tailwind를 사용하여 뭔가를 구축할 것입니다. 따라서 발표할 때 저에게 연락을 주십시오.
    Go, Javascript,Tailwind, 개원에 대해 궁금한 게 있습니까?너는 트위터에서 나를 찾을 수 있다.다음에 봐요.고마워요
    포털 작성기: 4일
    3.12 Comparable 인터페이스 구현 고려

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage