Nodejs

TailwindCSS를 사용하도록 Create-React-App을 구성하는 방법(2)

조회 357 (작성일 2019.08.07 22:36)
- 음성
- 목록

CSS 파일을 빌드 하도록 앱을 구성하는 방법

npm start 또는 yarn start 명령을 실행할 때마다 스타일을 빌드 하도록 앱을 구성하십시오.

package.json 파일을 열고 "scripts"의 내용을 다음으로 바꾸십시오.

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

CSS를 앱으로 가져 오는 방법

index.js 파일을 열고 tailwind 스타일을 가져옵니다.

import './styles/tailwind.css';

프로젝트 루트 디렉토리에서 index.css 및 app.css 파일을 삭제하고 각각 Index.js 및 App.js 파일에서 해당 가져 오기 명령문을 제거하십시오.

index.js 파일은 다음과 유사해야 합니다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
  .......

삭제 후 다음과 같아야 합니다.

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

삭제하기 전에 App.js 파일은 다음과 같아야 합니다.

//App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

삭제 후 다음과 같아야 합니다.

//App.js
import React from 'react';
import logo from './logo.svg';

이러한 변경으로 다음과 유사한 출력이 발생합니다.

browser output

index.css 및 app.css를 삭제 한 후 브라우저에서 출력

구성이 올바르게 작동하는지 테스트하기 위해 간단한 로그인 양식을 만들어 보겠습니다.

App.js 파일을 열고 리턴 함수 사이의 컨텐츠를 다음으로 바꾸십시오.

<div className="App" >
    <div className="w-full max-w-md bg-gray-800" >
      <form action="" className=" bg-white shadow-md rounded px-8 py-8 pt-8">
        <div className="px-4 pb-4">
          <label htmlFor="email" className="text-sm block font-bold  pb-2">EMAIL ADDRESS</label>
          <input type="email" name="email" id="" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline border-blue-300 " placeholder="Johnbull@example.com"/>
        </div>
        <div  className="px-4 pb-4">
          <label htmlFor="password" className="text-sm block font-bold pb-2">PASSWORD</label>
          <input type="password" name="email" id="" className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline border-blue-300" placeholder="Enter your password"/>
        </div>
        <div>
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">Sign In</button>
        </div>
      </form>
    </div>
  </div>

방금 수행 한 것은 div에 w-full을 100 % 너비로 지정하고 중간 화면 및 더 큰 경우 max-w-md를 사용하여 max-width를 설정하는 것입니다.

우리는 양식에 bg-white로 흰색 배경을 주었고 border-radius를 사용하여 border, px-8 및 py-8로 곡선 테두리를 얻었습니다 .pt는 x 축 및 y 축에 각각 8px의 패딩을 추가합니다. -8은 양식 상단에 8px의 패딩을 추가합니다.

text-sm이 있는 레이블 요소에 font-size .875rem을 추가하고 요소에 블록을 표시하고 font-bold를 사용하여 font-weight를 700 값으로 설정했습니다.

입력 요소에서 요소에 그림자가 있는 상자 그림자를 제공하고 .appearance-none을 사용하여 입력 요소의 브라우저 별 스타일을 재설정 했습니다.

우리는 Lead-tight와 함께 1.25의 행 높이를 추가하고 의사 클래스 초점을 사용하여 focus : outline-none으로 초점이 지정된 입력 요소의 브라우저 별 개요를 제거하고 focus : shadow-outline으로 약간의 상자 그림자를 추가했습니다.

이와 비슷한 결과가 나타납니다.

input form