django Tailwind CSS Tutorial

[내용 추가]

쉽게 추가 하는법

_base.html

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

단점

CDN 빌드를 사용하기 전에 Tailwind를 빌드 프로세스에 통합하지 않으면 Tailwind CSS를 훌륭하게 만드는 많은 기능을 사용할 수 없습니다.

• Tailwind의 기본 테마를 사용자 정의 할 수 없습니다
• 당신은 어떤 사용할 수 없습니다 지침 같은 @apply, @variants등
• 당신은 같은 기능을 사용할 수 없습니다 group-hover
• 타사 플러그인을 설치할 수 없습니다

---

https://pypi.org/project/django-tailwind/

https://github.com/timonweb/django-tailwind 

django 패키지 설치

pip3 install django-tailwind

 

settings.py INSTALLED_APPS 설정 tailwind 추가

INSTALLED_APPS += [

'tailwind', # tailwindcss add

]

 

 

 

python3 manage.py tailwind init theme

 

 

settings.py TAILWIND_APP_NAME 설정 추가

TAILWIND_APP_NAME = 'theme'

 

settings.py INSTALLED_APPS 설정 theme 추가

INSTALLED_APPS += [
    'theme', # tailwindcss add
]

 

(npm, node.js가 없을 경우 node.js 설치)

https://nodejs.org/

 

tailwind 설치

python3 manage.py tailwind install

 

 

tailwind 실행

python3 manage.py tailwind start

 

(서버 배포시)

python3 manage.py tailwind build

 

_base.html link 추가

<link rel="stylesheet" type="text/css" href="{% static 'css/styles.min.css' %}"/>

 

NPM 실행 파일 경로 구성

mac

NPM_BIN_PATH = '/usr/local/bin/npm'

 

window

NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd"