초보자를 위한 React 및 Tailwind CSS 설치 방법

5045 단어 tailwindcssreacttailwindcsstutorialcss
이 단계별 가이드에서 Tailwind CSS와 React를 로컬에 설치하는 방법을 보여드리겠습니다!

새 프로젝트 만들기



터미널을 열고 실행하여 새 React 프로젝트를 생성하여 시작하십시오.

npx create-react-app my-project


이것은 보통 몇 분 정도 걸립니다.

React 프로젝트 설치가 완료되면 계속해서 터미널의 프로젝트 폴더로 이동하여 다음을 실행합니다.

cd my-project
npm start


이제 http://localhost:3000에서 이것을 볼 수 있습니다.



항목 삭제



이제 index.html, App.js, index.css 및 index.js를 제외한 src 및 public 폴더의 모든 항목을 삭제하겠습니다.

프로젝트 폴더는 다음과 같아야 합니다.



파일 편집



계속해서 index.html의 모든 내용을 다음으로 바꾸십시오.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Tailwind Starter</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>


index.js를 이것으로 바꾸십시오

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
    <App />,
  document.getElementById("root")
);


App.js를 열고 코드를 다음으로 바꿉니다.

import React from "react";

function App() {
  return (
  <div>
    <h1 className="text-2xl text-red-900">Hello World!</h1>
  </div>
  )
}

export default App;


그리고 index.css

@tailwind base;
@tailwind components;
@tailwind utilities;


Tailwind CSS 설치



이제 Tailwind CSS 및 해당 종속 항목을 설치할 차례입니다. 우리는 이것을 npm으로 합니다. 터미널 내부에서 실행npm i -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 그러면 프로젝트에 Tailwind, Post CSS 7 및 자동 접두사가 설치됩니다.

크라코



Create React App Configuration Override is an easy and comprehensible configuration layer for create-react-app.



CRACO를 설치해야 합니다. Create React App은 PostCSS 구성을 무시할 수 없기 때문입니다.
npm i @craco/craco로 CRACO를 설치해 봅시다.

package.json을 열고 교체

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },


이것으로

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },


이제 프로젝트의 루트에 craco.config.js라는 파일을 만들어야 합니다. 이 내용을 복사하여 붙여넣기

module.exports = {
  style: {
    postcss: {
      plugins: [
        require("tailwindcss"),
        require("autoprefixer"),
      ],
    },
  },
}


순풍 구성



Tailwind CSS 구성 파일npx tailwindcss init을 만들고 tailwind.config.js의 모든 항목을 다음으로 바꿉니다.

  module.exports = {
   purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }


이렇게 하면 public/index.html에서 사용하지 않는 CSS와 src 폴더 내의 모든 폴더에 있는 .js, .jsx, .ts, .tsx 파일이 제거됩니다.
npm start를 실행하고 사이트가 다음과 같이 표시되면 모든 것이 정상적으로 작동하는 것입니다!

자원:
Tailwind CSS
React
CRACO
[Microdata] HTML의 구조적 태그를 배워보도록 하겠습니다.
전략 게임(문제 해결 트리 DP)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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