[Gulp, Tailwind] 사용하기 (초기세팅)

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

2. npm install tailwindcss -D

3. .gitignore -> node_modules/

4. npm run css

# projectdir.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/style.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(postCSS([require("tailwindcss"), require("autoprefixer")]))
    .pipe(minify())
    # 바꾼 css 코드 저장할 파일의 위치
    .pipe(gulp.dest("static/css"));
};

exports.default = css;

# projectdir.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/nomadcoders/airbnb-clone.git"
  },
  "scripts": {
    "css": "gulp"
  },
  "homepage": "https://github.com/nomadcoders/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"
  }
}

# projectdir.tailwind.config.js

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

# projectdir.assets.scss.style.scss

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