Django프로젝트를 진행하며 front-end에 대해서 고민하게 되면서 tailwindcss를 알게되었다. 설치법을 여기 공부겸 정리해보겠다.

1. npm init

2. gulp 설치

3. tailwindcss 설치

4. gulpfile.js 설정

5. npm run css

6. customizing

1. npm init

npm을 설치하고 django디렉토리에서 npm init을 실행해주자. 그러면 package name부터 여러가지를 물어보겠지만 일단 다 넘겨준다.

그러면 디렉토리에 package.json파일이 생긴다. 파일을 열어서 필요없는건 다 지워주자.

{
  "name": "wheels",
  "version": "1.0.0",
  "description": ""
}

2. gulp 설치

다음과 같이 터미널에서 설치해주자. -D는 개발환경에서 설치이다.

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

3. tailwindcss 설치

npm으로 tailwindcss를 설치해주자.

npm install tailwindcss -D
npm install autoprefixer -D

설치가 끝나면 디렉토리에 node_modules라는 폴더가 생긴다.

gitignore에 꼭 넣어주자.

그리고 터미널에서 아래 명령어를 쳐주자.

npx tailwind init

그러면 디렉토리에 tailwind.config.js가 생긴다.

4. gulpfile.js 설정

먼저 메인 디렉토리에 assets > scss > styles.scss를 만들고 아래 내용을 넣어주자.

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

그리고 메인 디렉토리에 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/csss"));
}

exports.default = css;

5. npm run css

이제 css파일로 생성해보자.

먼저 package.json에 scripts를 추가해주자.

{
  "name": "wheels",
  "version": "1.0.0",
  "description": "",
  "devDependencies": {
    "autoprefixer": "^9.7.6",
    "gulp": "^4.0.2",
    "gulp-csso": "^4.0.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.1.0",
    "node-sass": "^4.14.0"
  },
  "scripts": {
    "css": "gulp"
  },
  "dependencies": {
    "tailwindcss": "^1.4.1"
  }
}

그리고 터미널에서 다음 명령어를 실행한다.

npm run css

그러면 static/css에 styles.css가 생성된다. 이제 django-template에서 불러와서 사용하면된다.

6. Customizing

사용하다보면 추가적인 수정이 필요할때가 있다.

예를 들어 height의 속성중 screen/2같이 새로 만들어내고 싶을때 아래와 같이 수정하면 된다.

tailwindcss.config.js파일을 열어서 수정한다.

나는 height를 수정해보겠다.

module.exports = {
  purge: [],
  theme: {
    extend: {
      height: theme => ({
        "screen/2": "50vh",
        "screen/3": "calc(100vh / 3)",
        "screen/4": "calc(100vh / 4)",
        "screen/5": "calc(100vh / 5)",
        "65": "25rem",
      }),
      width: theme => ({
        "65": "25rem",
      }),
    },
  },
  variants: {},
  plugins: [],
}

이렇게 작성이 끝나고 다시 npm run css를 실행하면 끝이다.

크롬의 css파일 쿠키와 세션을 날려주자.