React JS 프로젝트에서 Tailwind CSS 설정

아직 React 앱이 없다면 앱을 만드세요.

npx create-react-app my-app
cd my-app

1. Tailwind CSS 설치 다음 명령을 실행하여 Tailwind CSS 및 해당 종속 항목을 설치합니다.

npm install -D tailwindcss postcss autoprefixer

그런 다음 Tailwind CSS를 초기화하세요.

npx tailwindcss init

이렇게 하면 프로젝트에 tailwind.config.js 파일이 생성됩니다.

1. Tailwind 구성 tailwind.config.js 파일을 편집하여 콘텐츠 경로를 구성합니다. 콘텐츠 키를 다음으로 바꿉니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // Scan these files for Tailwind classes
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

1. CSS에 Tailwind 지시문 추가 src 폴더에서 index.css라는 파일을 찾거나 생성합니다. 다음 Tailwind 지시문을 추가합니다.

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

1. React에서 CSS 가져오기 index.css를 프로젝트로 가져왔는지 확인하세요. src/index.js 파일에는 다음이 있어야 합니다.

import './index.css';

1. 개발 서버 시작 React 앱을 실행하여 Tailwind CSS가 실제로 작동하는 모습을 확인하세요.

npm start

위 내용은 React JS 프로젝트에서 Tailwind CSS 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!