티스토리 뷰

카테고리 없음

Chapter 19. Intro to TailwindCSS

jeongyeji 2021. 3. 4. 23:53

#19.0 Intro to TailwindCSS

TailwindCSS : utility 우선 framework

#19.1 Setting Up TailwindCSS with Gulp

package.json 수정

.gitingore에 node_modules/ 추가 : 모듈 파일 업로드하지 않도록

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/scss/styles.scss가 있고 : 여기서는 scss를 css로 바꾸는 일을 함
sass로 pipe할거다 (sass로 작업할거다)
postCSS로도 작업할건데 postCSS가 이해하는 두가지 plugin은 tailwindcss랑 autoprefixer
이게 끝나면 모든 output을 minify 할거고 : 코드를 짧게 만듦
그 이후에는 결과물을 static/css에 넣을거다 : 직전 세줄의 결과를 static/css로 보냄

⇒ 앞서 생성한 assets\scss\style.css에 tailwind 사용 가능

#19.2 Setup Explanation part One

#19.3 Setup Explanation part Two

sass file인 styles.scss

tailwind directive(@tailwind)

모든 scss file은 assets\scss\styles.scss 안에 있어야됨

css script 실행시 gulp 불러옴: 우리가 하는 일은 assets\scss\styles.scss 여기로 가서 css로 바뀜

assets is for programmer, static is for browser

static에서 수정X

styles.scss 변경 후(일반 html 작업 시에는 필요 없음) static에 적용하려면 npm run css

#19.4 Static Files on Django

config\settings.py : http://127.0.0.1:8000/static/ 로 갔을 때 static folder가 보이도록 설정

STATIC_URL = "/static/"
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]

templates\base.html

{% load static %}

#

<head>
        <meta> ##
        <link rel="stylesheet" href="{% static 'css/styles.css' %}">
        <title> </title>
</head>

<body> </body>

{% load static %} : static tag를 사용하기 위해 load

<link rel="stylesheet" href="{% static 'css/styles.css' %}"> : 원래는 url 주소 http://127.0.0.1:8000/static/css/styles.css지만 다 치기 힘드니까 static tag 사용

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/04 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

글 보관함

programming study