Skip to main content Link Search Menu Expand Document (external link)
안스LAB

electron + react + js + tailwind로 시작하기

카테고리: electron, 작성:

react, js, tailwind를 사용하는 electron 첫 시작 방법입니다.

Table of contents

참고

프로젝트 만들기

  • npm으로 첫 프로젝트를 생성한다. 아래 명령어와 함께 정보를 입력하면 프로젝트 폴더가 만들어진다.
npm create @quick-start/electron@latest

정보를 입력한다.

✔ Project name: … <electron-app>
✔ Select a framework: › react
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

Scaffolding project in ./<electron-app>...
Done.

실행해보기

npm install
npm run dev

위를 실행하면 윈도우 앱이 실행된다.

tailwind 추가하기

아래를 차래로 수행한다. content: 부분을 수정한다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

생성된 tailwind.config.js 파일을 아래처럼 수정한다.

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

처음 electron 생성 시 만들어진 main.jsx에 ‘./assets/main.css’가 입력되어 있으므로, 기존의 main.css의 내용을 아래와 같이 수정한다.

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

샘플코드의 className 부분을 tailwind 코드로 수정 후 테스트해본다.

※ 'electron' 카테고리의 다른 글