tailwindcss with gulp

tailwindcss

개요

  TailWindCSS란 html에 tailwindcss가 정의한 class 값을 줌으로써 css 효과를 입히는 css framework다. Bootstrap은 web page가 bootstrap으로 만든 것같은 양산형 느낌을 주지만, tailwindcss는 그렇지 않다. 

tailwindcss web page

tailwindcss settup

Installation

  gulp를 사용해서 tailwindcss를 css code로 변환할 것이다. 설치해야 할 것들은 다음과 같다.

$ npm init
$ npm i gulp-sass, gulp-postcss, gulp-csso, node-sass, gulp, del

  gulp를 ES6 code로 작성하기 위해서 babel을 설치해준다.

$ npm i @babel/core @babel/preset-env @babel/register
또는
$ npm i @babel/{core,preset-env,register}

  tailwindcss를 설치해준다.

$ npm i tailwindcss
$ npx tailwind init

npx tailwind init를 하면 tailwind.config.js 파일이 생성된다.

tailwind.config.js

tailwindcss code

  build를 할 scss(or css) 파일에 다음 3줄을 추가한다. (assets/scss/styles.scss)

gulpfile.babel.js

  gulp는 pipe라는 것을 이용해서 여러가지 모듈들을 실행시킬 수 있다. 다음과 같이 code를 작성한 후

import gulp from "gulp";
import sass from "gulp-sass";
import autoprefixer from "autoprefixer";
import csso from "gulp-csso";
import postCSS from "gulp-postcss";
import tailwindcss from "tailwindcss";
import del from "del";

const path = {
  scss: {
    src: "assets/scss/styles.scss",
    dest: "static/css",
    watch: "assets/scss/**/*.scss",
  },
};

const scss = () => {
  sass.compiler = require("node-sass");
  return gulp
    .src(path.scss.src)
    .pipe(sass().on("error", sass.logError))
    .pipe(postCSS([tailwindcss, autoprefixer]))
    .pipe(csso())
    .pipe(gulp.dest(path.scss.dest));
};

const watch = () => {
  gulp.watch(path.scss.watch, scss);
};

const clean = () => del(["static/css/"]);
const assets = gulp.series([scss]);

export const build = gulp.series([clean, assets]);
export const dev = gulp.series([build, watch]);

  package.json에 두 개의 명령어를 추가한다.

package.json

$ npm run build 명령어를 사용하면 static folder에 css/styles.css 파일이 생성된다.

styles.css

Usage

  header의 class에 여러 가지 값을 준 case다. class 이름도 css와 비슷해서 이해하기도 쉽다.

    <header class='z-20 grid grid-cols-3 justify-between items-center px-14 border-b-2 mb-9 fixed w-full h-20 bg-white inset-0'>
      <div class="flex ">
        <a href="{% url 'core:home' %}" class="mr-4 flex items-center">
          <img src="{% static 'img/logo.png' %}" alt="logo" class="w-8 mr-2">
          <span class="font-bold text-xl text-red-500">hairbnb</span>
        </a>
      </div>
      {% block search-bar %}
        <div class="w-full flex justify-center items-center">
          <form>
            <input 
            type="text"
            placeholder="Searching By City"
            name="city" 
            class="shadow border-none outline-none px-8 py-3 rounded-3xl w-full border-gray-500 border"
            >
          </form>
        </div>
      {% endblock search-bar %}
      {% include 'partials/nav.html' %}
    </header>

  header의 class에 적용된 style은 밑에 스크린샷과 같다.

header에 적용된 css

  class 값만 줬을 뿐인데 바로 css가 적용이 되었다.

 

참고 자료

• 노마드 코더의 Airbnb 클론 강의
• tailwindcss

소스 코드

github.com/zpskek/airbnb-clone-v3/commit/3b8475ebc891569dbbe29d4a8508dc32e0e1f22d