[django] tailwindCSS 적용법

1. 설치하기

1. node.js 와 gulp 12.13.0 설치해야 한다!
   * gulp : 자바스크립트에서 반복적이고 자주 사용되는 일을 자동화해주는 유용한 툴. 생상서 향상에 큰 도움.

2. node.js 를 설치해 준 다음에, (홈페이지에 가서!)

npm init

치고 엔터를 계속! 쫘르르륵

3. package.json 이 새로 만들어지고.

{
  "name": "UniFolio",
  "version": "1.0.0",
  "description": "어쩌구저쩌구!",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/dhooonk/~~.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/dhooonk/~~/issues"
  },
  "homepage": "https://github.com/dhooonk/~~~#readme"
}

여기에서 지워줄것을 지워주고 scripts를 gulp로 바꿔주면

{
  "name": "UniFolio",
  "version": "1.0.0",
  "description": "어쩌구 저쩌구!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/dhoonk/~~~.git"
  },
  "scripts": {
    "css":"gulp"
  },
  "homepage": "https://github.com/dhooonk/~~~#readme",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-csso": "^4.0.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "node-sass": "^4.13.0",
    "tailwindcss": "^1.1.4"
  }
}

이렇게 나온다. 이때 설치할 것들 다 설치를 해보자.

npm install gulp

npm install gulp-postcss

npm install gulp-sass

npm install gulp-csso

npm install node-sass

추가적으로 설치해보자. develop 단계로!

npm install gulp gulp-postcss gulp-sass gulp-csso node-sass -D

이렇게 다 설치해주고 나면 설치된 것이 많으니... git에다가 올리기는 벅차므로, gitignore를 해준다.

# Mac
.DS_Store
uploads/
node_modules/ #이걸 해준다!

그리고 이제

npm install tailwindcss -D

로 tailwindcss도 설치해준다.

npx tailwind init

도 해준다. 왜하는진 잘 모르겠다. 문서 읽어보자.

그리고 이제 새 파일을 만들어준다. 이름은 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")
    .pipe(sass().on("error", sass.logError))
    .pipe(postCSS([require("tailwindcss"), require("autoprefixer")]))
    .pipe(minify())
    .pipe(gulp.dest("static/css"));
};

exports.default = css;

내용은 이렇게 작성해주고,

assets 폴더를 만들어준다. 그리고 그 assets 폴더 안에 scss 파일들을 넣어줄 폴더를 만든다.

assets>scss 그리고 이 폴더 안에 styles.scss를 만들어준다.

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

styles.scss에 tailwind 를 불러준다. 이걸 실행하면 이 모든게 css로 된다.

npm i
npm run css #이렇게 하고 나면 scss 파일들이 css로 자동으로 변환됨.

2. 적용하기

assets은 개발자를 위한 것이고, static 브라우저를 위한 것이다. 새로고침할 때마다 서버에 줘야할 css파일을 안주니까 static 폴더들을 expose 해줘야 한다. 따라서, settings.py를 들어가서

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

을 추가해주고, 템플릿 파일에서 styles.css를 불러올 때는 원래 절대주소를 써서

<link rel="stylesheet" href="http://127.0.0.1:8000~~/statics/styles.css" >

인데 이걸 바꿔서

{% static "css/styles.css" %}

로 바꿔주어야 한다.

그리고 static은 태그 이니까 이걸 로드해줘야 한다. 즉,

{% load static %}

을 제일 위에 붙여준다.