순풍 CSS-소개

10510 단어 htmlcodenewbiecsstutorial

순풍 CSS란 무엇입니까?


Tailwind CSS는 부트와 유사한 프레임워크입니다.그러나 Bootstrap과 달리 미리 정의된 구성 요소가 없습니다. 이 구성 요소들은 우리에게 특정한 기능을 제공합니다. 즉, 순풍 CSS 기능입니다.
official documentation의 정의:

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.


기본적으로 이것은 Tailwind CSS가 우리에게 디자인이나 구조 모델을 강요하는 프레임워크가 아니라 스타일(색깔, 크기 등)도 제공하지 않고 미리 정의된 구성 요소도 제공하지 않는다는 것을 알려준다.
이 점에서 당신은 아무런 이익도 없는 순풍 CSS를 볼 수 있습니다. 왜냐하면 우리는 당신이 이전에 Boostrap을 사용했을 때의 속도를 잃을 수 있기 때문입니다. 이것은 무슨 이익이 있습니까?
Tailwind의 가장 큰 장점은 사용자 정의 디자인을 직접 만들고 Tailwind CSS가 제공하는 작은'구축 블록'을 제공하는 것이다.

적목효용 우선?


이제 우리는 공용사업이나 블록 구축이 도대체 무엇을 의미하는지 의문이 들 수도 있다.물론 당신은 이미 알고 있습니다. 당신의 기억을 불러일으키기 위해 여기에는 몇 가지 예가 있습니다.
  • text-white = 색상: #fff;
  • font-bold = 글꼴 굵기: 굵기;
    • 일반적으로, CSS에서 디자인할 때, 우리는'실용적'클래스가 있는데, 우리는 보통 이런 클래스를 매우 빈번하게 반복해서 사용한다.이러한 상황에서 이러한'유틸리티'는 Tailwind CSS의 기초이다. 왜냐하면 이것은 우리에게 우리가 필요로 하는 모든 것 (글꼴, 격자, flex, 색깔, 테두리, 음영, 애니메이션 등) 을 충족시키기 위해 무한한 유틸리티를 제공하기 때문이다.

    순풍 CSS 어때요?


    Tailwind CSS를 사용하기 전에, Tailwind CSS를 사용하는 HTML 코드의 작은 예시를 남겨 드리겠습니다.또한 주의해야 할 것은 Tailwind CSS를 사용하면 스타일시트를 거의 사용하지 않으며, Tailwind가 여전히 작용하지 않는 특정한 상황에서만 사용됩니다.
    <button 
  class="px-6 py-3 bg-blue-500 rounded text-white font-bold"
>I'm a Button!</button>
    출력:

    Tailwind CSS 시작


    Tailwind CSS는 HTML/JavaScript, ReactJS, Angular, VueJS 등 모든 기술에 사용할 수 있습니다.이 문서에서는 HTML의 기본 항목에 Tailwind CSS를 사용합니다.
    다음과 같은 기본 프로젝트 구조를 갖추고 싶습니다.
    └─ yourprojectfolder
  ├─ assets
  │  └─ css
  │     └─ styles.css
  ├─ index.css
  └─ index.html

    프로젝트에서 Tailwind CSS 설정


    Tailwind CSS는 두 가지 사용 옵션(npm, cdn)을 제공합니다.이 예에서 우리는 NPM 패키지를 사용할 것이다. 왜냐하면 우리는 미풍 CSS를 더욱 깊이 이해하고 싶기 때문이다.

    패키지를 생성합니다.json


    NodeJS를 사용하고 있는 경우 다음 단계로 이동할 수 있습니다.
    터미널에서 다음 명령을 실행합니다.
    npm init -y
    이 명령은 루트 폴더에 package.json 을 생성합니다. 이 파일은 프로젝트에 의존항을 설치할 수 있도록 합니다.

    후미풍 CSS 설치


    이제 프로젝트에 Tailwind CSS를 설치해야 하므로 다음 명령을 실행합니다.
    yarn add tailwindcss
# or
npm install tailwindcss

    You can install globally if you want.


    순풍이 불다.구성js 파일

    tailwind.config.js 파일을 사용하면 Tailwind CSS를 사용자 정의할 수 있습니다.우리는 앞으로 그것에 대해 더 많이 토론할 것이다.
    이 파일을 생성하려면 다음 명령을 실행해야 합니다.
    npx tailwindcss init
    그런 다음 Tailwind CSS가 루트 폴더에 생성됩니다tailwind.config.js.

    You can add the --full flag to the command, to generate the full configuration of Tailwind CSS. Helpful if you want to look at how Tailwind CSS works.


    이 파일에는 다음과 같은 내용이 있습니다.
    // tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
    여기에서 우리가 할 수 있는 모든 것을 상세하게 설명할 것이지만, 현재, 우리는 계속해서 Tailwind CSS를 설정해야 한다.

    순풍 CSS를 CSS에 추가


    현재 생성할 파일이 없으면 index.css 파일에 코드 줄을 추가해야 합니다.
    파일을 열고 다음 코드를 입력합니다.
    /* index.css */
@tailwind base;

@tailwind components;

@tailwind utilities;

    스크립트 추가 및 Tailwind CSS 구축 생성


    현재, 우리는 package.json 파일에서 스크립트를 만들고 작성해야 한다.
    // package.json
...
  "scripts": {
    "build-css": "tailwindcss build index.css -o assets/css/styles.css",
  },
...
    이 스크립트를 사용하면 Tailwind CSS 구축을 생성할 수 있습니다. 터미널에서 다음 명령을 실행하기만 하면 됩니다.
    yarn build-css
# or
npm run build-css
    이 스크립트는 우리의 assets 폴더에 styles.css 파일을 생성합니다. 이 파일은 Tailwind가 필요로 하는 모든 종류를 포함하고 있습니다. 현재 이 파일은 너무 무거울 수 있지만, 나중에 복구할 것입니다.

    HTML에 스타일 추가

    index.html에서 구축 CSS 파일을 추가해야 합니다.
    <!-- index.html -->
...
<head>
  ....
  <title>Tailwind CSS Started</title>

  <!-- Styles -->
  <link rel="stylesheet" href="assets/css/styles.css">
  ...
</head>
...
    이제 Tailwind CSS를 설치했습니다. Tailwind CSS 클래스로 HTML 코드를 작성할 수 있습니다.자세한 내용은 documentation of Tailwind CSS 을 참조하십시오.

    Tailwind CSS 구성 파일 검토


    Tailwind CSS 구성 파일을 다시 살펴보겠습니다.
    module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
    나는 주로 이 두 가지 일을 토론할 것이다.구성js 파일.
  • 지우기: 경로 그룹입니다.Tailwind-CSS는 이 경로를 읽고'지우기'구축 파일을 시작할 수 있습니다. 우리가 필요로 하는 클래스만 남겨 두십시오. 이것들이 있으면 파일의 크기를 줄일 수 있습니다.
  • 주제: 주제 부분이 가장 중요하다고 생각합니다. 여기서 Tailwind CSS에 대한 모든 내용(색깔, 간격, 채우기, 배경, 글꼴 등)을 추가, 편집, 덮어쓸 수 있습니다.사용자 정의 색상을 추가하거나 기존 색상을 덮어쓸 수 있습니다.

    • CSS 구축 지우기


    CSS 구축을 지우기 위해서 Tailwind CSS 클래스를 사용할 파일을 지정해야 하기 때문에 이렇게 하겠습니다.
    module.exports = {
  ...
  purge: ['index.html'],
  ...
}
    이런 상황에서 우리는 단지 하나의 파일만 있지만, 만약 당신이 더 많은 파일을 가지고 있다면, 당신은 추가할 수 있습니다.
    이를 위해 Tailwind CSS는 노드 환경이 프로덕션 상태일 때만 파일을 지웁니다.
    설치cross-env만 하고 package.json에 다음 스크립트를 추가하십시오.
    // package.json
...
  "scripts": {
    "build-css": "tailwindcss build index.css -o assets/css/styles.css",
    "build-css:prod": "cross-env NODE_ENV=production tailwindcss build index.css -o assets/css/styles.css"
  },
...
    이 스크립트의 출력은 다음과 같습니다.
    yarn run v1.22.5
$ cross-env NODE_ENV=production tailwindcss build index.css -o src/css/styles.css

   � Building: index.css

   ✅ Finished in 1.56 s
   � Size: 12.28KB
   � Saved to src/css/styles.css
    보시다시피 이 파일은 현재 무게가 12.28KB에 불과합니다.
    나는 이 문장이 네가 좋아하길 바란다.만약 당신에게 어떤 문제나 보충 또는 교정이 필요한 곳이 있다면 저에게 알려주세요!
    이 재구매를 확인하기 위해 준비된 모든 도구를 사용할 수 있습니다: Tailwind CSS Starter
    먼저 두 갈래 트리를 만들고 나중에 두 갈래 트리를 계속 출력합니다
    두 갈래 트리의 최대 경로 및 -LintCode

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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