Tailwindcss Setup

()

nodejs, gulp

npm init

package.json 파일 수정

{
  "name": "airbnb-clone",
  "version": "1.0.0",
  "description": "Python, Django, Tailwind ...",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/3chamchi/airbnb-clone.git"
  },
  "homepage": "https://github.com/3chamchi/airbnb-clone#readme"
}

패키지 설치

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

npm install tailwindcss -D

.gitignore 깃 제외 폴더 추가

...
node_modules/

npx tailwind init

npm install autoprefixer -D 

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 파일 생성

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

• 실행시 해당 파일들은 css로 변환 시켜줌

테스트

  "scripts": {
    "css": "gulp"
  },

npm run css

• static > styles.css 생선되면 성공

vscode 확정 프로그램 > Tailwind CSS IntelliSense

자주 사용

container : 컨테이너 지정 반응형 적용
max-w-
max-h-

• None width: 100%;
• sm (640px) max-width: 640px;
• md (768px) max-width: 768px;
• lg (1024px) max-width: 1024px;
• xl (1280px) max-width: 1280px;
  h-6 : 높이
  w-6 : 너비
  flex : 수평 배열
  items-center : 수평 가운데 정렬
  justify-center : 수직 가운데 정렬
  m : 전체 마진
  ml : 왼쪽 마진
  mr : 오른쪽 마진
  p : 전체 패딩
  px : 좌우 패딩
  py : 상하 패딩
  border : 영역 테두리 선
  text : 텍스트 관련된거