frontendreact

Gatsby에 Tailwindcss 추가하기 (팁 CLI 방법)

cli, gatsby, react, tailwindcss
Views: 498

설치하기

Gatsby 프로젝트에서 tailwindcss 프로젝트를 추가할때 사용하는 방법입니다.
추가로 프로젝트마다 tailwindcss를 쉽게 추가할 수 있는 팁도 알려드리겠습니다.

1
2
npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p

tailwind.config.js 파일수정

1
2
3
4
5
6
7
8
9
10
11
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

./src/styles/global.css 파일을 생성합니다

그리고 다음 내용을 넣어줍니다.

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

루트에 gatsby-browser.js 파일 내부에 글로벌 style값을 불러와줍니다.

1
import './src/styles/global.css'

설정이 완료되었습니다.

프로젝트를 실행시켜주면 됩니다.

CLI로 tailwindcss 설정 간편하게 하기(shell)

간단하게 tailwindcss를 생성하는 팁입니다.

프로젝트에서 간편하게 tailwindcss를 추가할 수 있게 쉘을 이용해서 만들어 보겠습니다.

기본설정에서 추가로 폰트까지 추가 가능하게 작성했습니다.

파일 생성

루트에서 setup-twc.sh 파일을 생성해줍니다.

그리고 src/styles/global.css 파일을 생성해줍니다.

setup-twc.sh 파일 작성

쉘을 작성해줄 것 입니다. 프로젝트를 생성할때마다 tailwindcss를 추가하는 방법을 간편하게 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
echo "Tailwind CSS 설치를 시작합니다. 계속하시겠습니까? (y/n)"
read user_input

if [ "$user_input" = "y" ]; then
  echo "진행 중..."
  
  # 테일윈드 CSS와 필요한 패키지 설치
  npm install tailwindcss postcss autoprefixer gatsby-plugin-postcss

  # 테일윈드 설정 파일 생성
  rm -rf tailwind.config.js
  # 테일윈드 설정 파일 생성
  touch tailwind.config.js

  # 테일윈드 설정 파일에 테일윈드 설정 추가
  echo "/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ]
 theme: {
  extend: {},
  fontFamily: {
   Inter: ['Inter', 'sans-serif']
  }
 },
 plugins: []
};" >> ./tailwind.config.js

  # 테일윈드 CSS 파일 삭제
  rm -rf ./src/styles/global.css

  # 테일윈드 CSS 파일 생성
  touch ./src/styles/global.css

  # 테일윈드 CSS 파일에 테일윈드 CSS import
  echo "/* global.css */" >> ./src/styles/global.css
  echo "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap');" >> ./src/styles/global.css
  echo "@tailwind base;" >> ./src/styles/global.css
  echo "@tailwind components;" >> ./src/styles/global.css
  echo "@tailwind utilities;" >> ./src/styles/global.css

  # PostCSS 파일 삭제
  rm -rf postcss.config.js

  # PostCSS 파일 생성
  touch postcss.config.js

  # 테일윈드 CSS 파일을 PostCSS가 처리할 수 있도록 설정
  echo "module.exports = {
 plugins: [require('tailwindcss'), require('autoprefixer')]
};" >> ./postcss.config.js

  echo "설치가 완료되었습니다!"
else
  echo "설치가 취소되었습니다."
  echo "`gatsby-plugin-postcss`가 추가되었는지 확인해주세요"
  echo "`src/styles`경로에 `global.css`를 생성했는지 확인해주세요"
fi

쉘을 읽어보시고 필요한 부분은 사용하고 폰트라던가 수정해야할 부분이 있다면 수정해서 사용하면 됩니다.

스크립트 작성

package.json 파일내부에 scripts부분에서

twc 스크립트를 작성해줍니다.

1
2
3
4
5
6
"scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
  //...
    "twc": "sh setup-twc.sh"
  },

스크립트 실행

1
npm run twc

스크립트를 실행하고 y를 입력후 엔터를 누르면 tailwindcss가 프로젝트에 추가됩니다.

프로젝트를 생성하고 매번 docs를 찾아서 하나씩 추가를 할 필요없이 간단한 쉘, 구조, 파일 정도만 살짝 손봐주면 스크립트로 설치, 폰트 설정이 한번에 완료됩니다.

쉘부분의 경우 다른 방법으로 응용해서 사용가능합니다.

Share