Tailwind - 실습 환경 세팅

primav·2024년 8월 27일
CSShtmltailwind멋사

CSS

목록 보기
10/12

Tailwind

https://tailwindcss.com/docs/installation/using-postcss
Tailwind 공식 문서를 차근차근 따라가면 된다.

Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

만약 에러가 뜬다면 npm init -y로 세팅 초기화 하고 다시 실행해보기!
이 코드를 진행하면 package.json라는 파일이 생긴다.

파일 세팅

✔️ tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

❗️ html에 괄호 x

✔️ input.css

@tailwind base;
@tailwind components; // 사용한 적이 있는 코드만 넣어줌
@tailwind utilities;

✔️ index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./styles/output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

output 파일 생성

✔️ output.css 

npx tailwindcss -i ./src/styles/input.css -o ./src/styles/output.css

이 파일은 직접 만드는 것이 아니라 터미널에 위의 명령어를 입력하면 알아서 파일이 만들어진다.

여기서 만약 에러가 나타난다면 tailwind.config.js안의 {html.js}라고 괄호를 입력한 것이 아닌지 확인하고 다시 실행해보자.

한번 더 테스트

input.css output.css 파일의 이름을 바꾼 후 다시 컴파일을 해서 확인해보자!

✔️ input.css --> tailwind.css (파일 속 내용은 그대로)

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

✔️ index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./styles/output.css" rel="stylesheet" />
  </head>
  <body>
    **<h1 class="text-4xl font-bold underline">Hello world!</h1>**
  </body>
</html>

✔️ output.css --> main.css

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

✔️ 실행 명령어 

npx tailwindcss -i ./src/styles/main.css -o ./src/styles/tailwind.css

하지만 항상 실행 명령어를 사용하는 것은 명령어도 길고 복잡해서 사용하기 귀찮다.

npm run dev

항상 위의 실행 명령어를 사용하는 것은 명령어도 길고 복잡해서 사용하기 귀찮으므로 명령어를 따로 지정하여 간단하게 실행하고 싶다. 이때는 pakage.json 파일을 수정하면 된다.

"dev": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css"

scripts 안에 이렇게 명령어를 지정해 놓으면 앞으로는 npm run dev 를 터미널에 작성하면 위의 명령어를 실행하여 작동이 된다.

✔️ package.json
"dev": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css"

{
  "name": "tailwind",
  "version": "1.0.0",
  "main": "tailwind.config.js",
  "scripts": {
    "dev": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

--watch

위에서 만든 간단한 명령어로 컴파일을 해볼 수 있지만 위의 명령어는 index.html 파일을 수정할 때마다 다시 명령어르 사용하여 컴파일을 해야되기 때문에 불편하다.

이를 위해 live server처럼 내가 코드를 바꾸고 저장을 하면 그 즉시 output(main.css)에 반영될 수 있도록 하는 명령어가 있는데 이것이 --watch이다. (실시간으로 관찰!)

"dev": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css --watch"

✔️ package.json

  "scripts": {
   "dev": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css",
   "watch": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css --watch"
 },

npm run dev -- --watch

하지만 --watch를 쓴다고 해도 파일의 이름이 수정된다면 그 때마다 package.json 에 들어가서 dev 부분을 바꿔야 한다. 이걸 바꿀 때마다 dev와 watch를 두개 다 수정해야한다는 불편함이 있다.

이를 해결하기 위해 watch에 dev를 반영하여 설정한다.

❗️ 여기서 중요한 점은 dev와 --watch 사이에 --가 필수로 들어가야한다!!!
✔️ package.json

  "scripts": {
   "dev": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css",
   "watch": "npm run dev -- --watch"
 },

live-server

live-server를 사용하여 파일을 수정하면 바로 컴파일이 되고 live로 바로 브라우저로 확인해보고 싶다면 ?

npm i -D live-server을 터미널에 입력하여 live-server를 다운받고 package.json에 아래와 같은 코드를 입력한다.

✔️ package.json

{
  "name": "tailwind",
  "version": "1.0.0",
  "main": "tailwind.config.js",
  "scripts": {
    "dev": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css",
    "watch": "npm run dev -- --watch",
    "update": "npm run dev -- -- watch --update",
    "serve": "live-server --open=/src/"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "live-server": "^1.2.2"
  }
}

https://www.npmjs.com/package/live-server

run dev

npm run watch && npm run serve 를 둘 다 작성하고 싶다면?

npm i -D npm run all 을 터미널에 작성하여

나는 위처럼 진행해도 오류가 나서 npm install npm run all를 다시 작성했다. 이렇게 진행하면 아래의 사진과 같이 package.json에 버전들이 추가가 된다.

"start": "run-p watch serve", 코드를 추가하여 한번에 모든 것을 실행할 수 있도록 한다.

✔️ package.json

  "scripts": {
    "start": "run-p watch serve",
    "dev": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css",
    "watch": "npm run dev -- --watch",
    "update": "npm run dev -- --update",
    "serve": "live-server --open=/src/"
  },

이렇게 진행한 후 npm run start라고 친다.

vite를 사용하거나 어떠한 프로젝트를 진행할 때마다 컴파일을 하는 명령어가 달랐는데 package.json에 이러한 코드들이 있어서 그랬다는 것을 처음 알았다..!!

Tailwind 사용법

새로 파일을 하나 만들어 테스트를 해보자
파일을 만든 후에 <link rel="stylesheet" href="./../styles/main.css" />를 추가하여 css를 연결한다.

✔️ 01-Typography

<!DOCTYPE html>
<html lang="ko-kR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typography</title>
    <link rel="stylesheet" href="./../styles/main.css" />
  </head>
  <body>
    <h1 class="text-4xl">타이포그래피</h1>
    <p class-text="xxs">
      '함께 성장하는 바른 교육' 이듬(EUID)과 멋쟁이 사자처럼 태킷(Techit) 스쿨이
      만났습니다. '이듬' 교육이 지향하는 비전은 동반 성장에 있습니다. 강사에서
      수강생으로 한 방향으로 흘러가는 지식 전달이 아닌, 함께 공감하고 이해하며
      경험하는 교육 가치를 통해 공동의 혁신을 이끌어내는 것을 목표로 합니다.
      멋쟁이 사자처럼 태킷 스쿨은 '함께'의 가치를 중요하게 생각합니다. 5년이
      지나도, 10년이 지나도 IT 업계에 필요한 인재를 육성하는 교육을 제공하고,
      기업의 HRD 파트너로 존재할 것이며 국내 대표 IT 교육 회사인 만큼 더 좋은
      교육이 무엇인지를 끊임없이 고민하는 회사로 자리매김할 것입니다.
    </p>
    <p class="font-pre">
      '함께 성장하는 바른 교육' 이듬(EUID)과 멋쟁이 사자처럼 태킷(Techit) 스쿨이
      만났습니다. '이듬' 교육이 지향하는 비전은 동반 성장에 있습니다. 강사에서
      수강생으로 한 방향으로 흘러가는 지식 전달이 아닌, 함께 공감하고 이해하며
      경험하는 교육 가치를 통해 공동의 혁신을 이끌어내는 것을 목표로 합니다.
      멋쟁이 사자처럼 태킷 스쿨은 '함께'의 가치를 중요하게 생각합니다. 5년이
      지나도, 10년이 지나도 IT 업계에 필요한 인재를 육성하는 교육을 제공하고,
      기업의 HRD 파트너로 존재할 것이며 국내 대표 IT 교육 회사인 만큼 더 좋은
      교육이 무엇인지를 끊임없이 고민하는 회사로 자리매김할 것입니다.
    </p>
  </body>
</html>

✔️ tailwind.config.js
theme 안에 원하는 스타일링을 추가하면 된다.

https://tailwindcss.com/docs/font-family
이 공식 문서에서 나온 스타일들을 확인해보고 내가 추가로 넣고 싶은 스타일링이 있다면 아래와 같이 추가할 수 있다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ["./src/**/*.html"],
  content: ["./src/**/*.html"],
  theme: {
    extend: {
      fontSize: {
        xxs: "0.625rem",
      },
      fontFamily: {
        pre: ["Pretendard Variable", Pretendard],
      },
    },
  },
  plugins: [],
};

💡 extends의 유무
extends를 빼고 쓰면 내가 작성한 것만 쓸 수 있음
extends를 넣고 적어야 기본 제공하는 코드에 + 내가 작성한 스타일링 작성한 것도 쓸 수 있음

snippet generator

https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode

profile
primav
이전 포스트

form

다음 포스트

Tailwind

0개의 댓글