1. Django Tutorial(Airbnb) - Tailwind with Gulp

ID짱재·2021년 8월 16일

django tutorial

Django

목록 보기

23/43

🌈 Tailwind with Gulp

🔥 Setting Up

🔥 Tailwind 적용

1. Setting Up

Tailwind는 css가 아닌 postcss를 사용하는데요,, postcss는 웹브라우저에서 이해할 수 없기 때문에 이를 "Node.js"나 "Gulp"를 이용해서 CSS로 변환시켜 줘야해요. 웹브라우저가 Tailwind를 이해할 수 있도록 설정을 해보도록 할께요:)
참고 : https://tailwindcss.com/docs/installation

1) Node.js 설치 및 초기화

Node.js 최신 설치 : 🔎 brew install node
Node.js 특정 설치 : 🔎 brew install node@12
Node.js 설치 확인 : 🔎 node -v
Node.js 초기화 : 🔎 npm init 👈 package.json 파일이 생성되요!

# package.json
{
  "name": "airbnb-clone",
  "version": "1.0.0",
  "description": "Cloning Airbnb with Python, Django, Tailwind and more...",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Jang-Jaewon/airbnb-clone.git"
  },
  "scripts": {
    "css": "gulp"
  },
  "homepage": "https://github.com/Jang-Jaewon/airbnb-clone#readme",
  "devDependencies": {
    "autoprefixer": "^9.7.0",
    "gulp": "^4.0.2",
    "gulp-csso": "^3.0.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "node-sass": "^4.13.0",
    "tailwindcss": "^1.1.3"
  }
}

2) gulp & tailwind & autoprefixer 설치

gulp 설치 : 🔎 npm i gulp gulp-postcss gulp-sass gulp-csso node-sass -D

tailwind 설치 : 🔎 npm install tailwindcss -D

autoprefixer 설치 : 🔎 npm i autoprefixer -D

"-D"는 Developer 모드로 설치를 요청하는 것이에요!

방금 설치한 많은 파일을 git에 올리지 않기 위해 .gitignore에 추가해줘요:)
# .gitignore 추가
node_modules/

3) tailwind 초기화

tailwind 초기화 : 🔎 npx tailwind init 👈 tailwind.config.js가 생겨요!
module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

4) "gulpfile.js" 및 "styles.scss" 생성

프로젝트 디렉토리 안에 "gulpfile.js" 파일을 만들어준 뒤, 아래 내용을 붙여넣기 합니다.
# gulpfile.js
const gulp = require("gulp");
const css = () => {
  const postCSS = require("gulp-postcss");
  const sass = require("gulp-sass");
  const minify = require("gulp-csso");
  sass.compiler = require("node-sass");
  return gulp
    .src("assets/scss/styles.scss",{allowEmpty: true})
    .pipe(sass().on("error", sass.logError))
    .pipe(postCSS([require("tailwindcss"), require("autoprefixer")]))
    .pipe(minify())
    .pipe(gulp.dest("static/css"));
};
exports.default = css;
프로젝트 디렉토리 내에 "assets/scss/styles.scss" 디렉토리 및 파일을 생성 후 아래 내용을 추가합니다.
# styles.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
"npm run i", "npm run css"를 console에 입력했을 때, 아래처럼 오류가 없으면 정상입니다.

정상적으로 setting 되었다면, static 디렉토리에 css파일이 생성된 것을 확인할 수:)

모든 작업은 "assets/scss/styles.scss"에서 수행하고, "staic/css/styles.css"은 건드리지 않습니다. "gulpfile.js"에서 css로 변환해주기 때문이에요!

또한 "assets/scss/styles.scss"의 변경이 있을 때 마다 "npm run css" 명령을 해주어야 해요. "npm run css"는 "styles.scss"의 값를 웹브라우저가 이해할 수 있게 CSS로 변경해주는 명령입니다.

5) STATICFILES_DIRS 설정

"http://127.0.0.1:8000/static/css/styles.css" 를 접근해보면 아래와 같이 Page not found 에러가 발생합니다.

어떤 디렉토리에서 static 파일을 읽어올지 settings.py에 추가해 줍니다.

🔎 STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]

6) {% load static %}

Tailwind는 Django에서 css 파일을 적용하는 방법과 같아요. 맨 위에 static 파일을 읽어오겠다고 선언한 뒤, <head> 영역에 <link:css>를 추가해주면 됩니다. 단, <link:css> 줄 때, 아래처럼 파일의 경로를 잡아줍니다.

static 파일 load 선언 : 🔎 {% load static %}

CSS 경로 설정 : 🔎 <link rel="stylesheet" href="{% static 'css파일 경로' %}">

Tailwind은 reset css와 같은 Default값이 적용되어 있어, 깔끔하게 시작할 수 있습니다.

참고로 "Tailwind CSS IntelliSense" extension을 설치해주면 편리합니다.