django - tailwind 적용

tailwind가 적용되어있는 repository 내려받은 후

• npm install

기존 프로젝트에 tailwind 추가

1. 프로젝트 teminal에 nvm list 입력해서 현재 설치, 선택되어있는 nvm 확인
   • 설치가 안 되어있다면 nvm install 16.13.1(원하는 버전)
   • 선택이 안 되어있다면 nvm use 16.13.1(해당 버전)
2. common.css 복사 후 같은 폴더에 붙여넣기 후 common.base.css로 설정
3. common.base.css 파일 최상단에 @tailwind utilities;, @tailwind components;
4. terminal에 npm install -D tailwindcss
5. npx tailwindcss init
6. .gitignore/에 node_modules/ 추가
7. tailwind.config.js 파일에 content: ["./**/templates/**/*.{html, js}"], (templates 폴더 안에 html와 js로 끝나는 파일에 적용 시킨다는 뜻)
8. tailwind.config.js 파일에 prefix: 't-', (이름 충돌을 피하기 위함)
9. tailwind.config.js 파일에 mode: "jit",
10. settings.py 파일에 추가 =>

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'base/static',
]
STATIC_ROOT = BASE_DIR / 'static'

common.base.css 파일 전체 내용

@tailwind utilities;
@tailwind components;

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html > body {
    font-family:"GmarketSansMedium";
}

html > body :is(h1, h2, h3, h4, h5, h6) {
    font-weight:normal;
    margin:0;
    font-size:1rem;
}

html > body ol, ul {
    padding: 0;
}

.card-body {
    padding: 0;
}

tailwind 실행

• 1번 방법 npx tailwindcss -i ./base/static/common.base.css -o ./base/static/common.css --watch
• 2번 방법
  • package.json 파일에 "scripts":{ "css" : "npx tailwindcss -i ./base/static/common.base.css -o ./base/static/common.css --watch"}
  • 실행시 npm run css