Tailwind CSS + ReactJS + Tailblocks = 빠른 시작 콤보

TailwindCSS + ReactJS + 테일 블록

안녕하세요 여러분,이 기사에서는 TailwindCSS, ReactJSTailblocks를 사용하여 빠른 프로젝트를 만드는 방법을 알려 드리고자합니다 .

기술에 익숙해지는 것부터 시작합시다.

Tailwind CSSAdam Wathan이 개발 한 CSS 라이브러리입니다 . 준비된 클래스를 사용하여 CSS를 요소로 내보낼 수 있습니다. Bootstrap과 같은 준비된 구성 요소가 없기 때문에 코드를 작성할 때 큰 유연성을 제공하고 상상력과 디자인 기능에 맞게 사용자 지정할 수 있습니다.

물론 이러한 차이는 많은 비판을 불러옵니다. 프로그램의 준비된 구성 요소가 없기 때문에 너무 많은 클래스 이름을 지정하여 인라인 CSS를 작성하는 것과 크게 다르지 않다고 생각하는 사람들이 있습니다.

https://tailwindcss.com/components/buttons/#border

또한 원자 수준에 매우 가까운 클래스 명명법의 의미 (의미)가 부족하여 이해하기 어려워지면서 비판을받습니다. 이 주제에 대한 아래 기사를 읽어 보시기 바랍니다.

ReactJS 에 대해 할 말이 많지만 지금은 사람들에게 많은 인식이 있다고 생각합니다. 들어 본 사람은없는 것 같습니다. 자세한 정보는 다음 기사와 ReactJS의 자체 문서를 읽는 것이 좋습니다.

React.js 시작하기 — 1 부

Tailblocks는 무엇입니까 ? Tailblocks는 Mert Cukuren 이 Github에서 개발 한 코드 저장소 이며 TailwindCSS를 사용하여 생성 된 코드 블록으로 구성됩니다. 나는 내 프로젝트에서 그것을 사용하는 것을 좋아하고 그것이 나에게 탁월한 속도를 제공한다고 믿습니다.

https://github.com/mertJF/tailblocks/blob/master/public/preview.gif

15 개의 서로 다른 카테고리로 생성 된이 코드 블록은 반응 형 지원, 어둡거나 밝은 모드 지원 및 다양한 색상 테마로 매우 편리합니다. 이러한 코드 블록을 사용하여 빠르게 복사하고 직접 사용자 지정할 수 있습니다. 이러한 기성 코드 블록을 React 프로젝트 용 jsx로 변환하여 쉽게 사용할 수 있습니다.

프로젝트를 시작합시다.

최근 친척을위한 기술 서비스 웹 사이트를 준비했는데 시간이별로 없었지만 제가 언급 한 도서관을 이용하여 빠른 프로젝트를 만들 수있었습니다. 이 프로젝트를 수행하는 방식과 TailwindCSS의 가장 좋아하는 기능과 Tailblocks 프로젝트를 어떻게 활용했는지에 대해 이야기하고 싶습니다. 내가 언급 한 프로젝트에 대한 링크는 다음과 같습니다.

Node가 컴퓨터에 설치되어 있다고 가정하고 create-react-app을 사용하여 ReactJS 프로젝트를 빠르게 생성합니다. ( 노드> = 8.10 및 npm> = 5.6 )

npx create-react-app my-app
cd my-app
npm start

TailwindCSS 라이브러리를 포함 해 보겠습니다.

yarn add tailwindcss postcss-cli autoprefixer -D

npx tailwind init —full

touch postcss.config.js

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

@tailwind base;

@tailwind components;

@tailwind utilities;

"scripts": {
    "start": "npm run build:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
  },

yarn start

import React from 'react';
import './styles/main.css';

function App() {
  return (
    <div class="h-64">
        <div class="p-4 m-4 bg-green-600">
            <h1 class="text-2xl font-bold text-white">Merhaba</h1>
        </div>
    </div>
  );
}

export default App;

프로젝트 내에서 코드 블록 및 사용 예제를 Tailblocks.

다음 블록 예제를 사용하여 사진 카탈로그를 빠르게 준비 할 수 있습니다.

https://mertjf.github.io/tailblocks/
https://muratbenli.github.io/WhiteGoodsServices/

다른 탭의 페이지를 디자인하고 대화식으로 페이지에 표시 할 수 있습니다.

https://mertjf.github.io/tailblocks/
https://muratbenli.github.io/WhiteGoodsServices/

연락처 페이지를 빠르게 만들고 Google지도로 주소 정보를 제공 할 수 있습니다.

https://mertjf.github.io/tailblocks/
https://muratbenli.github.io/WhiteGoodsServices/
https://muratbenli.github.io/WhiteGoodsServices/

TailwindCSS로 요소에 빠르게 애니메이션 적용

사용하는 카드를 빠르게 애니메이션 할 수 있습니다. class =“transform transition duration-500 hover : scale-110” 코드 를 추가하여이 기능을 적용하려는 요소에 쉽게 애니메이션을 적용 할 수 있습니다.“hover :”기능을 사용하면 호버 선택기 기능을 쉽게 적용 할 수 있습니다. "focus :", "active :", "group-hover :"와 같은 다른 접두사를 사용하여 사용자 정의하고 쉬운 애니메이션을 만들 수 있습니다.

카드를 슬라이더에 삽입하고이 기능을 적용하여 Netflix 슬라이더 애니메이션을 만들 수도 있습니다. 아래 예제에서는 슬라이더를 사용하지 않았지만 코드 펜에서 애니메이션을 테스트 할 수 있습니다.

다음 연구에서 TailwindCSS 1.6 업데이트와 함께 제공되는 새로운 애니메이션 클래스로 만든 예제를 검토 할 수 있습니다.

Tailwind CSS 1.6을 사용한 스켈레톤 로딩 카드 — animate-pulse

나는 나의 경험 안에서 나의 지식을 당신에게 전달하려고 노력했습니다. 의견, 조언 및 피드백에 대해 저에게 연락하려면 다음 계정을 통해 저에게 연락하십시오. 이 기사를 읽어 주셔서 감사합니다.

Suggested posts

Angular vs React vs Vue : 장점, 단점 및 사용시기

Angular vs React vs Vue : 장점, 단점 및 사용시기

프로그래밍 세계 Vue에서 Angular, React 및 상대적인 참신함 (2014)을 통합하는 것은 무엇입니까? 첫째, 이들 모두는 JavaScript로 작업을 단순화하고 프런트 엔드 문제를 해결하기위한 것입니다. 둘째, 이러한 각 도구를 범용이라고 부르지 만 그럼에도 불구하고 특정 디지털 제품 개발을 위해 설계되었습니다.

SPFx 및 반응 현지화, 쉬운 대안?

SPFx 및 반응 현지화, 쉬운 대안?

즉시 사용 가능한 SPFx 지역화 메커니즘이 트릭을 수행 할 수없는 상황에 직면 해 본 적이 있다면이 기사를 참조하십시오. 기본 SPFx 현지화를 사용자 지정으로 교체해야하는 이유를 몇 가지 예를 빠르게 살펴 보겠습니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.